[Solution] 안드로이드 커스텀 리스트뷰 구현하기

사용자 환경 : macOS Sierra 10.12.6, Android Studio 3.0.1 {

  Build #AI-171.4443003, built on November 10, 2017

  JRE: 1.8.0_152-release-915-b08 x86_64

  JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o

  }

이번에는 커스텀 리스트뷰에 대해 알아보고자 한다.

먼저 이 앱의 최종 화면은 다음과 같다.

각 아이템을 클릭 시 맨 우측에 좋아요 숫자가 올라가는 기능도 구현할 예정이다.

1. 프로젝트를 생성한다.

2. 해당 파일을 받고 앞축을 푼 후 android 폴더에 있는 다음 폴더들을 전부 복사한다.

ic_thumb_up_black_18dp.zip

2-1. 다시 안드로이드 스튜디오로 돌아와 프로젝트 뷰로 변경 후 다음 경로를 찾아 복사한다.

2-2. res 폴더를 클릭후 복사(Ctrl + v)한다.

이로써 개발에 앞서 모든 준비가 완료되었다. 본격적으로 코딩을 시작해보자.

3. 리스트뷰에 사용될 아이템을 지닌 클래스를 생성한다. ListviewItem.java

public class ListviewItem {

    private String strName;
    private int nId, nLike;

    public String getStdName() {
        return stdName;
    }

    public void setStrName(String strName) {
        this.strName = strName;
    }

    public int getId() {
        return nId;
    }

    public void setId(int nId) {
        this.nId = nId;
    }

    public int getLike() {
        return nLike;
    }

    public void setLike(int nLike) {
        this.nLike = nLike;
    }
}

line 3. strName은 최종 실행화면의 C, Java 등을 나타내는 제목이다.

line 4. nId, nLike는 역시 최종 실행화면의 맨 좌측과 우측의 숫자를 나타낸다.

4. 리스트뷰 레이아웃 설정한다. layout_listview.xml

<?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="wrap_content"
    android:orientation="horizontal"
    android:weightSum="1">

    <TextView
        android:id="@+id/txt_id"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.1"
        android:gravity="center"/>

    <TextView
        android:id="@+id/txt_name"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.7"
        android:textStyle="bold"
        android:gravity="center"/>

    <ImageView
        android:id="@+id/img_up"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.1"
        android:gravity="center"
        android:src="@drawable/ic_thumb_up_black_18dp"/>

    <TextView
        android:id="@+id/txt_like"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.1"
        android:gravity="center"/>
</LinearLayout>

5. 리스트뷰를 사용할 어댑터 클래스를 생성한다. ListviewAdapter.java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import java.util.ArrayList;

public class ListviewAdapter extends BaseAdapter {

    private ArrayList<listviewitem> arrayList;
    private int nId;

    public ListviewAdapter() {
        arrayList = new ArrayList<listviewitem>();
        nId = 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        final Context context = viewGroup.getContext();

        ListviewItem listItem = arrayList.get(i);

        if (view == null) {
            LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.layout_listview, viewGroup, false);
        }

        TextView id = (TextView)view.findViewById(R.id.txt_id);
        TextView name = (TextView)view.findViewById(R.id.txt_name);
        TextView like = (TextView)view.findViewById(R.id.txt_like);

        id.setText(String.valueOf(listItem.getId()));
        name.setText(listItem.getStdName());
        like.setText(String.valueOf(listItem.getLike()));

        return view;
    }

    public void addItem(String name) {
        ListviewItem item = new ListviewItem();

        item.setId(++nId);
        item.setStdName(name);
        item.setLike(0);

        arrayList.add(item);
    }

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

    @Override
    public Object getItem(int i) {
        return arrayList.get(i);
    }

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

6. activity_main.xml을 레이아웃 설정한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.ahn.customlistview.MainActivity">

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

</LinearLayout>

7. 마지막으로 메인 액티비티에서 기능을 구현해보자.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    private String[] lang = {
            "C",
            "Java",
            "PHP",
            "Swift"
    };

    private ListView listView;
    private ListviewAdapter adapter;

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

        adapter = new ListviewAdapter();

        listView = (ListView)findViewById(R.id.listview);
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View v, final int position, long id) {
                // get item
                ListviewItem item = (ListviewItem)parent.getItemAtPosition(position);

                int getLike = item.getLike();
                item.setLike(++getLike);
                adapter.notifyDataSetChanged();
            }
        });

        initList();
    }

    public void initList() {
        for(int i=0; i<lang.length; i++) {
            adapter.addItem(lang[i]);
            adapter.notifyDataSetChanged();
        }
    }
}

line 9~14. 리스트뷰에 사용될 아이템 제목들이다.

line 27. 전에 생성했던 어댑터를 리스트뷰에 세팅한다.

line 32. 리스트를 클릭 시 해당 아이템의 번호를 인덱스로 하여 참조를 얻는다.

line 34~36. 좋아요를 +1 시키는 작업을 하고나서 데이터가 변경되었음을 알린다.

line 43. C, Java 등을 리스트에 추가한다.

이로써 커스텀 리스트뷰를 사용할 수 있게 되었다.