xamarin forms 实现APP引导页

本篇文章讲如何实现 app 引导页。一个好的引导页可以帮助用户快速了解整个 app 的功能。

---

此次用到的控件是 CarouselView ，官方文档对 CarouselView 的解释如下：

CarouselView是一种用于在可滚动的布局中呈现数据的视图，用户可在此视图中通过一系列项进行切换。 默认情况下，CarouselView 会以水平方向显示其项。 屏幕上将显示一项，其中包含滑动手势，导致在项集合中向前和向后导航。
CarouselView 在 Xamarin. Forms 4.3 中提供。

接下来，上代码

• Layout 布局代码 TutorialPage.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"
             x:Class="TutorialApp.Views.TutorialPage">
    <AbsoluteLayout>
        <CarouselView x:Name="carouseView" IndicatorView="indicatorView" CurrentItemChanged="OnCurrentChange"
                      AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
            <CarouselView.ItemsSource>
                <x:Array Type="{x:Type Image}">
                    <Image Source="guide_image1"/>
                    <Image Source="guide_image2"/>
                    <Image Source="guide_image3"/>
                    <Image Source="guide_image4"/>
                </x:Array>
            </CarouselView.ItemsSource>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Source}" Aspect="AspectFill"/>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <Image x:Name="arrowLeft" Source="arrow_left" Aspect="AspectFill"
               AbsoluteLayout.LayoutFlags="PositionProportional"
               AbsoluteLayout.LayoutBounds="0, .3, 30, 40"/>
        <Image x:Name="arrowRight" Source="arrow_right" Aspect="AspectFill"
               AbsoluteLayout.LayoutFlags="PositionProportional"
               AbsoluteLayout.LayoutBounds="1, .3, 30, 40"/>
        <IndicatorView 
            x:Name="indicatorView"
            IndicatorColor="LightGray"
            SelectedIndicatorColor="Accent"
            HorizontalOptions="Center"
            IndicatorSize="10"
            AbsoluteLayout.LayoutFlags="PositionProportional"
            AbsoluteLayout.LayoutBounds=".5, .75, 100, 30"/>
        <Button Text="Skip" BackgroundColor="LightGray" FontSize="15" CornerRadius="5"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds=".96, .02, 60, 40"
                Clicked="GoHomePage"/>
        <Button x:Name="button" Text="Go Home" TextColor="White" FontSize="18"
                BackgroundColor="Transparent" BorderColor="White" 
                BorderWidth="2" CornerRadius="5" Padding="20, 0"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds=".5, .82, 150, 40"
                Clicked="GoHomePage"/>
    </AbsoluteLayout>
</ContentPage>

• TutorialPage.xaml.cs 代码如下：

namespace TutorialApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TutorialPage : ContentPage
    {
        public TutorialPage()
        {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
        }
        async void GoHomePage(object sender, EventArgs args)
        {
            await Navigation.PushAsync(new HomePage());
        }
        private void OnCurrentChange(object sender, EventArgs args)
        {
            arrowLeft.IsVisible = carouseView.Position != 0;
            arrowRight.IsVisible = carouseView.Position != 3;
            button.IsVisible = carouseView.Position == 3;
        }
    }
}

最终的实现效果如下：

untitled.gif

gif图用模拟器录的，看起来有些卡。如果有疑问的地方可以发私信一起交流。

以上。