Xamarin.Forms Views介绍(六)——ListView

ListView用来显示列表数据,适合单一类型数据集合。

ListView属性

  • Footer :object类型,获取、设置列表底部的字符串或视图。
  • FooterTemplate :DataTemplate类型,获取、设置列表底部数据模版。
  • Header :object类型,获取、设置列表顶部的字符串或视图。
  • HeaderTemplate :DataTemplate类型,获取、设置列表定部数据模版。
  • HasUnevenRows :bool类型,表示列表是否有不均匀的行高,默认值false,设置为true后ListView每行的高度会因为内容不同而提供不同高度。

可以在运行时通过Cell.ForceUpdateSize
方法更新cell大小。

  • IsGroupingEnabled :bool类型,表示是否对列表进行分组。
  • GroupDisplayBinding:绑定分组头的值。
  • GroupHeaderTemplate:DataTemplate类型,分组头的数据模版。
  • GroupShortNameBinding:绑定分组跳转列表中的值。
  • IsPullToRefreshEnabled :bool类型,表示列表是否可以进行下拉刷新。
  • IsRefreshing :bool类型,表示列表是否正在刷新。
  • RowHeight :表示列表行高。
  • SelectedItem :object类型,表示列表当前选中对象。
  • SeparatorColor :表示列表分割栏的颜色。
  • SeparatorVisibility :SeparatorVisibility枚举,表示分割栏的显示方式。

ListView事件

  • ItemAppearing :ListView元素显示时触发,ListView滑动使Item显示在屏幕内。
  • ItemDisappearing :ListView元素消失时触发,ListView滑动使Item消失在屏幕内。
  • ItemSelected :新的Item元素被选中时触发。
  • ItemTapped :ListView的元素Item被点击是触发。
  • Refreshing :ListView刷新事件。

ListView基本使用

填充ListView显示的数据有两种方式:设置ListView的ItemsSource和Data Binding。Data Binding后面介绍。ItemsSource类型是IEnumerable
XAML定义ListView会默认填充整个屏幕

<ListView x:Name="listView"/>

通过C#代码设置ItemsSource:

listView.ItemsSource = new List<string>() {
    "List Item 1","List Item 2","List Item 3","List Item 4","List Item 5"
};
ListView效果

IOS会有多余分割线显示可以通过代码隐藏分割线listView.SeparatorVisibility = SeparatorVisibility.None;

默认情况下ItemSource集合提供的数据调用ToString方法显示在TextCell上,即
ListView每行是一个TextCell

定义XAML时设置ItemsSource:

<ListView>
    <ListView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
            <x:String>Item 3</x:String>
            <x:String>Item 4</x:String>
            <x:String>Item 5</x:String>
            <x:String>Item 6</x:String>
        </x:Array>
    </ListView.ItemsSource>
</ListView>

ListView 结合 Data Binding使用

ListView的数据源(ItemsSource)不仅可以是简单的字符串集合也可以是自定义的Model类集合,要显示类集合数据时需要结合Data Binding实现,演示一个TextCell显示Text和Detail的示例。

Data Source设置代码,ListViewItem是一个简单的Model类不再展示:

在定义ItemSource的数据集合时推荐用ObservableCollection<T>代替List<T>,ObservableCollection实现了INotifyPropertyChanged接口能够通知数据的变化,提供更新功能。

在XAML代码中定义ListVIew时应显示指出TextCell的展现形式。设置ListView.ItemTemplate,DataTemplate元素节点内定义一个TextCell,绑定 TextCell的Text和Detail属性为对应Model的属性。

<ListView x:Name="listView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Title}" Detail="{Binding Detail}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ListView Selected事件

当用户点击ListView的Item时触发ListView的ItemTapped事件,SelectedItem值发生改变还会触发ItemSelected事件,用户连续点击同一个Item时ItemTapped触发多次,SelectedItem只会在第一次点击时触发。
如果想使ListView禁用ListView被取消ListView的选中效果

listView.ItemSelected += (sender, e) => {
    listView.SelectedItem = null;
};

