Xamarin小说阅读器系列(三)–创建书籍列表页

 jvxiang   2018-02-04 15:02   1,768 人阅读  0 条评论

好几天继续写这个了,主要是这些天一直在研究能用到的插件。用到的插件都整理在这几天更新的文档中了。

整个程序准备仿老子搜书来做。老子搜书的界面:

因为没有服务器,暂时不做书库,后期要做排行榜再说。

导航栏没什么可说的,Title写我们的标题,右侧的ToolbarItem用Iconize,使用方法见Xam.Plugin.Iconize基本使用。这样就添加好了我们的导航栏。

下面的广告我们不加,直接走到了ListView的部分。

观察这个ListView,左侧是书的封面,右侧有四行。

第一行:书名 作者图标 作者

第二行:最近阅读

第三行:最近更新

第四行:更新时间

我们来做这个ListView,首先定义一个ListView,将ItemSource设置为我们的书籍Entity。由于我们不想要ListView的分隔线,所以需要设置 SeparatorVisibility="None",定义一个合适的宽度,否则默认宽度下listview只能显示两行文本并且封面图片太小,所以我们将行高设置为100, RowHeight="100"

<ListView x:Name="BookList" ItemsSource="{Binding BookInfoEntities}" SeparatorVisibility="None" RowHeight="100">

接下来我们自定义ViewCell,因为默认的ViewCell里没有我们需要的样式,在ListView.ItemTemplate中添加DataTemplate,DataTemplate中添加ViewCell,ViewCell中定义我们的自定义样式。根据刚刚的分析,定义如下样式
<StackLayout Orientation="Horizontal"> <forms:CachedImage Source="{Binding ConverPath}"/> <StackLayout Orientation="Vertical"> <StackLayout Orientation="Horizontal"> <Label Text="{Binding BookName}" FontAttributes="Bold" FontSize="Large"></Label> <iconize:IconLabel FontSize="Small" Text="fa-user-circle" VerticalTextAlignment="Center"></iconize:IconLabel> <Label Text="{Binding Author}" VerticalTextAlignment="Center"></Label> </StackLayout> <Label Text="{Binding LastReaded, Converter={StaticResource InfoConverter},ConverterParameter=阅读}"></Label> <Label Text="{Binding LastChapter, Converter={StaticResource InfoConverter},ConverterParameter=最新}"></Label> <Label Text="{Binding LastModify, Converter={StaticResource InfoConverter},ConverterParameter=更新}"></Label> </StackLayout> </StackLayout>

CachedImage是FFImageLoading的一个缓存图片类,它可以自动下载并缓存使用到的图片,不需要我们先下载图片再赋值给Image。

整体代码如下

<?xml version="1.0" encoding="utf-8" ?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:BookReader" xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize" xmlns:forms="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" xmlns:converter="clr-namespace:BookReader.Converter;assembly=BookReader" x:Class="BookReader.View.MainPage" Title="阅读器"> <ContentPage.Resources> <ResourceDictionary> <converter:InfoConverter x:Key="InfoConverter" /> </ResourceDictionary> </ContentPage.Resources> <ContentPage.ToolbarItems> <iconize:IconToolbarItem Command="{Binding SearchCommand}" Icon="fa-search" /> </ContentPage.ToolbarItems> <ContentPage.Content> <ListView x:Name="BookList" ItemsSource="{Binding BookInfoEntities}" SeparatorVisibility="None" RowHeight="100"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal"> <forms:CachedImage Source="{Binding ConverPath}"/> <StackLayout Orientation="Vertical"> <StackLayout Orientation="Horizontal"> <Label Text="{Binding BookName}" FontAttributes="Bold" FontSize="Large"></Label> <iconize:IconLabel FontSize="Small" Text="fa-user-circle" VerticalTextAlignment="Center"></iconize:IconLabel> <Label Text="{Binding Author}" VerticalTextAlignment="Center"></Label> </StackLayout> <Label Text="{Binding LastReaded, Converter={StaticResource InfoConverter},ConverterParameter=阅读}"></Label> <Label Text="{Binding LastChapter, Converter={StaticResource InfoConverter},ConverterParameter=最新}"></Label> <Label Text="{Binding LastModify, Converter={StaticResource InfoConverter},ConverterParameter=更新}"></Label> </StackLayout> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage.Content> </ContentPage>

使用测试数据,截图:

本文地址:https://www.jvxiang.com/xamarin小说阅读器系列(三)-创建书籍列表页.html
版权声明:本文为原创文章,版权归 jvxiang 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情