안드로이드 체크박스(CheckBox) 기본

---

1. CheckBox

체크박스는 사용자가 하나의 그룹 안에서 여러 개의 버튼을 동시에 선택할 때 사용하는 위젯이다.

체크박스를 생성하기 위해서는 xml 레이아웃에서 <CheckBox> 태그를 추가하여 작성하면 된다.

---

2. 체크박스 구현

안드로이드 체크박스 예제를 만들어보자.

예제는 교통수단 선택 사항으로 버스, 택시, 메트로를 체크박스로 지정하여 선택된 교통수단의 아이콘이 화면에 표시되도록 구현한다.

체크박스 예제 테스트를 위해 다음과 같은 순서로 코드를 작성한다.

• drawable 디렉터리에 교통수단 이미지파일 저장
• activity_main.xml 작성
• MainActivity.java 작성

 

1) image 파일 저장

가장 선택된 교통수단의 아이콘은 임의로 만든 이미지 파일을 연결해본다.

연결할 이미지를 프로젝트 디렉터리 창의 res - drawable에 복사한다.

아이콘으로 사용할 png 이미지를 복사하여 drawable 폴더에 이동시켰다.

 

2) activity_main.xml

다음 작업으로 레이아웃을 구성해보자.

리니어 레이아웃을 기본으로하여 레이아웃을 작성한다.

레이아웃에 사용하는 위젯으로 <CheckBox>, <ImageView>를 사용한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="교통수단 선택"
        android:textSize="30sp"
        android:textColor="@color/black"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingStart="20dp"
        android:layout_marginBottom="20dp">

        <CheckBox
            android:id="@+id/checkbox1"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginRight="50dp"
            android:text="Bus" />

        <CheckBox
            android:id="@+id/checkbox2"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginRight="50dp"
            android:text="Taxi" />

        <CheckBox
            android:id="@+id/checkbox3"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginRight="50dp"
            android:text="Metro" />

    </LinearLayout>

    <ImageView
        android:id="@+id/ic_bus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/icon_bus" />

    <ImageView
        android:id="@+id/ic_taxi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/icon_taxi" />

    <ImageView
        android:id="@+id/ic_metro"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/icon_metro" />

</LinearLayout>

체크박스 테스트용 예제를 만들기 위해 체크박스 3개와 각각에 매칭되는 이미지뷰 3개를 넣고 각각의 id값을 지정한다.

 

3) MainActivity.java

레이아웃 구성이 완료되었으니 이번에는 자바코드를 작성한다.

다음과 같이 자바코드를 작성한다.

public class MainActivity extends AppCompatActivity {

    private ImageView imageView1, imageView2, imageView3;
    private CheckBox checkBox1, checkBox2, checkBox3;

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

        initView();
    }

    private void initView() {
        imageView1 = findViewById(R.id.ic_bus);
        imageView2 = findViewById(R.id.ic_taxi);
        imageView3 = findViewById(R.id.ic_metro);

        imageView1.setVisibility(View.INVISIBLE);
        imageView2.setVisibility(View.INVISIBLE);
        imageView3.setVisibility(View.INVISIBLE);

        checkBox1 = findViewById(R.id.checkbox1);
        checkBox2 = findViewById(R.id.checkbox2);
        checkBox3 = findViewById(R.id.checkbox3);

        checkBox1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (checkBox1.isChecked()) {
                    imageView1.setImageResource(R.drawable.icon_bus);
                    imageView1.setVisibility(View.VISIBLE);
                } else {
                    imageView1.setVisibility(View.INVISIBLE);
                }
            }
        });

        checkBox2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (checkBox2.isChecked()) {
                    imageView2.setImageResource(R.drawable.icon_taxi);
                    imageView2.setVisibility(View.VISIBLE);
                } else {
                    imageView2.setVisibility(View.INVISIBLE);
                }
            }
        });

        checkBox3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (checkBox3.isChecked()) {
                    imageView3.setImageResource(R.drawable.icon_metro);
                    imageView3.setVisibility(View.VISIBLE);
                } else {
                    imageView3.setVisibility(View.INVISIBLE);
                }
            }
        });
    }
}

화면을 초기화하기 위해 initView() 메서드를 만들고 그 안에 이미지뷰와 체크박스의 내용들을 작성한다.

모두 작성했다면 완성된 코드를 실행해보자.

---

3. 실행 결과

작성한 체크박스 테스트 앱을 실행해보면 다음과 같이 구동되는 것을 확인할 수 있다.

Bus 체크박스를 누르면 버스 이미지가, Taxi 체크박스를 누르면 택시 이미지가, Metro 체크박스를 누르면 메트로 이미지가 나타나는 것을 확인할 수 있다.