안드로이드 다중 선택, 선택 모드 ListView 리스트 뷰 만들기.

안드로이드 Android

다중 선택, 선택 모드 ListView 리스트 뷰 만들기

http://recipes4dev.tistory.com/68

ListView - 선택 기능 조건

: check 박스로 여러 Item을 선택하는 '다중선택' 기능을 지원하는 ListView를 만들기 위해서는 

아이템이 선택 가능한지(checkable), 선택 되어 있는지(checked) 알 수 있어야 함.

ListView 아이템 Layout에 CheckBox를 배치

체크박스가 선택 -> 아이템 내의 체크박스 상태 확인x , 아이템 선택(checked) 상태 확인o

-> ListView 아이템 자체에 선택 여부를 판단할 수 있는 기능이 추가 되어야 함.

Checkable 인터페이스

아이템이 선택(checked) 되는지 확인하려면? 

List 아이템의 Root 역할을 하는 ViewGroup이 Checkable 인터페이스를 implements 하도록 만들면 됨.

* Root 역할 ViewGroup이란?

ListView 아이템을 구성하는 xml 최상위 Layout클래스(LinearLayout, RelativeLayout 등)을 지칭

*checkable 인터페이스를 implements하는 layout클래스를 추가하는 방법은 간단

Layout 클래스에서 상속 후, Layout을 만들어 넣기만 하면 됨.

class CheckableLinearLayout extends LinearLayout implements Checkable {
    // ... 
}

<CheckableLinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Deploy widgets for ListView Item -->

</CheckableLinearLayout>

다중 선택 기능을 지원하는 ListView 만드는 방법

* ListView 추가 

- android:choiceMode = "multipleChoice"

<ListView
    android:id="@+id/listview1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:choiceMode="multipleChoice" />

* ListView Item Layout 구성

: Item layout xml

이 때, 아이템 루트는 위에 설명한 Checkable 인터페이스를 implements한 ViewGroup이어야 하므로

'CheckableLinearLayout'을 지정

<?xml version="1.0" encoding="utf-8"?>
<parkgyu7.mytourtime.CheckableLinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="4dp"
    android:orientation="horizontal"
    android:descendantFocusability="blocksDescendants"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="1dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top|left"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:paddingBottom="6dp"
            android:paddingLeft="6dp"
            android:paddingTop="6dp">

            <TextView
                android:id="@+id/tourItemFirstDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:fontFamily="monospace"
                android:gravity="left"
                android:text="yyyy-mm-dd"
                android:textColor="@color/colorPrimaryDark" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="2dp"
                android:gravity="left"
                android:text="~"
                android:textAlignment="center"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tourItemLastDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:fontFamily="monospace"
                android:gravity="left"
                android:text="yyyy-mm-dd"
                android:textAllCaps="false"
                android:textColor="@color/colorPrimaryDark" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:focusable="false"
                android:clickable="true"
                />

            <TextView
                android:id="@+id/tourItemTourTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="1dp"
                android:layout_weight="1"
                android:fontFamily="monospace"
                android:gravity="center"
                android:paddingBottom="24dp"
                android:paddingTop="24dp"
                android:text="TOUR TITLE"
                android:textColor="@android:color/black"
                android:textIsSelectable="false"
                android:textSize="24sp"
                android:textStyle="bold" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:layout_weight="1"
            android:gravity="right"
            android:orientation="horizontal">

            <Button
                android:id="@+id/tourFavoriteBtn"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="left|center"
                android:layout_marginLeft="2dp"
                android:layout_weight="1"
                android:background="@drawable/fav_check" />

            <Button
                android:id="@+id/tourItemOptBtn"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical|center_horizontal|center"
                android:layout_weight="1"
                android:background="@drawable/opt_icon_1" />

        </LinearLayout>

        <TextView
            android:id="@+id/DdayTxt"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="1dp"
            android:layout_weight="1"
            android:fontFamily="monospace"
            android:gravity="center"
            android:hint="D-Day"
            android:textColor="@color/colorPrimaryDark" />

    </LinearLayout>


</parkgyu7.mytourtime.CheckableLinearLayout >

* Checkable 인터페이스를 implements 한 LinearLayout 클래스 정의

: LinearLayout 클래스를 상속하고, Checkable 인터페이스를 implements한 클래스를 추가.

public class CheckableLinearLayout extends LinearLayout implements Checkable {

    // 만약 CheckBox가 아닌 View를 추가한다면 아래의 변수 사용 가능.
    // private boolean mIsChecked ;

    public CheckableLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        // mIsChecked = false ;
    }

    @Override
    public boolean isChecked() {
        CheckBox cb = (CheckBox) findViewById(R.id.checkBox1) ;

        return cb.isChecked() ;
        // return mIsChecked ;
    }

    @Override
    public void toggle() {
        CheckBox cb = (CheckBox) findViewById(R.id.checkBox1) ;

        setChecked(cb.isChecked() ? false : true) ;
        // setChecked(mIsChecked ? false : true) ;
    }

    @Override
    public void setChecked(boolean checked) {
        CheckBox cb = (CheckBox) findViewById(R.id.checkBox1) ;

        if (cb.isChecked() != checked) {
            cb.setChecked(checked) ;
        }

        // CheckBox 가 아닌 View의 상태 변경.
    }
}

- override method

•  public boolean isChecked()  : 현재 checked 상태 리턴
• public void toggle() : 현재 checked 상태를 바꿈 - UI 반영
• public void setChecked(boolean checked) : checked 상태를 checked 변수대로 설정

// setChecked(mIsChecked ? false : true) ;

CheckBox가 아닌 view를 사용할 경우 (ex. ImageView, TextView) 'mIsChecked' 변수를 사용

단일선택 모드로 사용하기

위 예제는 다중선택 모드를 기준으로 작성되어 있는데, 단일 선택 모드 (SingleChoice)로 사용하자면

Listview 속성

android:choiceMode = "multipleChoice" -> "SingleChoice"로 변경하면 됨.