Xamarin.Forms でガワネイティブアプリを作るときのテンプレートプロジェクトを作る2
- 【第1回】日本語入力時の画面高さの調整
- 【第1回】ステータスバー、あるいは SafeArea(ノッチ部)の色
- 【次回以降予定】アプリ情報の Web 側への引き渡し
- 【次回以降予定】
<input type="xxx">
への対応 - 【次回以降予定】Back ボタンハンドリングの Web 側への移譲
- スプラッシュスクリーンおよび初回読み込み時の対応
実体がWebアプリであるため、起動してからアプリが使用可能になるまでに時間がかかるのは、ガワネイティブの弱点の一つです。 これはなんとかごまかしてユーザーに不快感を与えないようにしたいです。
ガワネイティブの起動にかかるプロセスは大きくわけて2つです。
- ネイティブアプリとしての起動から最初の画面が表示されるまで
- 最初の画面が表示されてから Web ページの読み込みが完了するまで
1 は通常のアプリでも必要なプロセス、2 はガワネイティブ特有の要件です。
まずは 1 を対応します。
こちらを参考にします。
Android 側プロジェクトの Resources/drawable/splash.xml
を追加して、次のように記述します。
splash.axml
次に、Resources/values/colors.xml
の colorPrimaryDark
の色を Web アプリのテーマ色に合わせます。
この例では #66BB6A
とします。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="launcher_background">#FFFFFF</color>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#66BB6A</color>
<color name="colorAccent">#FF4081</color>
</resources>
前述のリンクでは、スプラッシュスクリーン用の Theme と Activity を作るよう書かれていますが、ガワネイティブの場合少しサボることができます。
Resources/values/styles.xml
を開き、MainTheme.Base
に android:windowBackground
を追加します。
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowBackground">@drawable/splash</item>
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from https://aka.ms/material-colors -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#66BB6A</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>
</resources>
これでアプリ起動時に緑のスプラッシュスクリーンが表示されるようになります。
iOS プロジェクトには、最初から LaunchScreen.storyboard
がスプラッシュスクリーンとして使用されるよう設定されていますが、色が青になっているので、これを変更します。
Resources/LaunchScreen.storyboard
を開いて、Background
の色を #66BB6A
これは、
を適用して解決します。
今回のように WebView だけ対応すればよい場合は、 MainActivity.cs
に ```.UseWindowSoftInputModeAdjust()`` の行を追加してあげればよいみたいです。
// MainActivity.cs
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
Xamarin.Forms.Application.Current.On<Xamarin.Forms.PlatformConfiguration.Android>()
.UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize); // ←ここ!!
}
iOS の場合、前出のわたしのエントリをリライトして頂いた、
があるのですが、WebView だけ対応すればよい場合、特にやることは無いですw