Xamarin Custom Listview 사용하기

이번엔 안드로이드에서 가장 많이 쓰이는 형식인 Custom Listview에 대해서 알아보려 합니다

안드로이드의 Custom Listview 예제는 정말 많습니다만..

Xamarin으로 된 예제는 정말 없더군요. 외국 사이트로 가야...

사실 Xamarin에서 구현하는 방법도 똑같지만, 소스코드가 전부 Java로 되어있어서.. Xamarin의 소스코드와는 아주 약간 다를 뿐입니다.

뭐 조금이라도 아는 분들이야 알아서 잘 적용시키겠지만.. 맨땅에 헤딩하는 저로서는 처음엔 그 하나 바뀌는게 굉장히 어려웠습니다 ㅠㅠ

Custom ListView 구현 순서를 간단히 보면

1. Custom ListView View 작성

2. Custom ListView Code 작성

3. Custom ListView Holder 정의

4. Main Activity의 ListView의 Adapter에 미리 정의한 Custom ListView 구현

뭐.. 이렇게 하면 될까요

천천히 하나씩 해보겠습니다.

우선 구현하고 싶은 모양의 ListView Item(한개의 로우)를 정의합니다. 여기서 정의되는 Item의 모양이 ListView에서 반복되게 됩니다.

저는 업무상 GridView형식의 ListView만 정의하지만 보통 안드로이드에서 많이 쓰는 '썸네일 + 타이틀 + 설명'의 모양으로 만들어보겠습니다.

요런 모양이 되겠군요

Custom ListView의 Row에 대한 정보를 담을 RowInfo 클래스를 만듭니다.

RowInfo.cs

using Android.Graphics.Drawables; namespace CustomListView { class RowInfo { private Drawable pIcon; private string pTitle; private string pSubTitle; public Drawable Icon { get { return pIcon; } set { pIcon = value; } } public string Title { get { return pTitle; } set { pTitle = value; } } public string SubTitle { get { return pSubTitle; } set { pSubTitle = value; } } } }

여기가 ListView의 한개의 로우가 될 Layout을 정의하는 부분입니다. Main Layout에서 작성된 ListView의 Adapter가 되겠네요.

CustomListView.axml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px"> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout1"> <ImageView android:src="@drawable/icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView1" android:layout_weight="0.1" /> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/linearLayout2" android:layout_weight="1"> <TextView android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView1" /> <TextView android:text="Medium Text" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView2" /> </LinearLayout> </LinearLayout> </LinearLayout>

CustomListView 클래스를 만들고 BaseAdapter를 상속받습니다.

CustomListView.cs