ListView Cell介绍

前面有提到过TextCell,是Xamarin.Forms 提供的Cell子类可以帮助我们显示更复杂的ListView。

Xamarin.Forms提供给ListVIew常用的Cell有两种:TextCellImageCellSwitchCellEntryCell通常用在TableView中。

TextCell用来显示文本,并允许在第二行显示详细文本:
Text – 显示在第一行的文本,以较大字体显示.
Detail – 以较小字体显示在第二行的文本.
TextColor – Text文本颜色.
DetailColor – Detail文本颜色.

ImageCell与TextCell相比在Cell的左侧可以显示图片信息。ImageCell显示图片在Windows Phone 8.1 下默认不会缩放,所以会有如下效果:

至于Windows Phone显示效果没有亲自测试,默认不会缩放在官网中有提到,不开发Windows Phone可以不考虑。

具体使用参考ListView 结合 Data Binding使用。更复杂的列表效果需自定义单元格,继承ViewCell实现期望的效果。自定义单元格更多信息参考:https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/customizing-cell-appearance/#Custom_Cells


ListView的Header和Footer

可以在ListView的头部和尾部添加显示简单的文本或更加复杂的视图布局。ListView的Header和Footer会随ListView一起滚动。
如设置ListView的Header为一个简单的字符串Footer为一个按钮:

<ListView x:Name="listView">
    <ListView.Header>
        ListView Header
    </ListView.Header>
    <ListView.Footer>
        <Button Text="Load More"/>
    </ListView.Footer>
</ListView>

HeaderTemplate和FooterTemplate不是必须的,涉及到数据绑定时才会用到。

如图效果:


加载更多效果可以通过Footer设置为一个Button点击加载跟多数据。


ListView分组

当ListView展示大量数据时可以尝试通过分组管理、展示数据,如iOS的通讯录。
对ListView分组前,必须先将数据进行分组,ListView分组的数据源应该是集合的集合(collection of collections,后面给出示例)。准备好数据源同时将ListView 的IsGroupingEnabled属性设置为true,表示ListView开启分组功能。ListView提供了GroupDisplayBinding属性,用来绑定每个分组的Title,GroupShortNameBinding绑定一个索引字段。所以定义的GroupModel应该包含一个Title属性绑定到GroupDisplayBinding属性(必须的),定义一个ShortName绑定到GroupShortNameBinding(可选值),iOS会在右侧提供一个索引列表。

本文示例,ListView的item展现的是简单的字符串,所以GroupModel定义继承IEnumerable<string>,并定义Title和ShortName属性用来绑定ListView的GroupDisplayBinding和GroupShortNameBinding属性。定义一个IEnumerable<ItemModel>属性表示没个分组的数据,本例中ListView展示字符串数据,所以定义为IEnumerable<sttring>。定义如下Model类:

public class ListViewGroup : ObservableCollection<string>
{
    public string GroupTitle
    {
        get;
        set;
    }

    public string ShortName
    {
        get;
        set;
    }

    public static ObservableCollection<ListViewGroup> Items
    {
        get;
        set;
    }

    static ListViewGroup()
    {
        Items = new ObservableCollection<ListViewGroup>();
        //创建虚拟数据
        var aGroup = new ListViewGroup
        {
            GroupTitle = "A Title",
            ShortName = "A"
        };
        aGroup.Add("Abs");
        aGroup.Add("Apple");
        aGroup.Add("Are");
        aGroup.Add("Add");
        Items.Add(aGroup);

        var bGroup = new ListViewGroup
        {
            GroupTitle = "B Title",
            ShortName = "B"
        };
        bGroup.Add("Bbs");
        bGroup.Add("Blue");
        bGroup.Add("Bar");
        bGroup.Add("Bana");
        Items.Add(bGroup);

        var cGroup = new ListViewGroup
        {
            GroupTitle = "C Title",
            ShortName = "C"
        };
        cGroup.Add("Cbs");
        cGroup.Add("Couple");
        cGroup.Add("Cut");
        cGroup.Add("Custum");
        Items.Add(cGroup);

        var dGroup = new ListViewGroup
        {
            GroupTitle = "D Title",
            ShortName = "D"
        };
        dGroup.Add("Dbs");
        dGroup.Add("Double");
        dGroup.Add("Delete");
        dGroup.Add("Developer");
        Items.Add(dGroup);
    }
}

