[안드로이드/Android] 안드로이드 리스트뷰 커스텀 어댑터뷰

안드로이드 리스트뷰 커스텀 어댑터뷰

리스트뷰 기초

리스트뷰 추가 삭제 기능 추가하기

리스트뷰 커스텀 어댑터뷰    ☜    현재 보는곳

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

감사합니다.^^ ☞ ☜

이번 시간에는 리스트뷰를 내가 원하는 모양으로 꾸미는 방법에 대해서 한번 살펴보도록 하겠습니다.

살펴볼 모양은 전화번호부와 비슷한 모양으로 만들어 볼것입니다.  전송버튼을 누르면 실제로 전화가 걸려야 하지만 지금은 간단히 이름 + 전화번호에 해당하는 문자열을 Toast로 띄워보도록 하겠습니다.

이미지	저장된 이름 (글자 큼)	전송버튼
	전화번호(글자 작음)

대충 위와 같이 되어 있더라구요. 한번 작업해 보도록 하겠습니다. 먼저 확인해야 할 부분부터 살펴 보도록 하죠.

1. 리스트뷰의 레이아웃이 바뀌었다.

2. 저장되는 데이터가 한가지가 아닌 여러가지의 클래스를 저장해야 한다.

위와 같이 두가지인거 같은데요. 작업해야 할것들을 정리한번 해보도록 합시다.

먼저 1번 레이아웃이 바뀌었기 때문에 그에 맞는 수정이 필요합니다. 위와 같은 모양은 당연히 기본 시스템에서 제공해줄리가 없으니 당근 만드셔야죠. - 작업 1

그담 2번 저장되는 데이터가 여러가지다. 기존은 문자열로써 한가지만 저장되었는데 이번에는 이미지(Bitmap)와 문자열(String), 버튼(Button) 세가지가 저장되어야 합니다. 그러니 서로다른 두가지를 저장할 수 있게 새로운 클래스를 만들어야 겠네요. - 작업 2

그리고 전체적으로 뷰와 데이터의 중간 매개체 역활을 해주는 녀석인 어댑터 관련인데요. 이 어댑터라는 놈이 중간에서 데이터를 가지고 와서 뷰한테 이래 그려달라 저래그려달라 쫑알쫑알 대는 녀석이라서 기본적으로 그리기를 제공해주는 어댑터들은 사용할 수가 없구요. 가장 기본적으로 제공되는 어댑터(BaseAdapter)을 상속받아 내맘대로 그릴수 있도록 새롭게 만들어야 합니다. - 작업 3 ★☆★☆

작업 1번 - 레이아웃 만들기

/res/layout/list_item.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" >

        <LinearLayout

            android:id="@+id/linearLayout2"

            android:layout_width="80dip"

            android:layout_height="80dip" android:gravity="center">

            <ImageView

                android:id="@+id/left_image"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:src="@drawable/ic_launcher" />

        </LinearLayout>

        <LinearLayout

            android:id="@+id/linearLayout3"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:orientation="vertical" android:layout_weight="1" android:gravity="center">

            <TextView

                android:id="@+id/name_tv"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:text="초보플밍지기" android:textSize="25sp" android:textColor="#ffffffff"/>

            <TextView

                android:id="@+id/phone_tv"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:text="010-1234-1234" android:textSize="20sp"/>

        </LinearLayout>

        <LinearLayout

            android:id="@+id/linearLayout4"

            android:layout_width="80dip"

            android:layout_height="80dip" android:gravity="center">

            <Button

                android:id="@+id/sendBtn"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content" android:text="전송"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

한줄에 해당하는 레이아웃을 만드시면 됩니다. 본인이 원하는 모양으로 이클립스 툴을 이용하셔서 작업하시면 됩니다.

크게 문제 될것은 없습니다. 그죠?

작업 2 - 새로운 데이터 클래스 만들기

class MyData{

Bitmap myImg;

String name;

String phone;

MyData(Bitmap _myImg, String _name, String _phone){

    myImg = _myImg;

    name = _name;

    phone = _phone;

}

}

1개 이상의 클래스들의 집합을 만들기 위해 새로운 클래스를 만듭니다. 우리는 전화번호, 이름, 사진, 버튼등 여러개의 클래스가 필요하니 이 녀석들을 하나로 묶기 위해 새로운 클래스를 만듭니다. 여기도 별로 어려운 것은 없죠? 다음으로 가겠습니다.

작업 3 - 새로운 어댑터 클래스 만들기

class MyAdapter extends BaseAdapter{

Context context;

int layoutId;

ArrayList<MyData> myDataArr;

