Xamarin.Forms 第12局:集合型控件
总目录
前言
本文介绍集合型控件:
一、Picker
二、ListView
三、TableView
环境
1.Visual Studio 2017
2.Xamarin.Froms 4.0.0.8055-pre1
3.Android 4.4(API 19)或更高版本
4.约定:XF代表Xamarin.Forms
内容
一、Picker
Picker:选取器。
实现效果
Xaml方式
Picker主要属性和事件:
- Title:引导性标题;
- ItemSource:选择项集合;
- SelectedIndex:选中索引;
- SelectedItem:选中项;
- SelectedIndexChanged:用户选择某项时触发的事件。
注:上述属性也可通过绑定方式进行数据填充,后续会在数据绑定篇进行相关介绍。
C#方式
二、ListView
ListView:集合列表。
这里简单实现类似QQ好友列表的集合,包括以下功能:
- 列表展示和响应选择
- 上下文菜单
- 下拉刷新
实现效果
列表展示和响应选择 上下文菜单 下拉刷新Xaml方式
1.ListView是常用控件,如好友列表,音乐列表等。分析ListView可知,它基本有以下部分:
- 数据源。即:要展示的数据;
- ListView外观。即:整体ListView外观;
- ListView单元格外观。即:列表中每一项的外观;
- 交互。即:点击操作,长按操作,下拉刷新操作等。
2.本例用到了数据模板和数据绑定相关知识,可以简单了解下:
-
数据模板(DataTemplate):数据的表现形式。本例中,ListView每一项如何展示,需要设置其ItemTemplate为DataTemplate,在DataTemplate中写展示方式代码,这里用ViewCell展示,ViewCell是自定义单元格,在ViewCell中写布局,控件等,控制列表每一项的外观展示;
-
数据绑定(DataBinding):将两个对象的属性绑定。本例中,数据源为FriendViewModel的集合,这里用ObservableCollection,它与List的区别是,当向列表中添加一条数据时,界面会自动更新,但List不会。将集合绑定到ListView的ItemSource属性,然后在ViewCell中直接以Binding的方式将展示数据。
3.列表展示:本例中,通过设置数据源,然后在ViewCell编写布局及控件,然后通过数据绑定展示数据。通过设置RowHeight属性设置每一行的行高。
4.列表选择:ItemSelected事件响应用户选择;
5.上下文菜单:通过在ContextActions中添加MenuItem,设置菜单项。注意,需要设置CommandParameter="{Binding .}",即:将命令参数绑定到选项自身,然后传递到菜单点击事件中,若不设置,点击事件中无法获取要操作的项;
6.下拉刷新:将IsPullToRefreshEnabled设置为True以支持下拉刷新,下拉刷新会执行RefreshCommand命令。注意,在刷新操作最后将IsRefreshing设置为false,否则界面的刷新动画不会消失。
注:本例中的展示方式也可以用ImageCell,不过ViewCell比较重要,所以用它做实现,Cell更多信息在下面TableView中介绍。
C#方式:一般ListView用Xaml方式。
二、TableView
TableView:表控件。
实现效果
Xaml方式
1.TableView常用于显示设置界面;
2.TableView结构:
- TableView下面是TableRoot;
- TableRoot下面可包含多个TableSection节点;
- TableSection下面可包含多个单元格(Cell);
3.单元格(Cell):单元格是列表中的项,专用于ListView和TableView,有以下几类:
- TextCell:文本单元格,显示文本;
- ImageCell:图片单元格,显示图片和一些描述信息;
- SwitchCell:开关单元格;
- EntryCell:文本输入框单元格;
- ViewCell:自定义单元格(重要),若上述内置单元格不足,可自定义单元格。
C#方式:一般TableView用Xaml方式。
后语
下篇介绍数据绑定,待续...