안드로이드 체크박스(CheckBox) 기본 사용법. (How to use an Android Checkbox)

2017. 6. 19. 10:11


1. 안드로이드 CheckBox

컴퓨터의 화면이 텍스트 입출력 방식(CLI, Command Line Interface)에서, 그래픽으로 구성된 요소(Component)를 통해 사용자와 상호작용하는 그래픽 사용 방식(GUI, Graphic User Interface)으로 바뀐 이후로, GUI 프레임워크에 따라 그 구성요소(Component)의 이름 또한 많이 변화되어 왔습니다. 안드로이드에서 문자열 출력을 위해 사용되는 TextView가 어떤 곳에서는 StaticText 또는 Label 등의 이름으로 불리는 것을 예로 들 수 있죠.


하지만 그러한 변화 중에도, 대부분의 주요 GUI 프레임워크 또는 개발 툴에서 동일한 이름을 유지해온 요소가 있습니다. 바로 Button과 CheckBox입니다.


Button은 [안드로이드 버튼 기본 사용법]에서 살펴봤듯이, 사용자가 화면을 터치했을 때 발생하는 클릭 이벤트를 처리하는 기능을 가진 View 위젯입니다. 사실, 이렇게 풀어서 설명하기가 머쓱할 정도로, Button은 컴퓨터를 사용해본 경험이 있는 사람이라면 누구나 알고 있는 화면 구성요소(Component)입니다.


CheckBox 또한 마찬가지입니다. 어디서 맨 처음, 이 "CheckBox(체크박스)"라는 용어를 사용했는지는 모르겠지만, 사용자의 화면 터치(클릭 이벤트)에 따라 "선택됨(checked)" 또는 "선택되지 않음(unchecked)"의 상태를 표시하기 위해 사용되는 구성요소(Component)라는 것을, 컴퓨터 GUI 화면을 사용해본 경험이 있는 사용자라면 거의 대부분 알고 있죠.


이렇듯 오랜 기간 그 이름과 기능을 유지해 온 Button과 CheckBox는 한 가지 공통점을 가지고 있습니다. 그것은 바로 Button과 CheckBox의 기본적인 사용 목적이, 사용자가 화면을 터치했을 때 발생하는 클릭 이벤트를 처리하기 위한 것이라는 겁니다.
반면 두 요소 간 차이점으로서, CheckBox에만 존재하는 특징이 있습니다. 바로 CheckBox는 "선택됨(checked)"과 "선택되지 않음(unchecked)"으로 구분된 두 가지 상태(two-states)를 가진다는 것이죠.


이 공통점과 차이점에 따라, 객체 지향 프로그래밍(Object Oriented Programming) 개념을 적용하면 Button이 CheckBox의 부모가 됩니다. CheckBox의 입장에서, 클릭 이벤트 처리 기능은 Button으로부터 상속받고, 두 가지 상태(two-states) 관리 기능만 새로 추가하면 되는 것입니다.


그런데 안드로이드에서, 클릭 이벤트를 처리함과 동시에 선택과 관련된 두 가지 상태를 가지는 View 위젯이 CheckBox만 있는 것이 아닙니다. 다른 글을 통해 살펴볼 RadioButton, Switch 또는 ToggleButton같은 View 위젯들도 CheckBox와 동일한 특징을 가지고 있습니다. 물론, 그룹 묶음에 의한 배타적(exclusive) 선택 기능이나 화면에 표시되는 모양 차이 등의 세부적인 차이점을 가지고 있지만 말이죠.


그래서 안드로이드에서는, "선택됨(checked)"과 "선택되지 않음(unchecked)"이라는 두 가지 상태가 클릭 이벤트에 의해 자동으로 변경되게 만드는 공통 기능을 가진 CompoundButton이라는 클래스를 추가하고, CheckBox, RadioButton, Switch, ToggleButton을 CompoundButton으로부터 상속받도록 만들었습니다. (이 또한 객체 지향 프로그래밍(Object Oriented Programming) 개념에 기초한 설계의 결과입니다.)


이로써 안드로이드의 버튼 관련 View 위젯들 간 관계는 다음 그림과 같이 구성됩니다.

Button - CompoundButton - CheckBox, RadioButton, Switch, ToggleButton 상속 관계도


CheckBox 클래스 계층 관계도


2. CheckBox 기본 사용법.

TextView 또는 Button처럼, 안드로이드 기본 View 위젯인 CheckBox를 사용하는 방법도 아주 간단합니다.

2.1 Layout 리소스 XML에 CheckBox를 추가하여 화면에 표시.

CheckBox를 화면에 표시하려면, Layout 리소스 XML 파일에 CheckBox를 추가하면 됩니다.

[STEP-1] "activity_main.xml" - Layout 리소스 XML에 CheckBox 추가.
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Check"
        android:id="@+id/check1"/>

CheckBox 표시 화면


2.2 CheckBox 클릭 이벤트 처리.

