shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Formsでスプラッシュスクリーン

スプラッシュスクリーンは起動時に表示する画面.

以下のアプリを参考にする.

github.com

このアプリでは以下の流れでスプラッシュスクリーンを使っていた.

  1. App.xaml.csでMainPage = new SplashScreen();
  2. SplashScreen.xamlは中央にpngを表示させるだけ
  3. コードビハインドではそのpngをアニメーション
  4. 同時にサンプルデータの読み込みなどを行わせる
  5. メインページをセット.
            MainThread.BeginInvokeOnMainThread(() =>
            {
                Application.Current.MainPage = new MainPage();
            });

なるほど.

ロゴのアニメーションの部分は以下のとおりなのだけれど,この書き方について調べたい.

        void StartPulseAnimation()
        {
            var animation = new Animation();

            animation.WithConcurrent((f) => logo.Scale = f, logo.Scale, logo.Scale, Easing.Linear, 0, 0.1);
            animation.WithConcurrent((f) => logo.Scale = f, logo.Scale, logo.Scale * 1.05, Easing.Linear, 0.1, 0.4);
            animation.WithConcurrent((f) => logo.Scale = f, logo.Scale * 1.05, logo.Scale, Easing.Linear, 0.4, 1);

            Device.BeginInvokeOnMainThread(() =>
            {
                logo.Animate("Pulse", animation, 16, 1000, repeat: () => true);
            });
        }

ちょっとやってみる

ContentPageでSplashPage用意する.

SplashPageで1.5秒間インジケータを表示させた後,メインのアプリケーションとなるShellを表示させる.

App.xaml.csファイルで,開始ページとしてSplashPageを指定する.

        public App()
        {
            InitializeComponent();

            MainPage = new SplashPage();
        }

SplashPage.xamlはActivityIndicatorを表示するだけ.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XFShellLoginFlow.Views.SplashPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <ContentPage.Content>
        <StackLayout>
            <ActivityIndicator
                HorizontalOptions="CenterAndExpand"
                IsRunning="True"
                IsVisible="True"
                VerticalOptions="CenterAndExpand"
                Color="Red" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Splash.xaml.csではOnAppearingをオーバーライドして,ページが表示されてから1.5秒間待った後にShellを表示する.

    public partial class SplashPage : ContentPage
    {
        public SplashPage()
        {
            InitializeComponent();
        }
        
        protected override async void OnAppearing()
        {
            base.OnAppearing();

            //Initialize something you want here
            await Task.Delay(1500);

            //Transition to FirstPage
            App.Current.MainPage = new AppShell();
        }
    }

SplashPageに表示する内容は自由にアレンジすればよい.

ロゴでも良いし,アニメーションでもよいし,挨拶文でもよいだろう.

Lottieでアニメーションなんていいかも.