XAML中绑定数据,通过x:Static指定数据源为ListViewGroup的静态属性Items,设置IsGroupingEnabled为true,绑定GroupTitle的值到GroupDisplayBinding,同时绑定GroupShortNameBinding的值(不是必须的),ListView.RowHeight属性节点定义不同平台Item显示不同高度。结合Custum Cell知识,定义ItemTemplate的值:

<ListView ItemsSource="{x:Static local:ListViewGroup.Items}"
          IsGroupingEnabled="true"
          GroupDisplayBinding="{Binding GroupTitle}"
          GroupShortNameBinding="{Binding ShortName}">
     <ListView.RowHeight>
         <OnPlatform x:TypeArguments="x:Int32"
                     iOS="80"
                     Android="80"
                     WinPhone="90" />
     </ListView.RowHeight>

     <ListView.ItemTemplate>
         <DataTemplate>
             <ViewCell>
                 <ContentView Padding="5">
                    <Frame OutlineColor="Accent"
                           Padding="10">
                        <StackLayout Orientation="Horizontal">
                            <BoxView Color="#00ffdd"
                                     WidthRequest="50"
                                     HeightRequest="50" />
                            <Label Text="{Binding .}"
                                   FontSize="22"
                                   VerticalOptions="StartAndExpand" />
                         </StackLayout>
                     </Frame>
                 </ContentView>
             </ViewCell>
          </DataTemplate>
     </ListView.ItemTemplate>
        
</ListView>

Android、iOS效果图(GroupShortNameBinding属性对Android平台无效):

与定义ItemTemplate类似,ListView提供了GroupHeaderTemplate属性方便我们自定义ListView的Group Header样式。示例代码:

<ListView.GroupHeaderTemplate>
    <DataTemplate>
         <TextCell Text="{Binding Title}"
                   Detail="{Binding ShortName}"
                   TextColor="#f35e20"
                   DetailColor="#503026" />
    </DataTemplate>
</ListView.GroupHeaderTemplate>

ListView 刷新

设置ListView的IsPullToRefreshEnabled属性为true,使ListView支持下拉刷新。
下拉ListView有如下效果:

ListView 开启下拉刷新

用户下拉ListView会触发Refreshing事件,在处理Refreshing事件重新加载数据后应通过设置IsRefreshing为false或调用ListView的EndRefresh方法通知ListView数据加载完成以取消下拉加载的效果。

也可以通过调用ListView 的BeginRefresh方法触发Refreshing事件。

ListView Context Actions

有时我们需要为ListView的每一项提供菜单行为,如Item的删除。IOS为左滑动Item,Android和Windows Phone为长按Item。

ListView Item菜单

Context Actions依靠MenuItem实现,可以通过C#或XAML代码定义。MenuItem提供了Clicked事件响应MenuItem的点击,MenuItem继承BaseMenuItem,有三个常用属性属性:

  • Text – string类型,表示MenuItem显示文本.
  • Icon – FileImageSource类型,表示MenuItem图标.
  • IsDestructive – bool类型,值为true时iOS平台MenuItem以红色背景渲染.

C# 定义Context Action

定义MenuItem添加到Cell的ContextActions属性中即可。这里不再给出C#代码设置ListView的ItemTemplate示例,所以图片代码为代码片段。可参考:http://stackoverflow.com/questions/38585153/implementing-xamarin-forms-context-actions

默认情况下响应MenuItem的点击事件并不能判断当前MenuItem属于哪个Cell,可以通过MenuItem的CommandParameter属性绑定一个值确定操作的Cell。参考MenuItem响应事件。

XAML 定义Context Action:

