[안드로이드/Android] 안드로이드 리스트뷰 추가 삭제 기능 추가하기

안드로이드 리스트뷰 추가 삭제 기능 추가하기

리스트뷰 기초

리스트뷰 추가 삭제 기능 추가하기    ☜    현재 보는곳

리스트뷰 커스텀 어댑터뷰

읽기 전에 손가락 한번 꾸~욱 _(__)_ ♥

감사합니다.^^ ☞ ☜

이번에는 리스트뷰의 데이터 한개를 추가, 삭제 하는 편집기능에 대해 알아 보겠습니다.

이전 포스트에서 말한것 처럼 리스트뷰는 3가지로 나뉘어져 있다고 하였습니다.

데이터(값)  < -- >  뷰(ListView)  <-->  어댑터(Controller)

그럼 편집기능을 넣을려면 어떻게 해야 하는것인가? 

먼저 추가되는 과정을 하나씩 살펴 보겠습니다.

1. 사용자가 텍스트(문자열)를 입력한다.

2. 추가 버튼을 누른다.

3. 문자열을 리스트뷰에 보여준다.

위의 과정은 민간인들의 생각입니다. 저희 프로그램은 좀 달리 생각해야 합니다. 가장 적절하게는 초딩처럼 생각하시면 좋을거 같습니다.

(지극히 개인적인 생각이며 정확히 밝혀진 근거는 없습니다. 가끔 초등학생인 저희 조카와 이야기 하다보며 느낀점이니깐요.)

1. 사용자가 텍스트(문자열)을 입력한다.

2. 추가 버튼을 누른다.

2-1. 문자열이 데이터 부분에 저장된다.

2-2. 변경된 문자열이 있음을 어댑터가 알아차리고 리스트뷰한테 "값이 바뀌었으니 니도 업데이트좀 해라" 라고 알린다.

3. 문자열을 리스트뷰에서 보여준다.

위의 붉게된 부분이 추가된 녀석이죠. 아시는 분들은 다들 아시는 내용이지만 실제로 리스트뷰는 위와 같은 순서대로 차근차근 진행되어야 제대로 변경된 데이터가 리스트뷰에 반영 됩니다. 그럼 하나씩 뜯어 보겠습니다.

2-1. 문자열이 데이터 부분에 저장된다.

--> 자바 코드상에 선언된 ArrayList에 추가.

2-2. 변경된 문자열이 있음을 알리고 ........ 라고 알린다.

--> adapter.notifyDataSetChanged();

위의 두가지만 기억해 두시면 됩니다. 그럼 간단한 예제를 살펴 보겠습니다.

main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <LinearLayout

        android:id="@+id/linearLayout1"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

        <EditText

            android:id="@+id/editText"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1" >

            <requestFocus />

        </EditText>

        <Button

            android:id="@+id/input"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="추가" />

        <Button

            android:id="@+id/del"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="삭제" />

    </LinearLayout>

    <ListView

        android:id="@+id/listView"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

    </ListView>

</LinearLayout>

ListViewTestActivity01.java

package com.tistory.jwandroid.listview.test;

import java.util.ArrayList;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ArrayAdapter;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ListView;

public class ListViewTestActivity01 extends Activity implements OnClickListener {

ListView list;

Button addBtn, delBtn;

EditText editText;

ArrayList<String> dataArr;

ArrayAdapter<String> mAdapter;

@Override

public void onCreate(Bundle savedInstanceState) {

     super.onCreate(savedInstanceState);

     setContentView(R.layout.main);

     list = (ListView) findViewById(R.id.listView);

     editText = (EditText) findViewById(R.id.editText);

     addBtn = (Button) findViewById(R.id.input);

     delBtn = (Button) findViewById(R.id.del);

     addBtn.setOnClickListener( this );

     delBtn.setOnClickListener( this );

     dataArr = new ArrayList<String>();

     mAdapter = new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_single_choice, dataArr);

     list.setChoiceMode(ListView.CHOICE_MODE_SINGLE);

     list.setAdapter(mAdapter);

}

@Override

public void onClick(View v) {

if(v == addBtn){

String str = editText.getText().toString();

if(str.length() != 0){

editText.setText("");

dataArr.add(str);

mAdapter.notifyDataSetChanged();

}

}else if(v == delBtn){

int pos = list.getCheckedItemPosition();

if(pos != ListView.INVALID_POSITION){

dataArr.remove(pos);

list.clearChoices();

mAdapter.notifyDataSetChanged();

}

}

}  

}

위 코드상에서 붉게 표시된 부분이 이번에 중요 뽀인뜨 입니다.

보시는 것처럼 데이터에 추가하고 어댑터가 리스트 뷰한테 알려주는 겁니다.

특별히 문제될것도 없고 어려운것도 없을 겁니다. 다만 " notifyDataSetChanged() 라는 메소드가 리스트뷰 갱신을 위해 쓰여진다." 라는것 정도만 알고 계심 좋을거 같네요.

위의 코드에서 파란색으로 표시된 녀석이 있을 겁니다. 두줄인데요. 항상 같이 따라 다녀야 합니다. 

android.R.layout.simple_list_item_single_choice 

--> 리스트뷰 모양을 우측에 라디오 버튼을 추가해서 선택할 수 있도록 해라.

list.setChoiceMode(ListView.CHOICE_MODE_SINGLE);

--> 리스트뷰를 한개 선택할 수 있도록 해라.

보시는 것처럼 위의 두녀석은 항상 붙어 다닙니다. 뷰 모양은 1개 선택인데 리스트뷰의 선택모드는 선택안됨으로 되어 있으면 말이 안되겠죠? 

그렇다고 에러는 나지 않습니다. 다만 그에 따라 선택이 되지 않을 뿐 입니다. 조심하세요.~

