Xamarin小说阅读器系列(四)-编写搜索页1

 jvxiang   2018-02-23 12:36   964 人阅读  0 条评论

分析

年过完了,要开始我们的搜索页的编写了。

分析一下我们要仿照的页面,

可以发现搜索页面分了三部分:

第一部分是返回按钮,搜索框,搜索按钮组成。

第二部分是热门搜索词。

第三部分是搜索历史。

编写标题栏

如果使用系统的标题栏,我们只能增加返回按钮跟搜索按钮,无法增加输入框,所以我们就不使用系统的标题栏,自己做一个。

由于我们需要其出现一个通栏的感觉,所以这里用Frame包裹一层,里面放一个StackLayout,StackLayout中增加一个iconize:IconLabel,一个Entry,再增加一个iconize:IconLabel。这里注意不要使用Button,因为Button默认是有阴影的,在 标题栏里有阴影并不好看。

所以我们只要使用Label来显示图标,就可以避免图标阴影的问题。关于Label点击的问题,可以查看

废话不多说,看代码,

Xaml:

<Frame Padding="0,5,0,5" BackgroundColor="Blue"> <StackLayout Orientation="Horizontal"> <iconize:IconLabel Text="fa-chevron-left" FontSize="Large" VerticalTextAlignment="Center" Margin="15, 0,15,0" TextColor="White"> <iconize:IconLabel.GestureRecognizers> <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding BackCommand}"></TapGestureRecognizer> </iconize:IconLabel.GestureRecognizers> </iconize:IconLabel> <Entry HorizontalOptions="FillAndExpand" Text="{Binding SearchText, Mode=TwoWay}" BackgroundColor="White " Placeholder="搜索..."> <Entry.Behaviors> <xamvvm:BaseEventToCommandBehavior EventName="Completed" Command="{Binding SearchCommand}"></xamvvm:BaseEventToCommandBehavior> <xamvvm:BaseEventToCommandBehavior EventName="TextChanged" Command="{Binding SearchTextChangedCommand}"></xamvvm:BaseEventToCommandBehavior> </Entry.Behaviors> </Entry> <iconize:IconLabel Text="fa-search" FontSize="Large" VerticalTextAlignment="Center" Margin="15, 0,15,0" TextColor="White"> <iconize:IconLabel.GestureRecognizers> <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding SearchCommand}"></TapGestureRecognizer> </iconize:IconLabel.GestureRecognizers> </iconize:IconLabel> </StackLayout> </Frame>

编写下方区域

下面可以看到分为两部分,一部分是热门搜索,一部分是搜索历史。但是还有一个问题,就是如果搜索框输入内容,整个下方区域应该变为一个显示搜索相关的listview,隐藏掉现有的热门搜索与搜索历史。

所以这里我们使用Grid来将搜索相关与第一个显示页面重叠起来,同时再使用一个Grid来将第一个显示页面分为四部分。

代码如下:

 <Grid> <ListView ItemsSource="{Binding SearchList}" SeparatorVisibility="None"> <ListView.Behaviors> <xamvvm:BaseEventToCommandBehavior EventName="ItemTapped" Command="{Binding SearchListTappedCommand}"></xamvvm:BaseEventToCommandBehavior> </ListView.Behaviors> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal"> <iconize:IconLabel Text="fa-search" Margin="15, 0, 15, 0" FontSize="Large" VerticalTextAlignment="Center"></iconize:IconLabel> <Label Text="{Binding .}" FontSize="Large" VerticalTextAlignment="Center"></Label> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> <Grid IsVisible="{Binding SearchList, Converter={StaticResource NoRecordConverter}}" Margin="15,0,15,0"> <Grid.RowDefinitions> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="10*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="10*"></RowDefinition> </Grid.RowDefinitions> <Label Text="大家都在看"></Label> <StackLayout Grid.Row="2" Orientation="Horizontal"> <Label Text="搜索历史" HorizontalOptions="StartAndExpand"></Label> <Label Text="清空历史" BackgroundColor="Red" TextColor="White" HorizontalOptions="End" IsVisible="{Binding HistoryItems, Converter={StaticResource ClearButtonShowConverter}}"> <Label.GestureRecognizers> <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding ClearHistoryCommand}"></TapGestureRecognizer> </Label.GestureRecognizers> </Label> </StackLayout> <dltag:TagEntryView Grid.Row="3" TagItems="{Binding HistoryItems}" TagTappedCommand="{Binding HistoryTappedCommand}" x:Name="TagView"> <dltag:TagEntryView.TagItemTemplate> <DataTemplate> <Frame OutlineColor="Black" Padding="10" HasShadow="False"> <Label Text="{Binding Name}"></Label> </Frame> </DataTemplate> </dltag:TagEntryView.TagItemTemplate> </dltag:TagEntryView> </Grid> </Grid>

