写在前面：
在实际项目中，ListView 作为一个非常方便且使用率非常频繁的控件，非常适用于大量数据展示中，且 ListView 支持分组展示，自定义单元格样式，下拉刷新，单元格操作等功能，在实际项目中深受开发者的喜爱。但是对于少量数据进行分组展示时，使用 ListView 却导致
ItemsSource的定义比较繁琐且效率不高，在 Xamarin.Forms 中同样提供了另一种控件 TableView 用于展示静态单元格内容，其在展示不常发生改变的内容上比 ListView 更为简洁明了，今天就给大家介绍下TableView 。
TableView
TableView 是一个不共享同一单元格模板，用于显示数据或功能选项的可滚动列表视图。 与 ListView 不同的是 TableView 不具有 ItemsSource 这个属性，因此，其所有展示数据源都必须手动在布局文件中添加。TableView 当以下情况下非常有用：
- 显示一系列的设置 (如 App 中常见的设置页面大多都使用静态单元格形式)
- 在窗体中收集数据或修改数据 (如 App 中常见的个人中心修改个人信息页面)
- 不以行到行的形式展示数据 (例如数字、 百分比和图像)
TableView 处理滚动和布局中极具吸引力的部分中，针对上述情形，通常需要的行。 TableView 控件使用每个平台的基础等效的视图时可用，创建每个平台的本机外观。
TableView 结构
TableView 中的元素划分为部分：TableView 根目录是 TableRoot，其中包含一个或多个TableSections 子目录 :
- C# Code
Content = new TableView {
Root = new TableRoot {
new TableSection...
},
Intent = TableIntent.Settings
};
每个 TableSection 由 Title 和一个或多个 ViewCell 组成。 这里我们可以看到 TableSection 的构造函数中将 Title属性设置为 Ring ：
- C# Code
var section = new TableSection ("Ring") { //TableSection constructor takes title as an optional parameter
new SwitchCell {Text = "New Voice Mail"},
new SwitchCell {Text = "New Mail", On = true}
};
若要在 XAML 中完成如上所示相同的布局：
- XAML Code
<TableView Intent="Settings">
<TableRoot>
<TableSection Title="Ring">
<SwitchCell Text="New Voice Mail" />
<SwitchCell Text="New Mail" On="true" />
</TableSection>
</TableRoot>
</TableView>
Cells in TableView
TableView 和 ListView 拥有完全相同的单元格样式，但是在TableView 中 SwitchCell 和 EntryCell 使用更为频繁：
-
SwitchCell：一般用于展示以及切换 True / False 状态，同时还伴有文本说明。在允许消息通知，以及一些用户偏好设置时使用比较多。 -
EntryCell：一般用于展示以及修改用户数据，在常见用户信息修改和添加时使用。
同样 TableView 支持自定义 Cell 样式，你可以根据你想要的 UI 样式自定义布局。但是对于实际项目中大部分都是自定义 Cell 样式，所以这种情况下使用 TableView 上并不简单，But 有开源组件给我们提供了大量自定义 Cell 以供我们使用。
SettingsView
虽然 Xamarin.Forms TableView 很有用，但是没有足够的内置单元格。所以总是需要使用 ViewCell，但这会让应用程序性能变差。为了解决这个问题，SettingsView 制作了一些自定义本机单元格和一个自定义 TableView，可以有效地处理这些单元格。
Features
General
- Separator Color
- Selected Cell Color
- Scroll To Top And Bottom
Sections
- IsVisible
- Footer
- Various Properties Of Header And Footer
- Enable DataTemplate and DataTemplateSelector
Cells
- Icon Cached In Memory At All Cells
- Enable Change Corner Radius of Icon
- Various Defined Cells
- Enable Xamarin.Forms.ViewCell and Other Cell
Cells in SettingsView
- LabelCell
- CommandCell
- ButtonCell
- SwitchCell
- CheckboxCell
- NumberPickerCell
- TimePickerCell
- DatePickerCell
- TextPickerCell
- PickerCell
- EntryCell
How to Use
Install-Package AiForms.SettingsView
- iOS Initialize
public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
global::Xamarin.Forms.Forms.Init();
AiForms.Renderers.iOS.SettingsViewInit.Init(); //need to write here
LoadApplication(new App(new iOSInitializer()));
return base.FinishedLaunching(app, options);
}
- Sample：
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sv="clr-namespace:AiForms.Renderers;assembly=SettingsView"
x:Class="Sample.Views.SettingsViewPage">
<sv:SettingsView HasUnevenRows="true">
<sv:Section Title="Header1" FooterText="Footer1">
<sv:CommandCell IconSource="icon.png" IconSize="60,60" IconRadius="30"
Title="Xam Xamarin" Description="hoge@fuga.com"
Command="{Binding ToProfileCommand}" CommandParameter="{Binding Parameter}"
KeepSelectedUntilBack="true"
/>
<sv:ButtonCell Title="Toggle Section" TitleColor="{StaticResource TitleTextColor}"
TitleAlignment="Center" Command="{Binding SectionToggleCommand}" />
<sv:LabelCell Title="Label" ValueText="value" />
<sv:SwitchCell Title="Switch" On="true"
Description="This is description." />
<sv:CheckboxCell Title="Checkbox" Checked="true" />
</sv:Section>
<sv:Section Title="Header2" FooterText="Footer2" IsVisible="{Binding SctionIsVisible}">
<sv:PickerCell Title="Favorites" ItemsSource="{Binding ItemsSource}" DisplayMember="Name" MaxSelectedNumber="3"
SelectedItems="{Binding SelectedItems}" KeepSelectedUntilBack="true" PageTitle="select 3 items" />
<sv:NumberPickerCell Title="NumberPicker" Min="0" Max="99" Number="15" PickerTitle="Select number" />
<sv:TimePickerCell Title="TimePicker" Format="HH:mm" Time="15:30" PickerTitle="Select time" />
<sv:DatePickerCell Title="DatePicker" Format="yyyy/MM/dd (ddd)" Date="2017/11/11" MinimumDate="2015/1/1" MaximumDate="2018/12/15" TodayText="Today's date"/>
<sv:EntryCell Title="EntryCell" ValueText="{Binding InputText.Value}" Placeholder="Input text" Keyboard="Email" TextAlignment="End" HintText="{Binding InputError.Value}" />
</sv:Section>
</sv:SettingsView>
</ContentPage>
- 在 App.xaml 中定义 SettingsView 样式：
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sv="clr-namespace:AiForms.Renderers;assembly=SettingsView"
x:Class="Sample.App">
<Application.Resources>
<ResourceDictionary>
<Color x:Key="AccentColor">#FFBF00</Color>
<Color x:Key="DisabledColor">#E6DAB9</Color>
<Color x:Key="TitleTextColor">#CC9900</Color>
<Color x:Key="PaleBackColorPrimary">#F2EFE6</Color>
<Color x:Key="PaleBackColorSecondary">#F2EDDA</Color>
<Color x:Key="DeepTextColor">#555555</Color>
<Color x:Key="NormalTextColor">#666666</Color>
<Color x:Key="PaleTextColor">#999999</Color>
<x:Double x:Key="BaseFontSize">12</x:Double>
<x:Double x:Key="BaseFontSize+">14</x:Double>
<x:Double x:Key="BaseFontSize++">17</x:Double>
<x:Double x:Key="BaseFontSize-">11</x:Double>
<Style TargetType="sv:SettingsView">
<Setter Property="SeparatorColor" Value="{StaticResource DisabledColor}" />
<Setter Property="BackgroundColor" Value="{StaticResource PaleBackColorPrimary}" />
<Setter Property="HeaderBackgroundColor" Value="{StaticResource PaleBackColorPrimary}" />
<Setter Property="CellBackgroundColor" Value="{StaticResource AppBackground}" />
<Setter Property="CellTitleColor" Value="{StaticResource DeepTextColor}" />
<Setter Property="CellValueTextColor" Value="{StaticResource NormalTextColor}" />
<Setter Property="CellTitleFontSize" Value="{StaticResource BaseFontSize++}" />
<Setter Property="CellValueTextFontSize" Value="{StaticResource BaseFontSize}" />
<Setter Property="CellDescriptionColor" Value="{StaticResource NormalTextColor}" />
<Setter Property="CellDescriptionFontSize" Value="{StaticResource BaseFontSize-}" />
<Setter Property="CellAccentColor" Value="{StaticResource AccentColor}" />
<Setter Property="SelectedColor" Value="#50FFBF00" />
<Setter Property="HeaderTextColor" Value="{StaticResource TitleTextColor}" />
<Setter Property="FooterFontSize" Value="{StaticResource BaseFontSize-}" />
<Setter Property="FooterTextColor" Value="{StaticResource PaleTextColor}" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
References
到这里在 Xamarin.Forms TableView — 静态单元格 就介绍完了，希望能对您有所帮助。
——End 有问题可以加我微信，大家一起讨论，加好友前请备注您的简称，谢谢！
网友评论