이번에는 여러개의 데이터를 선택하여 삭제하는 녀석에 대해 알아 보겠습니다. 근데 왜 여러개 추가는 없고 삭제만 있느냐? 

잘 생각 해보십시요.^^  그럼 왜 그런지 아실겁니다.

자 그러면 대략적인 시나리오는 이렇겠죠?

1. 리스트뷰에서 여러개를 선택한다.

1.1 여러개를 선택해야 하니 리스트뷰의 레이아웃은 android.R.layout.simple_list_item_multiple_choice

1.2 여러개가 선택되어야 하니 리스트뷰의 모드는 setChoiceMode(ListView.CHOICE_MODE_MULTIPLE)

2. 삭제 버튼을 누른다.

3. 선택된 녀석들을 가지고 와서 데이터에서 삭제한다.

4. 리스트뷰를 갱신한다.

자 그럼 간단한 코드를 보도록 하겠습니다.(그리 간단하지는 않을거 같습니다.)

main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <LinearLayout

        android:id="@+id/linearLayout1"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

        <EditText

            android:id="@+id/editText"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1" >

            <requestFocus />

        </EditText>

        <Button

            android:id="@+id/input"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="추가" />

        <Button

            android:id="@+id/del"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="삭제" />

    </LinearLayout>

    <ListView

        android:id="@+id/listView"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

    </ListView>

</LinearLayout>

ListViewTestActivity02.java

package com.tistory.jwandroid.listview.test;

import java.util.ArrayList;

import android.app.Activity;

import android.os.Bundle;

import android.util.SparseBooleanArray;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ArrayAdapter;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ListView;

public class ListViewTestActivity02 extends Activity implements OnClickListener {

ListView list;

Button addBtn, delBtn;

EditText editText;

ArrayList<String> dataArr;

ArrayAdapter<String> mAdapter;

@Override

public void onCreate(Bundle savedInstanceState) {

     super.onCreate(savedInstanceState);

     setContentView(R.layout.main);

     list = (ListView) findViewById(R.id.listView);

     editText = (EditText) findViewById(R.id.editText);

     addBtn = (Button) findViewById(R.id.input);

     delBtn = (Button) findViewById(R.id.del);

     addBtn.setOnClickListener( this );

     delBtn.setOnClickListener( this );

     dataArr = new ArrayList<String>();

     mAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_multiple_choice, dataArr);

     list.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

     list.setAdapter(mAdapter);

}

@Override

public void onClick(View v) {

     if(v == addBtn){

          String str = editText.getText().toString();

          if(str.length() != 0){

               editText.setText("");

               dataArr.add(str);

               mAdapter.notifyDataSetChanged();

          }

     }else if(v == delBtn){

          SparseBooleanArray checkArr = list.getCheckedItemPositions();

               if (checkArr.size() != 0) {

                            for (int i = list.getCount() -1; i > -1 ; i--) {

                         if (checkArr.get(i)) {

                              dataArr.remove(i);

                         }

                    }

               }

               list.clearChoices();

mAdapter.notifyDataSetChanged();

}

}

}

위의 코드를 가만히 보시면 첫번째로 살펴보았던 예제랑 거의 동일하며, 붉게 표시된 부분만 다르게 작성되었습니다.

mAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_multiple_choice, dataArr);

list.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

가장 먼저 하셔야 되겠죠. 우리가 원하는 것처럼 여러개를 선택해야 하니 뷰의 레이아웃과 모드를 모두 변경 시켜 주어야지만 반영이 됩니다. 반드시 같이 움직인다는거 잊지 마시구요.

SparseBooleanArray checkArr = list.getCheckedItemPositions();

if (checkArr.size() != 0) {

     for (int i = list.getCount() -1; i > -1 ; i--) {

          if (checkArr.get(i)) {

               dataArr.remove(i);

          }

             }

}

아주 중요 합니다. 살펴볼 곳이 두군데 인데요. 붉게 표시해 두었습니다.

1. 첫번째 다중선택시 리스트로부터 받아오는 값은 선택된 SparseBooleanArray 형태의 객체이다.

boolean형태의 배열이 아닌 객체 형태 입니다. ArrayList와 비슷한 녀석이구요. 리스트뷰의 모든 값을 저장하고 있으며 선택되었으면 해당위치가 true, 선택되지 않았다면 해당위치는 false로 저장되어 있습니다. 그러니 루프문을 돌면서 checkArr.get(i) 가 참이면 선택되었다. 라는 뜻이므로 해당 위치는 삭제를 하면 됩니다.

2. 여러개의 데이터를 삭제할때는 처음부터가 아닌 반드시 꼭 마지막 부터 삭제하라.

첫번째 데이터인 0번부터 삭제를 하면 문제가 발생할때가 있습니다.

자바

jsp

android

ejb

0번(자바), 2번(android) 순으로 삭제 하기를 원합니다. 

0번 삭제

2번삭제

자바

jsp

android

ejb

-->

jsp

android

ejb

-->

jsp

android

위에서 보시는것 처럼 원하는 결과와 다른 결과가 나오게 됩니다. 그렇기 때문에 항상 뒤에서 부터 삭제하는거 잊지마세요.

2번(android), 0번(자바) 순으로 삭제 하기를 원합니다. 

2번 삭제

0번삭제

자바

jsp

android

ejb

-->

자바

jsp

ejb

-->

jsp

ejb

이상으로 리스트뷰(ListView)의 추가 삭제에 관련된 기능들을 살펴 보았습니다.

리스트뷰 기초

리스트뷰 추가 삭제 기능 추가하기    ☜    현재 보는곳

리스트뷰 커스텀 어댑터뷰