Xamarin.Formsでスプラッシュスクリーン
スプラッシュスクリーンは起動時に表示する画面.
以下のアプリを参考にする.
このアプリでは以下の流れでスプラッシュスクリーンを使っていた.
- App.xaml.csで
MainPage = new SplashScreen();
- SplashScreen.xamlは中央にpngを表示させるだけ
- コードビハインドではそのpngをアニメーション
- 同時にサンプルデータの読み込みなどを行わせる
- メインページをセット.
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でアニメーションなんていいかも.