화면에 표시된 CheckBox에서 발생한 클릭 이벤트를 처리하기 위해서는, CheckBox에 대한 클릭 이벤트 리스너 객체를 생성하여 setOnClickListener() 함수에 전달하면 됩니다. 이는 [안드로이드 버튼 기본 사용법]에서 설명한 Button 클릭 이벤트 처리 방법과 동일한 절차입니다. (클릭 이벤트를 처리하는 여러 가지 방법에 대해서는 [버튼 클릭 이벤트를 처리하는 몇 가지 방법]에서 확인할 수 있습니다.)

[STEP-2] "MainActivity.java" - CheckBox의 클릭 이벤트 처리.
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        // ... 코드 계속

        CheckBox checkBox = (CheckBox) findViewById(R.id.check1) ;
        checkBox.setOnClickListener(new CheckBox.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO : process the click event.
            }
        }) ;
    }
}

여기서 한 가지 주의할 점이 있는데, CheckBox의 선택 여부(checked or unchecked)를 변경하기 위해서는 반드시 클릭 이벤트 리스너를 등록해야 하는 것으로 오해하는 경우가 있다는 것입니다. 클릭 이벤트 리스너의 onClick() 함수에서 직접, 선택 여부를 변경해줘야 하는 것으로 말이죠. 하지만 그것은 잘못된 생각입니다.


CheckBox에서 선택 여부(checked or unchecked)는 클릭 이벤트 리스너의 사용 유무와 관계없이 자동으로 처리되도록 이미 구현되어 있습니다. CheckBox의 직접적인 부모 클래스인 CompoundButton에 이미 상태 관리 및 이벤트에 따른 상태 변경 기능이 구현되어 있기 때문에, 특수한 경우를 제외하고 클릭 이벤트에서 CheckBox의 선택 여부(checked or unchecked)를 바꿀 이유가 없죠.


그럼 CheckBox의 클릭 이벤트는 어떤 경우에 사용되는 걸까요?
주로, CheckBox의 선택 여부에 따른 앱의 기능 변경 사항을 사용자에게 실시간으로 알려준다던지, CheckBox 선택 여부에 따라 추가적인 내용을 보여주거나 감추는 기능을 제공할 때 사용됩니다.

2.3 CheckBox 선택 상태 가져오기.

CheckBox를 사용하는 가장 주된 이유는 앱에서 제공하는 기능의 사용 여부를, 사용자로부터 "선택됨(checked)" 또는 "선택되지 안됨(unchecked)"의 형태로 입력받기 위함입니다. 사용자로부터 입력된 선택 상태 값은 Java 코드에서 isChecked() 함수를 사용하여 확인할 수 있습니다.

[STEP-3] "MainActivity.java" - CheckBox 선택 상태 가져오기.
    CheckBox checkBox = (CheckBox) findViewById(R.id.check1) ;
    if (checkBox.isChecked()) {
        // TODO : CheckBox is checked.
    } else {
        // TODO : CheckBox is unchecked.
    }

2.4 CheckBox 선택 상태 변경하기.

앱 시작 시, 또는 앱 실행 중 CheckBox의 선택 상태를 설정하려면, setChecked() 함수를 사용합니다. setChecked() 함수의 파라미터인 boolean 값에 "true"를 전달하면 "선택됨(checked)" 상태로, "false"를 전달하면 "선택되지 않음(unchecked)" 상태로 설정하게 됩니다.

[STEP-4.1] "MainActivity.java" - CheckBox의 setChecked() 함수로 선택 상태 변경하기.
    CheckBox checkBox = (CheckBox) findViewById(R.id.check1) ;

    checkBox.setChecked(true) ; // "선택됨" 상태로 변경. 

setChecked() 함수가, 파라미터로 지정된 값으로 CheckBox의 상태를 설정하는 반면, 현재 CheckBox의 선택 상태를 반대로 설정하도록 만드는 함수도 있습니다. 바로 toggle() 함수 입니다.

[STEP-4.2] "MainActivity.java" - CheckBox의 toggle() 함수로 선택 상태 반전시키기.
    CheckBox checkBox = (CheckBox) findViewById(R.id.check1) ;

    checkBox.toggle() ; // CheckBox의 선택 상태를 반대로 변경

2.5 체크 박스 클릭 이벤트 함수에서 선택 상태 알아내기.

만약 체크 박스(CheckBox)가 클릭되었을 때 클릭 이벤트 핸들러 함수에서 체크 박스(CheckBox)의 선택 여부를 확인하려면, onClick() 함수의 파라미터인 View를 CheckBox로 형변환 한다음, isChecked() 함수를 호출하면 됩니다.

[STEP-5] "MainActivity.java" - 체크박스 선택 시, 선택 상태 확인.
    CheckBox checkBox = (CheckBox) findViewById(R.id.check1) ;
    checkBox.setOnClickListener(new CheckBox.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (((CheckBox)v).isChecked()) {
                // TODO : CheckBox is checked.
            } else {
                // TODO : CheckBox is unchecked.
            }
        }
    }) ;

2.6 앱 실행 시 체크 박스가 자동 선택되도록 만들기.

앱 실행 시, 체크 박스의 최초 선택 여부를 지정하기 위해서는 checked 속성을 사용합니다.

[STEP-6] checked 속성으로 최초 선택 여부 지정.
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Check"
        android:id="@+id/check1"
        android:checked="true" />

