【Android】9.3 自定义列表视图的外观
分类：C#、Android、VS2015；
创建日期：2016-02-18
一、简介
自定义的列表视图通常用Resources/Layout文件夹下的axml文件中的资源来声明，适配器则通过Id去加载它。一个视图可以包含任意数量的类 (如 TextViews、 ImageViews 和其他控件) 以及自定义的颜色、字体和布局。
由于ListView的外观是由行的布局决定的，因此，若要更改列表视图的外观，只需要使用不同的行布局即可。
如果希望显示更复杂的布局 (如电子邮件、联系人列表)，必须用自定义视图来实现。
二、运行截图
三、主要设计步骤
1、在colors.xml中添加颜色定义
在/Resources/values/ colors.xml文件中添加本示例选中行的颜色：
<color name="cellback">#FFDAFF7F</color>
2、添加ch0902CustomSelector.xml文件
在 /Resources/Drawable文件夹下添加该文件。
<?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>
3、添加ch0902_CustomView.axml文件
要为列表视图中每一行都创建一个自定义的布局，必须定义一个单独的布局文件。在此示例中，每行都用绿色背景、棕色文本以及一个右对齐的图像来呈现。这个单独的布局保存在/Resources/Layout/ch0902_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="@drawable/ch0902CustomSelector" 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>
虽然自定义行布局可以包含许多不同的控件，但是滚动性能可能会受到影响（特别是通过网络加载图像时)。
关于解决滚动性能问题的详细信息，可参考谷歌官网上的相关文章。
4、添加ch0902_Main.axml文件
在/Resources/Layout文件夹下添加该文件。
<?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: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>
5、添加ch0902MyBaseAdapter.cs文件
这个文件的关键是GetView方法，该方法使用Resource.Layout.ch0902_CustomView的资源ID加载自定义的axml，然后设置视图中控件的每个属性，最后返回结果。
using System.Collections.Generic; using Android.App; using Android.Views; using Android.Widget; namespace MyDemos.SrcDemos { public class ch0902MyBaseAdapter : BaseAdapter<ch0901TableItem> { List<ch0901TableItem> items; Activity context; public ch0902MyBaseAdapter(Activity context, List<ch0901TableItem> items) { this.context = context; this.items = items; } public override long GetItemId(int position) { return position; } public override ch0901TableItem 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; // 如果没有可复用的视图（view为null），就创建一个新视图 if (view == null) { view = context.LayoutInflater.Inflate(Resource.Layout.ch0902_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; } } }
6、添加ch0902Main.cs文件
在SrcDemos文件夹下添加该文件。
using System.Collections.Generic; using Android.App; using Android.OS; using Android.Widget; namespace MyDemos.SrcDemos { [Activity(Label = "【例9-2】 自定义视图")] public class ch0902Main : Activity { List<ch0901TableItem> tableItems = new List<ch0901TableItem>(); ListView listView; protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); SetContentView(Resource.Layout.ch0902_Main); listView = FindViewById<ListView>(Resource.Id.List); tableItems.Add(new ch0901TableItem() { Heading = "Vegetables", SubHeading = "65 items", ImageResourceId = Resource.Drawable.ch09Vegetables }); tableItems.Add(new ch0901TableItem() { Heading = "Fruits", SubHeading = "17 items", ImageResourceId = Resource.Drawable.ch09Fruits }); tableItems.Add(new ch0901TableItem() { Heading = "Flower Buds", SubHeading = "5 items", ImageResourceId = Resource.Drawable.ch09FlowerBuds }); tableItems.Add(new ch0901TableItem() { Heading = "Legumes", SubHeading = "33 items", ImageResourceId = Resource.Drawable.ch09Legumes }); tableItems.Add(new ch0901TableItem() { Heading = "Bulbs", SubHeading = "18 items", ImageResourceId = Resource.Drawable.ch09Bulbs }); tableItems.Add(new ch0901TableItem() { Heading = "Tubers", SubHeading = "43 items", ImageResourceId = Resource.Drawable.ch09Tubers }); listView.Adapter = new ch0902MyBaseAdapter(this, tableItems); } } }
四、代码解释
1、行复用
如果所有行可在一个屏幕内全部显示出来，此时不需要复用。但是，当显示成百上千行的数据时，一次创建这么多的视图但只能使用几行太浪费内存空间了。为了避免这种情况，当某行从屏幕上消失时，可将其保存到一个队列中，以便复用。
具体实现办法是：当用户滚动屏幕时，先判断在convertView参数中传递的视图实例，如果该值为null，就创建新的视图实例，否则重新设置该对象的属性以便复用它。
GetView方法应该按下面的模式来复用行视图：
public override View GetView(int position, View convertView, ViewGroup parent)
{
View view = convertView; // re-use an existing view, if one is supplied
if (view == null) view = context.LayoutInflater.Inflate(Android.Resource.Layout.SimpleListItem1, null);
view.FindViewById<TextView>(Android.Resource.Id.Text1).Text = items[position];
return view;
}
创建新的视图前，自定义适配器应该总是实现convertView对象，这样可确保显示大量的列表数据时不会导致内存溢出。
注意，某些适配器的实现（例如CursorAdapter）可能没有GetView方法，不过，这些适配器采用的策略是将GetView的职责分成两种不同的方法NewView和BindView，从而确保强制执行复用的行。
2、快速滚动
当一个ListView包含多行数据时，可利用快速滚动导航到该列表的不同部分（Api 11及更高版本都支持快速滚动）。
将FastScrollEnabled属性设置为true，即可显示快速滚动手柄（handle）：
ListView.FastScrollEnabled = true;
3、通过C#代码设置或查找选项
设置列表中的初始化选项时，用SetItemChecked方法实现即可，例如：
listview.SetItemChecked(1, true);
也可能需要从多个选项中查找某个已选择的单项，例如：
FindViewById<ListView>(Android.Resource.Id.List).CheckedItemPosition
要确定在多选模式中用户选择了哪些行，需要遍历用稀疏数组（sparseArray）保存的所有可选项，该数组类似于一个保存更改记录的字典，所以必须遍历整个数组才能找到所有选项，例如：
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();
4、自定义所选行的颜色
当用户选择某行时，一般应突出显示该行。突出显示行是在ch0902_CustomView.axml文件中实现的（将背景设置为淡绿色），重启突出显示的行也是用它来实现，但是采用的是反色背景。因此，先在 /Resources/Drawable/ch0902CustomSelector.xml 文件中包含对应的声明，然后在ch0902_CustomView.axml 文件中通过引用自定义的选择器来改变背景：
android:background="@drawable/ch0902CustomSelector"
当选择某行时（按住不抬起来），即得到运行截图所示的效果。
5、避免滚动闪烁
安卓系统是通过缓存布局信息来改善ListView的滚动性能的。如果列表视图中有比较长的滚动列表的数据，还应该在axml布局文件的ListView控件中声明android:cacheColorHint属性（将其值设置为和自定义行布局中的背景色相同），否则的话，滚动列表时就可能会出现一闪一闪（flicker）的情况。
