커스텀 리스트뷰 만들기 - Chapter01

커스텀 리스트 뷰 만들기 - Chapter 01

  리스트 뷰를 사용하기 위해 기본 프로젝트를 생성한다. 이후 MainActivity 레이아웃 즉, activity_main.xml에 아래와 같이 리스트 뷰를 추가한다. 이 장에서 앞으로 진행할 항목은 다음과 같다. 

Chapter 01

1. 리스트 뷰를 activity_main.xml에 추가한다.

2. 리스트 뷰에 들어갈 각 아이템에 대한 레이아웃을 만든다. 

3. 각 아이템에 대한 데이터를 정의한다. 

Chapter 02 - 클릭하면 이동합니다. 

1. Adapter을 구현한다.

2. MainActivity에 Adapter을 붙인다. 

3. 리스트뷰에 클릭 이벤트를 만들어 본다. 

1. 리스트 뷰를 activity_main.xml에 추가한다. 

[ activity_main.xml ]

<!--?xml version="1.0" encoding="utf-8"?-->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.nexthops.myapplication.MainActivity">
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>
</RelativeLayout>

2. 리스트뷰에 들어갈 각 아이템에 대한 레이아웃을 만든다.

  리스트뷰에 들어갈 각 아이템에 대한 레이아웃을 만듭니다. layout 폴더에서 list_item_layout.xml을 추가합니다.

[ list_item_layout.xml ]

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/appIcon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="5dp"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"/>
    <TextView
        android:id="@+id/appName"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="3dp"
        android:layout_toRightOf="@+id/appIcon"/>
    <TextView
        android:id="@+id/packageName"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/appIcon"
        android:layout_below="@id/appName"/>
</RelativeLayout>

3. 각 아이템에 대한 데이터를 정의합니다. 이 말인 즉, 각 아이템에 대해서 get, set할 수 있도록 정의합니다. 

ListViewItem.java 파일을 하나 생성합니다. 

[ListViewItem.java]

import android.graphics.drawable.Drawable;
public class ListViewItem {
    private Drawable appIconDrawable;
    private String appName;
    private String packageName;

    public Drawable getAppIconDrawable() {
        return appIconDrawable;
    }

    public void setAppIconDrawable(Drawable appIconDrawable) {
        this.appIconDrawable = appIconDrawable;
    }

    public String getAppName() {
        return appName;
    }

    public void setAppName(String appName) {
        this.appName = appName;
    }

    public String getPackageName() {
        return packageName;
    }

    public void setPackageName(String packageName) {
        this.packageName = packageName;
    }

  여기까지 화면을 구성하는 부분은 다 만들어 졌습니다. 다음 챕터에서 adapter과 연결 시켜 실제 리스트 뷰에 생성한 아이템이 나오고, 클릭할 수 있도록 만들어 보겠습니다.