CheckBox 기본 선택 화면


3. 참고

.END.


ANDROID 프로그래밍/BUTTON , , , , , , , , ,

  1. Blog Icon
    urbest

    주제와 상관없는 질문일 수도 있는데 한가지 여쭤보려고 합니다.
    앱 아이콘 애니메이션 관련 질문인데요
    안드로이드에서 설치된 앱을 길게 누르고 있으면 앱 아이콘이 위아래로 살짝살짝 움직이는데 이 애니매이션 구현하는 법 혹시 알수 있을까요? 링크라도 괜찮습니다

  2. 아~ 흠.. 말씀하신 애니메이션 부분은 저도 잘 모르겠어요. 한번도 고민해보지 않은 부분이라, 당장은 직접 그리는 거 외엔 접근 방법이 떠오르지 않네요.

    도움을 드리기 어려울 것 같습니다.
    죄송합니다.

  3. 안녕하세요 초급 개발자 입니다. 초기에 체크박스에 체크가 안되있는 상태를 체크하게 된다면...
    어플을 껏다 새로 켜면 체크된 상태가 계속 유지 되게끔 할 수 있는 참고할만한게 있을까요?

    어플을 만드는데 어플사용방법을 설명하는 부분에 체크박스와 버튼을 만들어서 체크박스에 체크가 안되있는 상황에 버튼을 누르면 다음 화면으로 넘어가고 체크가 된상태로 버튼을 누르면 그다음 어플을 켜면 사용방법설명하는 부분을 스킵하기 위함입니다.

  4. 보통, 질문하신 내용처럼 앱 자체에, 지속적으로 저장해야 될 필요가 있는 데이터는 SharedPreferences 를 사용합니다.

    물론, 파일(http://recipes4dev.tistory.com/category/ANDROID%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/FILE) 이나 데이터베이스(http://recipes4dev.tistory.com/category/ANDROID%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/DB)를 사용해도 되지만,
    간단한 값을 저장하기에는 SharedPreferences가 적당하죠.
    key-value 형태로 값을 저장하고 확인하기가 쉬우니까요.

    관련 내용은, 아직 블로그에는 작성되어 있지 않고, 안드로이드 개발 사이트에서 확인하실 수 있습니다.

    https://developer.android.com/training/data-storage/shared-preferences.html

    살펴보시고 추가적인 질문이 있으면 글 남겨주세요.

    감사합니다.

  5. Blog Icon
    ocs

    초보자 입니다. 좋은 글 감사하며 읽고 있습니다.

    안드로이드 3.xx 버전에서 아래가 오류가 납니다.
    checkBox.setCheck(true) ; // "선택됨" 상태로 변경.

    checkBox.setChecked(true) ; // 오류 안남.


    감사 합니다.

  6. 잘못된 내용 찾아서 지적해 주셔서 감사드립니다.

    본문 내용 반영해 놓겠습니다.

    감사합니다.

  7. Blog Icon
    쪼꼬미

    뽀따님 안녕하세요~!!
    오늘은 질문을 드리고시펑서 왔슴당
    제가 체크박스를 사용하고자 하는 xml에 체크박스를 아래처럼 추가했어요.
    <CheckBox
    android:id="@+id/checkBox1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:focusable="false"
    android:clickable="false"
    android:drawableLeft="@drawable/check_image"
    android:layout_weight="1" />



    그리고
    <?xml version="1.0" encoding="utf-8"?>
    <selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
    android:state_checked="true"
    android:drawable="@drawable/on_checkimage" />

    <item
    android:drawable="@drawable/off_checkimage"/>
    </selector>

    다른 xml을 만들어서 selector를 이용한, 체크박스 이미지를 교체하고자 하는데
    계속 체크박스가 두개가 나와요 ㅠㅠ
    왼쪽엔 체크박스위젯에서 기본적으로 제공하는 체크박스가 나오고,
    오른쪽에는 제가 selector로 추가한 이미지가 나오고...
    두개다 체크하면 체크되고, 해지되는데
    저는 제가 selector로 추가한 체크이미지만 나오게 하고싶은데
    어떻게 해야할지 모르겠어서 문의드립니다 ㅠㅠ...

  8. 흠.. 제가 코드를 시험해볼 수 있는 환경이 아니라서, 경험적인 답변을 드리기는 힘들고요.

    질문글에 올려주신 코드에서, drawableLeft를 background 로 바꿔서 한번 해보세요.

    해보시고, 잘 안되면 다시 질문 글 남겨주세요.

    감사합니다.

  9. Blog Icon

    혹시 체크버튼을 텍스트 오른쪽에 위치하게 할 수도 있나요??

  10. 보통 그런 경우는 텍스트뷰와 체크박스를 조합해서 레이아웃을 만드는데요.

    체크박스 자체만으로 하시려면, 아래 링크를 참고해보세요.
    https://stackoverflow.com/questions/3156781/how-to-show-android-checkbox-at-right-side

    저도 직접 해본 게 아니라, 정확한 내용인지는 모릅니다.
    하지만 도움 되셨으면 좋겠네요.

    감사합니다.