Android Basic Widgets - 온더테크

Contents

6. 기본 위젯 (Basic Widgets)

안드로이드 애플리케이션에서 자주 사용되는 기본 위젯에는 텍스트를 표시하고 편집하는 TextView와 EditText, 버튼을 누르는 Button, 이미지를 표시하는 ImageView와 ImageButton, 그리고 리스트 형식으로 데이터를 표시하는 RecyclerView와 ListView가 있습니다. 이 섹션에서는 이러한 위젯의 사용법과 기본 예제를 소개합니다.

TextView

TextView는 텍스트를 표시하는 기본적인 위젯입니다.

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, World!"
    android:textSize="20sp"/>

TextView textView = findViewById(R.id.textView);
textView.setText("New Text");

EditText

EditText는 사용자가 텍스트를 입력할 수 있는 입력 필드입니다.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter text"/>

EditText editText = findViewById(R.id.editText);
String inputText = editText.getText().toString();

Button

Button은 사용자가 클릭할 수 있는 버튼을 나타냅니다.

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"/>

Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Button 클릭 시 동작
    }
});

ImageView

ImageView는 이미지를 표시하는 위젯입니다.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/sample_image"/>

ImageView imageView = findViewById(R.id.imageView);
imageView.setImageResource(R.drawable.sample_image);

ImageButton

ImageButton은 이미지가 있는 버튼입니다.

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/sample_image"/>

ImageButton imageButton = findViewById(R.id.imageButton);
imageButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // ImageButton 클릭 시 동작
    }
});

RecyclerView

RecyclerView는 많은 양의 데이터를 효율적으로 표시하는 뷰입니다. 레이아웃 매니저, 어댑터, 뷰 홀더 패턴을 사용하여 구성됩니다.

레이아웃 매니저 설정

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));

어댑터 설정

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    private List<String> dataList;

    public MyAdapter(List<String> dataList) {
        this.dataList = dataList;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        String data = dataList.get(position);
        holder.textView.setText(data);
    }

    @Override
    public int getItemCount() {
        return dataList.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        public TextView textView;

        public MyViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.textView);
        }
    }
}

RecyclerView에 어댑터 설정

List<String> dataList = new ArrayList<>();
dataList.add("Item 1");
dataList.add("Item 2");
dataList.add("Item 3");

MyAdapter adapter = new MyAdapter(dataList);
recyclerView.setAdapter(adapter);

ListView

ListView는 RecyclerView가 등장하기 전까지 자주 사용되던 리스트 형식의 뷰입니다.

레이아웃 설정

<ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

어댑터 설정

ListView listView = findViewById(R.id.listView);
List<String> dataList = new ArrayList<>();
dataList.add("Item 1");
dataList.add("Item 2");
dataList.add("Item 3");

ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, dataList);
listView.setAdapter(adapter);

아이템 클릭 리스너 설정

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        String selectedItem = dataList.get(position);
        // 아이템 클릭 시 동작
    }
});

Spinner

레이아웃 파일에 Spinner 추가

   <!-- res/layout/activity_main.xml -->
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       android:padding="16dp">

       <Spinner
           android:id="@+id/spinner"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"/>

   </LinearLayout>

ArrayAdapter를 사용하여 데이터 설정

   // MainActivity.java
   import android.os.Bundle;
   import android.view.View;
   import android.widget.AdapterView;
   import android.widget.ArrayAdapter;
   import android.widget.Spinner;
   import android.widget.Toast;
   import androidx.appcompat.app.AppCompatActivity;

   public class MainActivity extends AppCompatActivity {

       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);

           Spinner spinner = findViewById(R.id.spinner);

           // 스피너에 표시할 데이터 배열
           String[] items = new String[]{"Option 1", "Option 2", "Option 3"};

           // ArrayAdapter 생성
           ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_dropdown_item, items);

           // 어댑터를 스피너에 설정
           spinner.setAdapter(adapter);

           // 스피너 아이템 선택 리스너 설정
           spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
               @Override
               public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                   String selectedItem = parent.getItemAtPosition(position).toString();
                   Toast.makeText(MainActivity.this, "Selected: " + selectedItem, Toast.LENGTH_SHORT).show();
               }

               @Override
               public void onNothingSelected(AdapterView<?> parent) {
                   // 선택된 항목이 없을 때 처리
               }
           });
       }
   }

AutoCompleteTextView

AutoCompleteTextView는 사용자가 텍스트를 입력할 때 자동으로 제안 목록을 제공하여 선택할 수 있도록 하는 텍스트 입력 필드입니다.

레이아웃 파일에 AutoCompleteTextView 추가

   <!-- res/layout/activity_main.xml -->
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       android:padding="16dp">

       <AutoCompleteTextView
           android:id="@+id/autoCompleteTextView"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="Start typing..."/>

   </LinearLayout>

ArrayAdapter를 사용하여 데이터 설정

   // MainActivity.java
   import android.os.Bundle;
   import android.widget.ArrayAdapter;
   import android.widget.AutoCompleteTextView;
   import androidx.appcompat.app.AppCompatActivity;

   public class MainActivity extends AppCompatActivity {

       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);

           AutoCompleteTextView autoCompleteTextView = findViewById(R.id.autoCompleteTextView);

           // 자동 완성에 사용할 데이터 배열
           String[] items = new String[]{"Apple", "Banana", "Cherry", "Date", "Fig", "Grape", "Honeydew"};

           // ArrayAdapter 생성
           ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_dropdown_item_1line, items);

           // 어댑터를 AutoCompleteTextView에 설정
           autoCompleteTextView.setAdapter(adapter);
       }
   }

정리

안드로이드에서 기본 위젯들은 UI를 구성하는 데 필수적인 요소입니다. TextView, EditText, Button은 가장 기본적인 입력 및 출력 위젯이며, ImageView와 ImageButton은 이미지 표시 및 클릭 가능한 이미지를 제공합니다. RecyclerView와 ListView는 리스트 형식으로 데이터를 효율적으로 표시하는 데 사용됩니다. 이러한 위젯을 사용하면 안드로이드 애플리케이션의 UI를 풍부하게 구성할 수 있습니다.

Spinner와 AutoCompleteTextView는 각각 사용자가 선택할 수 있는 옵션을 제공하는 데 유용한 UI 구성 요소입니다.

Spinner: 드롭다운 목록에서 선택할 수 있도록 합니다.
AutoCompleteTextView: 사용자가 텍스트를 입력할 때 자동으로 제안 목록을 제공하여 선택할 수 있도록 합니다.

이 두 요소를 사용하면 사용자에게 더 나은 선택 경험을 제공할 수 있습니다. 다양한 상황에서 적절히 활용해 보세요.

Post Views: 267