Xamarin.Android를 사용하여 ListView의 모양 사용자 지정
ListView의 모양은 표시되는 행의 레이아웃에 따라 결정됩니다. 모양을 ListView변경하려면 다른 행 레이아웃을 사용합니다.
기본 제공 행 뷰
Android.Resource.Layout을 사용하여 참조할 수 있는 기본 제공 보기는 12개입니다.
TestListItem – 최소한의 서식을 사용하는 한 줄의 텍스트입니다.
SimpleListItem1 – 한 줄의 텍스트입니다.
SimpleListItem2 – 두 줄의 텍스트입니다.
SimpleSelectableListItem – 단일 또는 여러 항목 선택을 지원하는 텍스트의 한 줄(API 수준 11에 추가됨).
SimpleListItemActivated1 – SimpleListItem1과 유사하지만 배경색은 행이 선택된 시기를 나타냅니다(API 수준 11에 추가됨).
SimpleListItemActivated2 – SimpleListItem2와 유사하지만 배경색은 행이 선택된 시기를 나타냅니다(API 수준 11에 추가됨).
SimpleListItemChecked – 선택 영역을 나타내는 검사 표시를 표시합니다.
SimpleListItemMultipleChoice – 검사 상자를 표시하여 객관식 선택을 나타냅니다.
SimpleListItemSingleChoice – 상호 배타적 선택을 나타내는 라디오 단추를 표시합니다.
TwoLineListItem – 두 줄의 텍스트입니다.
ActivityListItem – 이미지가 있는 텍스트의 한 줄입니다.
SimpleExpandableListItem – 범주별로 행을 그룹화하고 각 그룹을 확장하거나 축소할 수 있습니다.
각 기본 제공 행 보기에는 연결된 기본 제공 스타일이 있습니다. 이러한 스크린샷은 각 보기가 표시되는 방식을 보여 줍니다.
BuiltInViews/HomeScreenAdapter.cs 샘플 파일(BuiltInViews 솔루션)에는 확장할 수 없는 목록 항목 화면을 생성하는 코드가 포함되어 있습니다. 보기는 다음과 같이 메서드에 GetView 설정됩니다.
view = context.LayoutInflater.Inflate(Android.Resource.Layout.SimpleListItem1, null);
그런 다음, 표준 컨트롤 식별자를 Text1Text2 참조하여 뷰의 속성을 설정할 수 있습니다 IconAndroid.Resource.Id ( 보기에 포함되지 않거나 예외가 throw되는 속성을 설정하지 않음).
view.FindViewById<TextView>(Android.Resource.Id.Text1).Text = item.Heading;
view.FindViewById<TextView>(Android.Resource.Id.Text2).Text = item.SubHeading;
view.FindViewById<ImageView>(Android.Resource.Id.Icon).SetImageResource(item.ImageResourceId); // only use with ActivityListItem
BuiltInExpandableViews/ExpandableScreenAdapter.cs 샘플 파일(BuiltInViews 솔루션)에는 SimpleExpandableListItem 화면을 생성하는 코드가 포함되어 있습니다. 그룹 보기는 다음과 같이 메서드에 GetGroupView 설정됩니다.
view = context.LayoutInflater.Inflate(Android.Resource.Layout.SimpleExpandableListItem1, null);
자식 뷰는 다음과 같이 메서드에 GetChildView 설정됩니다.
view = context.LayoutInflater.Inflate(Android.Resource.Layout.SimpleExpandableListItem2, null);
그룹 보기 및 자식 뷰의 속성은 위에 표시된 대로 표준 Text1 및 Text2 컨트롤 식별자를 참조하여 설정할 수 있습니다. 위에 표시된 SimpleExpandableListItem 스크린샷은 한 줄 그룹 보기(SimpleExpandableListItem1) 및 2줄 자식 보기(SimpleExpandableListItem2)의 예를 제공합니다. 또는 그룹 보기를 두 줄(SimpleExpandableListItem2)에 대해 구성할 수 있으며 한 줄(SimpleExpandableListItem1)에 대해 자식 보기를 구성할 수 있거나 그룹 보기와 자식 보기 모두 줄 수가 같을 수 있습니다.
Accessories
행은 선택 상태를 나타내기 위해 보기 오른쪽에 액세서리를 추가할 수 있습니다.
SimpleListItemChecked – 검사 표시기로 사용하여 단일 선택 목록을 만듭니다.
SimpleListItemSingleChoice – 한 가지 선택만 가능한 라디오 단추 유형 목록을 만듭니다.
SimpleListItemMultipleChoice – 여러 항목을 선택할 수 있는 검사 상자 형식 목록을 만듭니다.
afore멘션 액세서리는 다음 화면에 각각 순서대로 설명되어 있습니다.
이러한 액세서리 중 하나를 표시하려면 필요한 레이아웃 리소스 ID를 어댑터에 전달한 다음 필요한 행의 선택 상태를 수동으로 설정합니다. 이 코드 줄에서는 다음 레이아웃 중 하나를 사용하여 만들고 할당하는 Adapter 방법을 보여 줍니다.
ListAdapter = new ArrayAdapter<String>(this, Android.Resource.Layout.SimpleListItemChecked, items);
ListView 표시 중인 액세서리에 관계없이 자체에서 다양한 선택 모드를 지원합니다. 혼동을 방지하려면 액세서리와 함께 SingleChoice 선택 모드를 사용하고 스타일이 있는 CheckedMultipleChoice 모드를 Multiple 사용합니다Single. 선택 모드는 .의 속성에 ChoiceMode 의해 제어됩니다 ListView.
API 수준 처리
이전 버전의 Xamarin.Android에서는 열거형을 정수 속성으로 구현했습니다. 최신 버전에는 잠재적인 옵션을 훨씬 쉽게 검색할 수 있는 적절한 .NET 열거형 형식이 도입되었습니다.
대상으로 ChoiceMode 지정하는 API 수준에 따라 정수 또는 열거형입니다. Gingerbread API를 대상으로 지정하려는 경우 샘플 파일 AccessoryViews/HomeScreen.cs 주석 처리된 블록이 있습니다.
// For targeting Gingerbread the ChoiceMode is an int, otherwise it is an
// enumeration.
lv.ChoiceMode = Android.Widget.ChoiceMode.Single; // 1
//lv.ChoiceMode = Android.Widget.ChoiceMode.Multiple; // 2
//lv.ChoiceMode = Android.Widget.ChoiceMode.None; // 0
// Use this block if targeting Gingerbread or lower
/*
lv.ChoiceMode = 1; // Single
//lv.ChoiceMode = 0; // none
//lv.ChoiceMode = 2; // Multiple
//lv.ChoiceMode = 3; // MultipleModal
*/
프로그래밍 방식으로 항목 선택
메서드를 사용하여 '선택' SetItemChecked 된 항목을 수동으로 설정합니다(여러 선택 시 여러 번 호출할 수 있음).
// Set the initially checked row ("Fruits")
lv.SetItemChecked(1, true);
또한 코드는 여러 선택 영역과 다르게 단일 선택을 검색해야 합니다. 모드에서 Single 선택한 행을 확인하려면 정수 CheckedItemPosition 속성을 사용합니다.
FindViewById<ListView>(Android.Resource.Id.List).CheckedItemPosition
모드에서 Multiple 선택한 행을 확인하려면 .를 반복 CheckedItemPositionsSparseBooleanArray해야 합니다. 스파스 배열은 값이 변경된 항목만 포함하는 사전과 같으므로 다음 코드 조각에 설명된 대로 목록에서 선택한 항목을 알기 위해 값을 찾는 true 전체 배열을 트래버스해야 합니다.
var sparseArray = FindViewById<ListView>(Android.Resource.Id.List).CheckedItemPositions;
for (var i = 0; i < sparseArray.Size(); i++ )
{
Console.Write(sparseArray.KeyAt(i) + "=" + sparseArray.ValueAt(i) + ",");
}
Console.WriteLine();
사용자 지정 행 레이아웃 만들기
네 개의 기본 제공 행 보기는 매우 간단합니다. 더 복잡한 레이아웃(예: 전자 메일 목록, 트윗 또는 연락처 정보)을 표시하려면 사용자 지정 보기가 필요합니다. 사용자 지정 보기는 일반적으로 Resources/Layout 디렉터리에서 AXML 파일로 선언된 다음 사용자 지정 어댑터에서 해당 리소스 ID를 사용하여 로드됩니다. 보기에는 사용자 지정 색, 글꼴 및 레이아웃이 있는 다양한 표시 클래스(예: TextView, ImageView 및 기타 컨트롤)가 포함될 수 있습니다.
이 예제는 여러 가지 방법으로 이전 예제와 다릅니다.
에서 상속되며
Activity, 상속되지 않습니다ListActivity. 행을 사용자ListView지정할 수 있지만 다른 컨트롤도 레이아웃(예: 제목, 단추 또는 다른 사용자 인터페이스 요소)에 포함Activity할 수 있습니다. 다음은 설명하려는 제목 위에 제목을ListView추가하는 예제입니다.화면에 AXML 레이아웃 파일이 필요합니다. 이전 예제에서는
ListActivity레이아웃 파일이 필요하지 않습니다. 이 AXML에는 컨트롤 선언이ListView포함되어 있습니다.각 행을 렌더링하려면 AXML 레이아웃 파일이 필요합니다. 이 AXML 파일에는 사용자 지정 글꼴 및 색 설정이 있는 텍스트 및 이미지 컨트롤이 포함되어 있습니다.
선택적 사용자 지정 선택기 XML 파일을 사용하여 행을 선택할 때 행의 모양을 설정합니다.
구현은
Adapter재정의에서 사용자 지정 레이아웃을GetView반환합니다.ItemClick는 다르게 선언되어야 합니다(이벤트 처리기는 재정OnListItemClickListActivity의가 아닌 연결ListView.ItemClick됨).
이러한 변경 내용은 작업 보기 및 사용자 지정 행 보기를 만든 다음 어댑터 및 작업을 렌더링하기 위한 수정 내용을 다루는 것부터 아래에 자세히 설명되어 있습니다.
활동 레이아웃에 ListView 추가
HomeScreen 더 이상 상속되지 ListActivity 않으므로 기본 보기가 없으므로 HomeScreen 보기에 대한 레이아웃 AXML 파일을 만들어야 합니다. 이 예제에서는 보기에 제목(a 사용 TextView) 및 ListView 데이터 표시가 있습니다. 레이아웃은 여기에 표시된 Resources/Layout/HomeScreen.axml 파일에 정의되어 있습니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="@+id/Heading"
android:text="Vegetable Groups"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:textSize="30dp"
android:textColor="#FF267F00"
android:textStyle="bold"
android:padding="5dp"
/>
<ListView android:id="@+id/List"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#FFDAFF7F"
/>
</LinearLayout>
사용자 지정 레이아웃(대신)과 함께 사용할 Activity 경우의 이점은 이 예제의 ListActivity제목 TextView 과 같은 컨트롤을 화면에 추가할 수 있다는 것입니다.
사용자 지정 행 레이아웃 만들기
목록 보기에 표시될 각 행에 대한 사용자 지정 레이아웃을 포함하려면 다른 AXML 레이아웃 파일이 필요합니다. 이 예제에서는 행에 녹색 배경, 갈색 텍스트 및 오른쪽 맞춤 이미지가 있습니다. 이 레이아웃을 선언하는 Android XML 태그는 Resources/Layout/CustomView.axml에 설명되어 있습니다.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFDAFF7F"
android:padding="8dp">
<LinearLayout android:id="@+id/Text"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dip">
<TextView
android:id="@+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF7F3300"
android:textSize="20dip"
android:textStyle="italic"
/>
<TextView
android:id="@+id/Text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
android:textColor="#FF267F00"
android:paddingLeft="100dip"
/>
</LinearLayout>
<ImageView
android:id="@+id/Image"
android:layout_width="48dp"
android:layout_height="48dp"
android:padding="5dp"
android:src="@drawable/icon"
android:layout_alignParentRight="true" />
</RelativeLayout >
사용자 지정 행 레이아웃에는 다양한 컨트롤이 포함될 수 있지만 스크롤 성능은 복잡한 디자인 및 이미지 사용(특히 네트워크를 통해 로드해야 하는 경우)의 영향을 받을 수 있습니다. 스크롤 성능 문제 해결에 대한 자세한 내용은 Google 문서를 참조하세요.
사용자 지정 행 보기 참조
사용자 지정 어댑터 예제의 구현은 .에 있습니다 HomeScreenAdapter.cs. 키 메서드는 리소스 IDResource.Layout.CustomView를 사용하여 사용자 지정 AXML을 로드한 다음, 반환하기 전에 보기의 각 컨트롤에 대한 속성을 설정하는 위치입니다GetView. 전체 어댑터 클래스가 표시됩니다.
public class HomeScreenAdapter : BaseAdapter<TableItem> {
List<TableItem> items;
Activity context;
public HomeScreenAdapter(Activity context, List<TableItem> items)
: base()
{
this.context = context;
this.items = items;
}
public override long GetItemId(int position)
{
return position;
}
public override TableItem this[int position]
{
get { return items[position]; }
}
public override int Count
{
get { return items.Count; }
}
public override View GetView(int position, View convertView, ViewGroup parent)
{
var item = items[position];
View view = convertView;
if (view == null) // no view to re-use, create new
view = context.LayoutInflater.Inflate(Resource.Layout.CustomView, null);
view.FindViewById<TextView>(Resource.Id.Text1).Text = item.Heading;
view.FindViewById<TextView>(Resource.Id.Text2).Text = item.SubHeading;
view.FindViewById<ImageView>(Resource.Id.Image).SetImageResource(item.ImageResourceId);
return view;
}
}
작업에서 사용자 지정 ListView 참조
이제 클래스가 HomeScreen 상속되므로 ActivityListView AXML에 선언된 컨트롤에 대한 참조를 보유하도록 클래스에서 필드가 선언됩니다.
ListView listView;
그런 다음 클래스는 메서드를 사용하여 활동의 사용자 지정 레이아웃 AXML을 SetContentView 로드해야 합니다. 그런 다음 레이아웃에서 컨트롤을 ListView 찾은 다음 어댑터를 만들고 할당하고 클릭 처리기를 할당할 수 있습니다. OnCreate 메서드에 대한 코드는 다음과 같습니다.
SetContentView(Resource.Layout.HomeScreen); // loads the HomeScreen.axml as this activity's view
listView = FindViewById<ListView>(Resource.Id.List); // get reference to the ListView in the layout
// populate the listview with data
listView.Adapter = new HomeScreenAdapter(this, tableItems);
listView.ItemClick += OnListItemClick; // to be defined
마지막으로 ItemClick 처리기를 정의해야 합니다. 이 경우 메시지를 표시합니다.Toast
void OnListItemClick(object sender, AdapterView.ItemClickEventArgs e)
{
var listView = sender as ListView;
var t = tableItems[e.Position];
Android.Widget.Toast.MakeText(this, t.Heading, Android.Widget.ToastLength.Short).Show();
}
결과 화면은 다음과 같습니다.
행 선택기 색 사용자 지정
행이 터치되면 사용자 피드백을 위해 강조 표시되어야 합니다. 사용자 지정 보기가 CustomView.axml처럼 배경색으로 지정되면 선택 강조 표시도 재정의됩니다. CustomView.axml의 이 코드 줄은 배경을 연한 녹색으로 설정하지만 행을 터치할 때 시각적 표시기가 없음을 의미합니다.
android:background="#FFDAFF7F"
강조 표시 동작을 다시 사용하도록 설정하고 사용되는 색을 사용자 지정하려면 대신 배경 특성을 사용자 지정 선택기로 설정합니다. 선택기는 기본 배경색과 강조 색을 모두 선언합니다. Resources/Drawable/CustomSelector.xml 파일에는 다음 선언이 포함됩니다.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:state_selected="false"
android:drawable="@color/cellback" />
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#E77A26"
android:endColor="#E77A26"
android:angle="270" />
</shape>
</item>
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="@color/cellback" />
</selector>
사용자 지정 선택기를 참조하려면 CustomView.axml의 백그라운드 특성을 다음으로 변경합니다.
android:background="@drawable/CustomSelector"
이제 선택한 행과 해당 Toast 메시지가 다음과 같이 표시됩니다.
사용자 지정 레이아웃에서 깜박임 방지
Android는 레이아웃 정보를 캐싱하여 스크롤 성능을 ListView 향상하려고 합니다. 긴 데이터 스크롤 목록이 있는 경우 활동의 AXML 정의에서 선언의 속성을 ListView 사용자 지정 행 레이아웃의 배경과 동일한 색 값으로 설정 android:cacheColorHint 해야 합니다. 이 힌트를 포함하지 않으면 사용자가 사용자 지정 행 배경색이 있는 목록을 스크롤할 때 '깜박임'이 발생할 수 있습니다.