안드로이드 커스텀 리스트뷰. 그리드뷰도 거의 비슷

1. 안드로이드 Custom ListView.

이전 글 안드로이드 리스트뷰 기본 사용법 에서 TextView 위젯으로 구성된 가장 기본적인 형태의 ListView에 대해 설명하였습니다. ListView를 사용하는 방법을 이해하는데 도움은 되지만 실제로 앱에 사용하기엔 많이 부족하죠.

일반적으로 안드로이드 앱에 사용하는 ListView는 단순히 문자열만 표시하기보단 이미지나 버튼 또는 크기가 다른 문자열 등으로 구성하는 경우가 더 많습니다.
단순 문자열만이 아닌 여러 종류의 위젯을 하나의 아이템으로 구성한 ListView를 Custom ListView라고 하며, 안드로이드 앱을 만들 때 가장 많이 사용하는 컴포넌트 중 하나입니다.

지금부터 Custom ListView를 만드는 방법에 대해 설명하겠습니다.

2 Custom ListView 만들기.

앞선 글에서 간단히 언급했듯이 다양한 위젯들로 구성된 ListView를 만들기 위해서는 기본 사용법에서 몇 가지 추가 작업을 해 줘야 합니다.

하나의 이미지(ImageView)와 두 개의 문자열(TextView)로 구성된 ListView를 만드는 간단한 예제를 통해 Custom ListView를 만드는 방법에 대해 알아보겠습니다.

커스텀 리스트뷰 아이템 구성도

2.1 워크 플로우

커스텀 리스트뷰 만들기 절차

2.2 ListView가 표시될 위치 결정. (Layout 리소스 XML에 ListView 추가.)

안드로이드 리스트뷰 기본 사용법에서와 마찬가지로 MainActivity에 ListView를 생성합니다. “activity_main.xml” 파일(또는 “content_main.xml”)에 아래의 내용을 작성합니다.

[STEP-1] "activity_main.xml" - MainActivity에 ListView 추가.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.madwin.customlistviewexample.MainActivity"
    tools:showIn="@layout/activity_main">

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

</RelativeLayout>

2.3 ListView 아이템에 대한 Layout 구성.

자 이제 Custom ListView를 만들기 위한 첫 번째 추가 작업을 해야 하는 순간이 왔습니다. 바로 ListView 아이템에 대한 화면 구성 작업입니다.

안드로이드 리스트뷰 기본 사용법에서는 ListView 아이템 Layout에 대한 구성을 고민하지 않았습니다. 왜냐하면 아이템이 하나의 TextView로 만들어졌기 때문이죠. 그렇다고 Layout에 대한 코드 작업을 전혀 안한 건 아닙니다.

Adapter를 생성하는 과정에서 “android.R.layout.simple_list_item_1”를 전달함으로써 아이템에 대한 Layout을 지정했던 것이죠.

ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, LIST_MENU) ;

어댑터와 simple_list_item_1

“android.R.layout.simple_list_item_1″은 안드로이드 시스템 내부에 미리 만들어진 리소스 참조 중 하나입니다. SDK를 설치하면 자동으로 설치되며 어떠한 추가 작업 없이 개발자가 바로 사용할 수 있죠.
“simple_list_item_1” 말고도 미리 만들어진 리소스는 여러 가지가 있습니다.
관련 내용은 http://developer.android.com/reference/android/R.layout.html에서 확인할 수 있습니다.

ListView 아이템에 Layout은 “/res/layout/listview_item.xml”이라는 이름으로 작성하겠습니다. (참고로 Layout 리소스 파일의 이름은 원하는대로 지정해서 사용할 수 있습니다. 단, Java 코드에서 Layout을 참조할 때 “R.layout.listview_item”과 같은 형식으로 작성한 이름을 정확히 지정하기만 하면 됩니다.)

[STEP-2] "/res/layout/listview_item.xml" - ListView 아이템 Layout 작성.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/imageView1"
        android:layout_weight="1" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="4">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/textView1"
            android:textSize="24dp"
            android:textColor="#000000"
            android:gravity="center_vertical"
            android:layout_weight="2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/textView2"
            android:textSize="16dp"
            android:textColor="#666666"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

2.4 ListView 아이템 데이터에 대한 클래스 정의.

ListView 아이템을 위한 Layout 리소스를 정의했다면 아이템에 출력될 데이터를 위한 클래스를 정의해야 하는데, 아이템에 표시될 위젯에 맞게 원하는대로 클래스 멤버를 결정하면 됩니다.

ListViewItem 이라는 이름으로 새로운 클래스를 생성합니다. (ListViewItem.java)
예제에서는 하나의 ImageView와 TextView 두 개를 사용하므로 Drawable과 String으로 멤버 변수를 정의합니다.

[STEP-3] "ListViewItem.java" - ListView 아이템 데이터 클래스 정의.
import android.graphics.drawable.Drawable;

public class ListViewItem {
    private Drawable iconDrawable ;
    private String titleStr ;
    private String descStr ;

    public void setIcon(Drawable icon) {
        iconDrawable = icon ;
    }
    public void setTitle(String title) {
        titleStr = title ;
    }
    public void setDesc(String desc) {
        descStr = desc ;
    }

    public Drawable getIcon() {
        return this.iconDrawable ;
    }
    public String getTitle() {
        return this.titleStr ;
    }
    public String getDesc() {
        return this.descStr ;
    }
}

출처: http://recipes4dev.tistory.com/43?category=605791 [개발자를 위한 레시피]

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중