using System.Collections.Generic; using Android.Content; using Android.Views; using Android.Widget; namespace CustomListView { class CustomListView : BaseAdapter { // Info 클래스에 담긴 데이터를 가지고 있을 Collection List<RowInfo> Infos = new List<RowInfo>(); LayoutInflater Inflater; // Collection의 개수(=Row의 개수) 반환 public override int Count { get { return Infos.Count; } } public override Java.Lang.Object GetItem(int position) { // 자료형이 달라 ListView Row의 정보를 담고있는 RowInfo클래스 자체를 넘길 수 없어 Java의 ArrayList로 반환한다. Java.Util.ArrayList infoColumns = new Java.Util.ArrayList(); infoColumns.Add(Infos[position].Icon); infoColumns.Add(Infos[position].Title); infoColumns.Add(Infos[position].SubTitle); return infoColumns; } // 지정한 Row의 위치값(Position)을 반환 public override long GetItemId(int position) { return position; } // 생성자에서 inflater의 정보를 얻어온다 public CustomListView(Context context) { Inflater = (LayoutInflater)context.GetSystemService(Context.LayoutInflaterService); } // Position에 위치한 데이터를 화면에 출력하는데 사용될 View를 지정 // position : 리스트뷰의 RowIndex // convertView : 아이템의 화면(만약 아이템의 수가 많아 화면 바깥에 위치할 경우. 아직 생성되지 않은 상태로 있기 때문에 null값이 넘어온다) // parent : CustomListView가 얹혀질 ListView의 Container. 부모 View public override View GetView(int position, View convertView, ViewGroup parent) { ViewHolder holder = null; // 화면을 넘어가는 아이템의 경우 스크롤하면 convertView가 null값으로 넘어온다 if (convertView == null) { // 미리 만든 ListViewAdater의 정보를 구현해 View로 반환한다. convertView = Inflater.Inflate(Resource.Layout.CustomListView, parent, false); // holder를 새로 생성하여 Tag에 담아놓는다. convertView가 null이 아닐 경우 새로 생성하지 않고 Tag에 담아놓은 holder를 재사용한다. // ViewHolder Class는 아이템 View가 달라질때 마다 새롭게 생성해야 한다/ // 재활용 View가 null일때 View를 inflate한 후 findViewById를 통해 찾은 View들을 ViewHolder에 저장 후 convertView의 Tag에 저장해놓는다. // 그 후 재활용 View를 사용할때는 convertView의 Tag에 있는 ViewHolder를 가져와서 사용하는 구조이다. // 이런 구조를 가짐으로써 중복적인 findViewById()를 호출하지 않아 성능적으로 우수한 구조를 가질 수 있다 holder = new ViewHolder(); holder.IconView = convertView.FindViewById<ImageView>(Resource.Id.imageView1); holder.TitleText = convertView.FindViewById<TextView>(Resource.Id.textView1); holder.SubTitleText = convertView.FindViewById<TextView>(Resource.Id.textView2); convertView.Tag = holder; } else { holder = (ViewHolder)convertView.Tag; } // holder에 값 대입 holder.IconView.SetImageDrawable(Infos[position].Icon); holder.TitleText.Text = Infos[position].Title; holder.SubTitleText.Text = Infos[position].SubTitle; return convertView; } // CustomListView에 아이템을 추가할 함수를 만든다. public void AddItem(RowInfo info) { Infos.Add(info); NotifyDataSetChanged(); } public class ViewHolder : Java.Lang.Object { public ImageView IconView; public TextView TitleText; public TextView SubTitleText; } } }

이제 CustomListView를 실제로 구현할 메인 레이아웃을 작성합니다.

Main.axml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px"> <ListView android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/listView1" /> </LinearLayout>

Main.cs

만들어놓은 Adapter를 ListView에 적용합니다. Row는 딱 100개만 만들어보겠습니다. ImageView에 표기될 아이콘은.. 아무거나 쓰세요 ㅠㅠ

using Android.App; using Android.Widget; using Android.OS; namespace CustomListView { [Activity(Label = "CustomListView", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity { protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); // Set our view from the "main" layout resource SetContentView (Resource.Layout.Main); CustomListView customListView = new CustomListView(this); RowInfo info; for (int i = 0; i < 100; i++) { info = new RowInfo(); info.Icon = GetDrawable(Resource.Drawable.Adobe_Air); info.Title = (2 * i).ToString() + "번째 Row Title입니다"; info.SubTitle = (2 * i).ToString() + "번째 Row SubTitle입니다"; customListView.AddItem(info); info = new RowInfo(); info.Icon = GetDrawable(Resource.Drawable.Adobe_Flash); info.Title = (2 * i + 1).ToString() + "번째 Row Title입니다"; info.SubTitle = (2 * i + 1).ToString() + "번째 Row SubTitle입니다"; customListView.AddItem(info); } ListView listView = FindViewById<ListView>(Resource.Id.listView1); listView.Adapter = customListView; } } }

결과화면입니다. 이렇게 나오게 되는군요.

이렇게 하면 다 됐네요

복잡해보이지만 천천히 따라해보시면 별 어려운건 없습니다.

ListView에서는 아이템이 보여질때마다 getView()가 호출 됩니다.

여기서 해당되는 데이터를 View에 표시하기위해 findViewById()를 통해 해당되는 View를 얻어온 후 데이터를 표시하게 되죠.

convertView는 재활용 되는 View이기때문에 아이템을 표시 할때마다 findViewById()를 호출해서 View를 얻어오는 작업은 매우 비효율적이 됩니다. 그렇기에 Holder를 사용하여 View를 재사용하게 되는것입니다.

※ 일주일에 한 개 정도는.. 포스팅을 하고싶었는데 막상 설명하려니 제가 알고있는부분이 너무 부족한것도 있고.. 생각한것을 여기에 표현하는게 쉽지 않네요

먹고사는데 바쁘다보니 시간도 많이 모자르군요 ㅎ

이렇게 마무리한 포스팅도 크게 만족스럽지는 않지만 조금이나마 도움이 되길 바랍니다.

어차피 안드로이드 Custom ListView에 관한 설명은 다른곳에도 많으니, 여기서 부족한 개념부분에 대한것은 다른 고수님들의 포스팅을 참조하시면 될것같습니다. ㅎ