안드로이드 - 커스텀 리스트뷰(Custom ListView) 만들기

안드로이드 앱의 커스텀 리스트뷰(Custom ListView)를 만드는 방법을 알아보겠습니다.

 

1. Start a new Android Studio Project를 클릭하여 안드로이드 프로젝트를 생성합니다.

 

2. Application Name과 Company Domain을 입력 후 Next 버튼을 클릭합니다.

  (Application Name과 Company Domain은 Package 명이 됩니다.)

 

3. Phone and Tablet을 체크하고, Next 버튼을 클릭합니다.

 

4. Blank Activity를 선택 후 Next 버튼을 클릭합니다.

 

5. Activity Name과 Layout Name 등을 입력 후 Finish 버튼을 클릭합니다.

 

6. 아래와 같이 Activity Layout에 ListView를 추가합니다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ListView android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

 

 

7. ListView의 Item Layout을 추가합니다.

(1) 안드로이드 프로젝트의 res/layout에서 마우스 오른쪽을 클릭하여 오픈된 팝업메뉴에서 New > XML > Layout XML Flie 메뉴를 클릭합니다.

 

(2) Layout File Name과 Root Tag를 입력 후 Finish 버튼을 클릭합니다.

 

(3) 아래와 같이 Item Layout에 ImageView와 TextView를 추가합니다.

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

    <ImageView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical"
        android:src="@drawable/south_korea"
        android:id="@+id/imageView" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_gravity="center_vertical"
        android:text="Korea"
        android:id="@+id/textView" />
</LinearLayout>

 

 

8. Activity에 ListView의 커스텀 Adapter Inner Class를 추가하고, ListView에 커스텀 Adapter를 지정한다.

package com.jmsys.customlistview;

import android.content.Context;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;


public class MainActivity extends ActionBarActivity {

    ListView listview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listview = (ListView)this.findViewById(R.id.listview);

        // ListView Data 생성
        ArrayList<String> list = new ArrayList<String>();
        list.add("Korea");
        list.add("USA");
        list.add("Germany");

        // Custom Adapter Instance 생성 및 ListView에 Adapter 지정
        CustomAdapter adapter = new CustomAdapter(this, list);
        listview.setAdapter(adapter);

        // ListView의 아이템 클릭 이벤트
        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                CustomAdapter adapter = (CustomAdapter)listview.getAdapter();
                Toast.makeText(MainActivity.this, adapter.getItem(position).toString(), Toast.LENGTH_LONG).show();
            }
        });
    }

    // 커스텀 Adapter Inner Class
    public class CustomAdapter extends BaseAdapter{
        Context context;
        ArrayList<String> items;
        LayoutInflater inflater;

        public CustomAdapter(Context context, ArrayList<String> items){
            this.context = context;
            this.items = items;
            inflater = LayoutInflater.from(context);
        }

        @Override
        public int getCount() {
            return items.size();
        }

        @Override
        public Object getItem(int position) {
            return items.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View v = convertView;
            if(v == null){
                v = inflater.inflate(R.layout.list_item, null);
            }

            ImageView imageView = (ImageView)v.findViewById(R.id.imageView);
            TextView textView = (TextView)v.findViewById(R.id.textView);

            String nation = items.get(position);
            textView.setText(nation);

            // 국가 문자에 따른 Image 지정
            if("Korea".equals(nation)){
                imageView.setImageResource(R.drawable.south_korea);
            }else if("USA".equals(nation)){
                imageView.setImageResource(R.drawable.usa);
            }else if("Germany".equals(nation)){
                imageView.setImageResource(R.drawable.germany);
            }
            return v;
        }
    }
}

 

아래 동영상을 참고하세요.