[Android] 리스트 영역 나누기(2) - 체크박스 영역 만들기

현재까지 진행을 했다면 아래의 스크린샷과 같은 리스트가 뿌려지게된다. 하지만 아무리 리스트를 클릭해봐도 리스트 자체는 클릭이 되지않고 체크박스만 클릭이 되는것을 알 수 있다.

이제부터 영역을 나눠주는 작업을 시작한다. 우선 체크박스의 영역을 구분해 줄 LinearLayout을 상속받은 클래스를 하나 작성한다. 다른 부분은 건드릴 필요가 없고 단지 press가 들어왔을 때의 액션만 조정해주면 된다.



CheckBoxArea.java

package list.area;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;

public class CheckBoxArea extends LinearLayout {

    public CheckBoxArea(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public void setPressed(boolean pressed) {

        if (pressed && ((View) getParent()).isPressed()) {
            return;
        }
        super.setPressed(pressed);
    }
}

위의 소스에서 LinearLayout의 메소드 중 오버라이드 한 부분은 setPressed(boolean pressed)메소드 하나이다.

        if (pressed && ((View) getParent()).isPressed()) {
            return;
        }

이 부분은 클릭을 했고 부모 즉, 체크박스 영역을 감싸고있는 LinearLayout을 클릭했을 때의 처리부분으로 return을 해버림으로 해서 체크박스 영역은 클릭이 되지 않도록 하는 부분이다.

이제 list_items.xml파일도 수정을 한다.

list_items.xml

세부 내용을 찬찬히 살펴보자면...

    <list.area.CheckBoxArea
        android:id="@+id/checkBoxArea"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="@drawable/selector"
    >

사용자 정의 View이므로 정확한 패키지명까지 작성을 해 주어야 정상적으로 작동이된다. 그리고 background속성을 넣어주지 않는다면 텍스트 영역을 클릭해도 체크박스 영역까지 클릭이 되어지는것 처럼 보이는것을 알 수 있다. background는 간단하게 선택 되었을때, 그렇지 않을때 두가지로 구성해주기로 한다.

selector의 자세한 사용법은 안드로이드 체크박스 스타일 바꾸기에서 확인 가능.

selector.xml

체크박스의 속성 중 focusable, clickable두 속성을 false로 지정해서 체크박스 자신이 직접 선택되는것을 막아준다. 그리고 속성 중 android:duplicateParentState라 는 속성이 있다.

android:duplicateParentState

When this attribute is set to true, the view gets its drawable state (focused, pressed, etc.) from its direct parent rather than from itself.

해석해 보자면 이 속성이 true로 설정이 되면 자신의 보다 부모에서 직접적으로 상태 drawable을 가져온다 라고 해석이 될듯하다. 즉 부모가 클릭이 되면 자식인 자신도 클릭이된다. 반대로 체크박스를 클릭해도 부모도 함께 클릭이 되게된다.

    <ImageView
        android:src="@drawable/divider_vertical_dark"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:paddingTop="4dip"
        android:paddingBottom="4dip"
        android:scaleType="fitXY"
        android:gravity="fill_vertical"
    />

단순히 체크박스 영역과 텍스트 영역을 구분하기 위한 하나의 수직선이다. divider_vertical_dark의 경우 기본 안드로이드 이미지에도 존재하지만 테스트 과정에서 이상한 이미지가 적용이 되어 직접 이미지를 다운받아 리소스에 포함시켰다. 만일 정상적으로 적용이된다면 @*android:drawable/divider_vertical_dark로 바꾸어 리소스의 용량을 줄이도록한다.

여기까지 진행이 되었다면 한번 에뮬에서 실행을 시켜본다.

이제는 텍스트영역을 클릭하면 텍스트영역만 선택되는 것을 알 수 있다. 그러나 체크박스 영역을 클릭해봐도 반응이 없음 또한 알 수 있다. 이제 소스를 수정해도록 한다.