<Android> 안드로이드 리스트 뷰를 내 맘대로 사용하자(커스텀 리스트뷰)

<새롭게 내용 수정했습니다~!!!>

오늘 올릴 글 내용은 리스트 뷰를 사용시 개발자가 원하는 대로 사용하는 방법입니다.

일반적으로 리스트 뷰라고 생각하면

 

이렇게 사용을 많이 하시죠?
그런데 리스트 사용을 이미지도 넣고 싶고  타이틀과 작은 타이틀을 같이 넣고 싶을때는 어떻게 해야할까요?

방법은 간단합니다. 우선 리스트의 각 아이템에 보여주고 싶은 모양을 설정하세요.

저는 예제로 다음과 같이 설정하겠습니다.
 

이미지가 하나 들어가고 그 옆에 Main Title과 Sub Title이 들어가도록 설정을 해보려 합니다.

이렇게 하기 위해서 저는 첫번째로 위의 그림과 같이 각 아이템의 틀을 만들기 위한 xml 을 구성하겠습니다.

위의 그림과 같이 구성하였는데요 화면의 크기는 신경 안쓰셔도 되요. 어짜피 이 부분은 리스트에 보여지게 될 하나의 Item에 대한 부분이기 때문이죠. 소스 구성은 아래와 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/image_layout"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/custom_list_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher" >
        </ImageView>
    </LinearLayout>

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

        <TextView
            android:id="@+id/custom_list_title_main"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Main Title"
            android:textColor="@android:color/white" >
        </TextView>

        <TextView
            android:id="@+id/custom_list_title_sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sub Title"
            android:textColor="@android:color/white" >
        </TextView>
    </LinearLayout>
</LinearLayout>

이제 아이템에 대한 틀을 만들고 나면 리스트에 연결 시켜줄 어댑터와 각 아이템에 들어갈 정보를 저장할 클래스를 만들어줘야겠죠? 소스 코드를 바로 입력하겠습니다.
- Custom Adapter & Custom List Data Class (Custom_List_Adapter.java)

public class Custom_List_Adapter extends ArrayAdapter<custom_list_data>
{
    private Context m_Context   = null;
 
    public Custom_List_Adapter(Context context, int textViewResourceId, ArrayList<custom_list_data> items)
    {
        super(context, textViewResourceId, items);
        this.m_Context = context;
    }
 
    @Override
    public View getView(int nPosition, View convertView, ViewGroup parent)
    {
        // 뷰를 재사용 하기 위해 필요한 클래스
        PointerView pView = null;
 
        View view = convertView;
 
        if(view == null)
        {
            view = LayoutInflater.from(m_Context).inflate(R.layout.custom_list, null);
            pView = new PointerView(view);
            view.setTag(pView);
        }
 
        pView = (PointerView)view.getTag();
 
        // 데이터 클래스에서 해당 리스트목록의 데이터를 가져온다.
        Custom_List_Data custom_list_data = getItem(nPosition);
 
        if(custom_list_data != null)
        {
            // 현재 item의 position에 맞는 이미지와 글을 넣어준다.
            pView.GetIconView().setBackgroundResource(custom_list_data.getImage_ID());
            pView.GetTitleView().setText(custom_list_data.getMain_Title());
            pView.GetSubTitleView().setText(custom_list_data.getSub_Title());
        }
 
        return view;
    }
 
    /**
     * 뷰를 재사용 하기위해 필요한 클래스
     * 클래스 자체를 view tag로 저장/불러오므로 재사용가능
     */
    private class PointerView
    {
        private View        m_BaseView      = null;
        private ImageView   m_ivIcon        = null;
        private TextView    m_tvTitle       = null;
        private TextView    m_tvSubTitle    = null;
 
        public PointerView(View BaseView)
        {
            this.m_BaseView = BaseView;
        }
 
        public ImageView GetIconView()
        {
            if(m_ivIcon == null)
            {
                m_ivIcon = (ImageView)m_BaseView.findViewById(R.id.custom_list_image);
            }
 
            return m_ivIcon;
        }
 
        public TextView GetTitleView()
        {
            if(m_tvTitle == null)
            {
                m_tvTitle = (TextView)m_BaseView.findViewById(R.id.custom_list_title_main);
            }
 
            return m_tvTitle;
        }
 
        public TextView GetSubTitleView()
        {
            if(m_tvSubTitle == null)
            {
                m_tvSubTitle = (TextView)m_BaseView.findViewById(R.id.custom_list_title_sub);
            }
 
            return m_tvSubTitle;
        }
 
    }
}
 
/**
 * 리스트의 데이터 클래스
 */
class Custom_List_Data
{
    private int     Image_ID;
    private String  Main_Title;
    private String  Sub_Title;
 
    public Custom_List_Data(int _Image_ID, String _Main_Title, String _Sub_Title)
    {
        this.setImage_ID(_Image_ID);
        this.setMain_Title(_Main_Title);
        this.setSub_Title(_Sub_Title);
    }
 
    public int getImage_ID()
    {
        return Image_ID;
    }
 
    public void setImage_ID(int image_ID)
    {
        Image_ID = image_ID;
    }
 
    public String getMain_Title()
    {
        return Main_Title;
    }
 
    public void setMain_Title(String main_Title)
    {
        Main_Title = main_Title;
    }
 
    public String getSub_Title()
    {
        return Sub_Title;
    }
 
    public void setSub_Title(String sub_Title)
    {
        Sub_Title = sub_Title;
    }
 
}

이렇게 까지 구성하셨으면 이제 거의 다 했네요^^
이제 실질적으로 리스트를 뿌려줘보도록 하겠습니다.

- Custom_listActivity.java

package com.android.custom.list;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class Custom_listActivity extends Activity {
	/** Called when the activity is first created. */
	private ArrayList<custom_list_data> Array_Data;
	private Custom_List_Data data;
	private Custom_List_Adapter adapter;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		Array_Data = new ArrayList<custom_list_data>();
		data = new Custom_List_Data(R.drawable.ic_launcher, "1번째 글입니다",
				"첫번째글 부제목입니다^^");
		Array_Data.add(data);
		data = new Custom_List_Data(R.drawable.accept_item, "2번째 글입니다",
				"두번째글 부제목입니다^^");
		Array_Data.add(data);

		ListView custom_list = (ListView) findViewById(R.id.Cusom_List);
		adapter = new Custom_List_Adapter(this,
				android.R.layout.simple_list_item_1, Array_Data);
		custom_list.setAdapter(adapter);
	}
}

- main.xml

<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/Cusom_List"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </Listview>
</LinearLayout>

위의 그림처럼 각 아이템이 설정 되어서 나왔습니다.

각 아이템에 대한 클릭 이벤트는 OnItemClickListener를 이용하여서 일반 리스트뷰와 같은 방법으로 사용하시면 된답니다.

간단하게 보여드리려구 소스가 좀 짧긴한데요.

간략하게 보여드리기 위해서 최대한 소스를 줄였습니다.

오늘도 허접한 저의 실력을 글로 올리네요ㅠ 혹시나 잘못된 부분이 있다면 꼭꼭 알려주세요~

오늘 하루도 좋은 하루 되세요^^