<ListView x:Name="listView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Title}" Detail="{Binding Detail}">
                <TextCell.ContextActions>
                <MenuItem Clicked="OnShare" CommandParameter="{Binding .}" Text="分享" />
                    <MenuItem Clicked="OnDelete" CommandParameter="{Binding .}" Text="删除" IsDestructive="True" />
                </TextCell.ContextActions>
            </TextCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ListView 性能优化

应用程序中使用ListView一定要确保ListView的性能(快速加载和平滑滚动)。Xamarin.Forms提供了Caching Strategy(缓存策略)优化ListView使用性能,对应ListView的CachingStrategy属性。也可以通过ListView使用过程中的一些技巧提升ListView的性能。

Caching Strategy

ListView用来展示大量数据,默认情况下ListView会为每条记录创建一个Cell,耗费大量内存,通过Caching Strategy减少内存使用,提高ListView性能。ListViewCachingStrategy枚举包含两个值RetainElement和RecycleElement。

ListViewCachingStrategy枚举

RetainElement:
为列表中的没一项生成一个Cell,是ListView的默认行为。如下情况应使用该值:

  • 每个单元格(Cell)拥有大量的数据绑定(20-30+).
  • 单元格模版(Cell Template)变化频繁。
  • 设置为RecycleElement值时ListView性能降低,应使用该值。(When testing reveals that the RecycleElement value results in a reduced execution speed. )

RecycleElement:
设置为该值时ListView尝试通过重复利用Cell减少内存使用和提高执行速度。RecycleElement不一定会提高ListView的使用性能,但如下情况应使用该值:

  • 单元格有很少的数据绑定
  • 没个单元格的数据源由Cell的BindingContext属性提供
  • 没个单元格拥有相同的单元格模版

XAML中通过代码CachingStrategy="RecycleElement"指定CachingStrategy的模式。C#代码中ListView没有提供CachingStrategy属性,设置CachingStrategy的值要在ListView 的构造函数中传入设置的值。

ListView设置CachingStrategy="RecycleElement",简单的显示string集合出现元素显示重复问题。

RecycleElement引起的问题

显式设置ListView.ItemTemplate后运行正常。

<ListView x:Name="listView" CachingStrategy="RecycleElement">
    <ListView.ItemTemplate>
        <DataTemplate>
        <TextCell Text="{Binding .}"/>
        </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

自定义Cell时应该重写OnBindingContextChanged方法,以保证设置ListView的属性CachingStrategy="RecycleElement"时显示正常。


Improving ListView Performance

ListView使用过程中很多技巧可以帮助我们提高ListView的性能:

  • 对于绑定的数据源用IList<T> 集合代替 IEnumerable<T>集合。
  • 尽量使用Forms提供的Cell(TextCell / SwitchCell),避免自定义Cell。
  • 自定Cell时减少布局嵌套和使用视图,布局尽量使用AbsoluteLayout 和 Grid,对于LayoutOptions属性尽量设置为Fill。
  • 显示不规律数据时用TableView代替ListView。
  • 减少Cell.ForceUpdateSize方法的调用。
  • 避免将ListView放置在ScrollView中使用。
  • 过于复杂的Cell,尽量使用Custom Renderer(以后介绍)。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,881评论 4 368
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,052评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,598评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,407评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,823评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,872评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,037评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,778评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,505评论 1 247
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,745评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,233评论 1 264
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,568评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,231评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,141评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,939评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,954评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,784评论 2 275

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,105评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,585评论 25 707
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 22,985评论 8 183
  • 何方僧侣携我肌骨 来赶一场鲜花的超度 烟火不清不白。 木鱼声声敲打钝痛 四月所及孤坟遍野 经纶又因谁焚唱? 为这碌...
    故墙阅读 216评论 11 8
  • 陌生人社会,完全是信息不对称的,隔阂的。所以我们有名片,展示我们的闪光点。 首先,高手通过声音能听出他的籍贯。其次...
    夜雨狂歌如梦阅读 182评论 0 0