这样就可以显示出我们需要的效果了:

Xaml全部代码如下:

<?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:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize" xmlns:xamvvm="clr-namespace:Xamvvm;assembly=Xamvvm.Forms" xmlns:converter="clr-namespace:BookReader.Converter;assembly=BookReader" xmlns:dltag="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.TagEntryView" x:Class="BookReader.View.SearchPage"> <ContentPage.Resources> <ResourceDictionary> <converter:NoRecordConverter x:Key="NoRecordConverter"></converter:NoRecordConverter> <converter:ClearButtonShowConverter x:Key="ClearButtonShowConverter"></converter:ClearButtonShowConverter> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <StackLayout Orientation="Vertical"> <Frame Padding="0,5,0,5" BackgroundColor="Blue"> <StackLayout Orientation="Horizontal"> <iconize:IconLabel Text="fa-chevron-left" FontSize="Large" VerticalTextAlignment="Center" Margin="15, 0,15,0" TextColor="White"> <iconize:IconLabel.GestureRecognizers> <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding BackCommand}"></TapGestureRecognizer> </iconize:IconLabel.GestureRecognizers> </iconize:IconLabel> <Entry HorizontalOptions="FillAndExpand" Text="{Binding SearchText, Mode=TwoWay}" BackgroundColor="White " Placeholder="搜索..."> <Entry.Behaviors> <xamvvm:BaseEventToCommandBehavior EventName="Completed" Command="{Binding SearchCommand}"></xamvvm:BaseEventToCommandBehavior> <xamvvm:BaseEventToCommandBehavior EventName="TextChanged" Command="{Binding SearchTextChangedCommand}"></xamvvm:BaseEventToCommandBehavior> </Entry.Behaviors> </Entry> <iconize:IconLabel Text="fa-search" FontSize="Large" VerticalTextAlignment="Center" Margin="15, 0,15,0" TextColor="White"> <iconize:IconLabel.GestureRecognizers> <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding SearchCommand}"></TapGestureRecognizer> </iconize:IconLabel.GestureRecognizers> </iconize:IconLabel> </StackLayout> </Frame> <Grid> <ListView ItemsSource="{Binding SearchList}" SeparatorVisibility="None"> <ListView.Behaviors> <xamvvm:BaseEventToCommandBehavior EventName="ItemTapped" Command="{Binding SearchListTappedCommand}"></xamvvm:BaseEventToCommandBehavior> </ListView.Behaviors> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal"> <iconize:IconLabel Text="fa-search" Margin="15, 0, 15, 0" FontSize="Large" VerticalTextAlignment="Center"></iconize:IconLabel> <Label Text="{Binding .}" FontSize="Large" VerticalTextAlignment="Center"></Label> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> <Grid IsVisible="{Binding SearchList, Converter={StaticResource NoRecordConverter}}" Margin="15,0,15,0"> <Grid.RowDefinitions> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="10*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="10*"></RowDefinition> </Grid.RowDefinitions> <Label Text="大家都在看"></Label> <StackLayout Grid.Row="2" Orientation="Horizontal"> <Label Text="搜索历史" HorizontalOptions="StartAndExpand"></Label> <Label Text="清空历史" BackgroundColor="Red" TextColor="White" HorizontalOptions="End" IsVisible="{Binding HistoryItems, Converter={StaticResource ClearButtonShowConverter}}"> <Label.GestureRecognizers> <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding ClearHistoryCommand}"></TapGestureRecognizer> </Label.GestureRecognizers> </Label> </StackLayout> <dltag:TagEntryView Grid.Row="3" TagItems="{Binding HistoryItems}" TagTappedCommand="{Binding HistoryTappedCommand}" x:Name="TagView"> <dltag:TagEntryView.TagItemTemplate> <DataTemplate> <Frame OutlineColor="Black" Padding="10" HasShadow="False"> <Label Text="{Binding Name}"></Label> </Frame> </DataTemplate> </dltag:TagEntryView.TagItemTemplate> </dltag:TagEntryView> </Grid> </Grid> </StackLayout> </ContentPage.Content></ContentPage>

更详细的代码可以去git自行下载,Xaml部分到此,代码部分下次继续。

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

 发表评论


表情