                LayoutInflater Inflater;

MyAdapter(Context _context, int _layoutId, ArrayList<MyData> _myDataArr){

      context = _context;

   layoutId = _layoutId;

   myDataArr = _myDataArr;

                   Inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@Override

public int getCount() {

     return myDataArr.size();

}

@Override

public String getItem(int position) {

     return myDataArr.get(position).name;

}

@Override

public long getItemId(int position) {

     return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

            final int pos = position;

           // 1번 구역

if (convertView == null)  {

                convertView = Inflater.inflate(layoutId, parent, false);

            }

            

            ImageView leftImg = (ImageView)convertView.findViewById(R.id.left_image);

            leftImg.setImageBitmap(myDataArr.get(position).myImg);

            TextView nameTv = (TextView)convertView.findViewById(R.id.name_tv);

            nameTv.setText(myDataArr.get(position).name);

            

            TextView phoneTv = (TextView)convertView.findViewById(R.id.phone_tv);

            phoneTv.setText(myDataArr.get(position).phone);

            

           //2번 구역

 Button btn = (Button)convertView.findViewById(R.id.sendBtn);

            btn.setOnClickListener(new Button.OnClickListener()  {

                public void onClick(View v)  {

                    String str = myDataArr.get(pos).name + "님의 전화번호는 [ "

+myDataArr.get(pos).phone+" ] 입니다.";

                    Toast.makeText(context, str,Toast.LENGTH_SHORT).show();

                    }

              });

             return convertView;

}

}

위에 퍼렇고 뻘겋게 염색된 녀석들이 반드시 오버라이딩을 해줘야 하는 필수인 녀석들인데요. 그 중에서도 파란색은 그다지 중요하지 않구 빨간색에만 신경쓰시면됩니다.

getCount() - 리스트뷰가 전체 몇줄인지 알려주는 녀석입니다. 

getView() - 가장 중요하죠 한줄에 대한 화면을 구성하는 놈입니다.

1번 구역은 convertView를 null체크 하고 있습니다. 이 부분이 나름 성능에 영향을 주는 녀석인데요. 

이미 만들어 놓은 뷰에 대해서는 새롭게 만들지 않고 기존에 만든 녀석을 재사용한다.

는 것입니다. 예를들어 100줄이 있는데 처음 10줄이 보여졌습니다. 그뒤에 스크롤해서 아래로 내리면 11줄 부터는 새롭게 만들겠죠?

하지만 다시 위로 올리면 이미 보여줬던 녀석들이니 새롭게 만들지 않고 않드로이드가 알아서 이미 만든 녀석으로 재사용 한다는 뜻입니다.

2번 구역은 리스트뷰 한줄에 대한 이벤트 외에 버튼같이 따로따로 이벤트를 줄수 있다는것을 보여주는 것입니다. 그외 여러가지 상황에 따라 좀 짜증나고 될때도 있고 안될때도 있습니다. 그부분은 아래 링크에 따로 설명해 두었으니 참고 하시기 바랍니다.

☞ 안드로이드 리스트뷰 이미지버튼 이벤트        http://jwandroid.tistory.com/218

☞ 안드로이드 리스트뷰 이벤트 추가 팁         http://jwandroid.tistory.com/107

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" >

    <ListView

        android:id="@+id/listView"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

</LinearLayout>

아래는 작업 2와 작업 3을 포함한 전체 자바 소스 입니다.

ListViewTestActivity03.java

package com.tistory.jwandroid.listview.test;

import java.util.ArrayList;

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.ListView;

import android.widget.TextView;

import android.widget.Toast;

public class ListViewTestActivity03 extends Activity{

ListView list;

ArrayList<MyData> dataArr;

MyAdapter mAdapter;

@Override

public void onCreate(Bundle savedInstanceState) {

     super.onCreate(savedInstanceState);

     setContentView(R.layout.main);

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

     dataArr = new ArrayList<MyData>();

     dataArr.add(new MyData(BitmapFactory.decodeResource(getResources(), 

R.drawable.ic_launcher), "초보플밍지기",  "010-1234-1111") );

     dataArr.add(new MyData(BitmapFactory.decodeResource(getResources(),     

R.drawable.ic_launcher), "초보플밍", "010-1234-2222") );

     dataArr.add(new MyData(BitmapFactory.decodeResource(getResources(), 

R.drawable.ic_launcher), "초보자바", "010-1234-3333") );

     dataArr.add(new MyData(BitmapFactory.decodeResource(getResources(), 

R.drawable.ic_launcher), "초보안드로이드","010-1234-4444") );

     mAdapter = new MyAdapter(this, R.layout.list_item, dataArr);

     list.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

     list.setAdapter(mAdapter);

}

class MyData{

     Bitmap myImg;

     String name;

     String phone;

MyData(Bitmap _myImg, String _name, String _phone){

     myImg = _myImg;

     name = _name;

     phone = _phone;

}

}

class MyAdapter extends BaseAdapter{

     Context context;

     int layoutId;

     ArrayList<MyData> myDataArr;

   LayoutInflater Inflater;

     MyAdapter(Context _context, int _layoutId, ArrayList<MyData> _myDataArr){

     context = _context;

     layoutId = _layoutId;

     myDataArr = _myDataArr;

   Inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@Override

public int getCount() {

    return myDataArr.size();

}

@Override

public String getItem(int position) {

    return myDataArr.get(position).name;

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

            final int pos = position;

            if (convertView == null)  {

                    convertView = Inflater.inflate(layoutId, parent, false);

            }

            

            ImageView leftImg = (ImageView)convertView.findViewById(R.id.left_image);

            leftImg.setImageBitmap(myDataArr.get(position).myImg);

            TextView nameTv = (TextView)convertView.findViewById(R.id.name_tv);

            nameTv.setText(myDataArr.get(position).name);

            

            TextView phoneTv = (TextView)convertView.findViewById(R.id.phone_tv);

            phoneTv.setText(myDataArr.get(position).phone);

            

            Button btn = (Button)convertView.findViewById(R.id.sendBtn);

            btn.setOnClickListener(new Button.OnClickListener()  {

                    public void onClick(View v)  {

                            String str = myDataArr.get(pos).name + "님의 전화번호는 [ "+

myDataArr.get(pos).phone+" ] 입니다.";

                            Toast.makeText(context, str,Toast.LENGTH_SHORT).show();

                    }

             });

             return convertView;

}

}  

}

한번 살펴보시고 궁금하신점은 댓글로 남겨주시면 좋겠습니다.

이렇게 리스트뷰에 대한 것은 마무리 하도록 하겠습니다.

나중에 리스트뷰에 대한 좀더 깊이 있고 난이도 있는 녀석으로 올리도록 하겠습니다.

리스트뷰 기초

리스트뷰 추가 삭제 기능 추가하기

리스트뷰 커스텀 어댑터뷰    ☜    현재 보는곳