こんにちは。エクセルソフトの田淵です。
いわゆる初回起動時に出てくるこういうやつです。
どうやるの?
今回は、NavigationPage で呼び出すページを AbsoluteLayout で作り、下の StackLayout の上に、黒背景色で Opacity を低めにした ContentView を配置し、更にその上にレイヤーを置きました。
閉じる ボタンで QuickStart の画面を閉じたら二度と表示しないように、Properties Dictionary に bool 値を保存して、起動時に QuickStart レイヤーを表示するかを確認しています。
解決できていない問題
画面を見ればわかるんですが、NavigationPage 内の AbsoluteLayout 上に View を配置しているので QuickStart のレイヤーが画面全体に出せていません。妥協してまぁいいかなーとしていますが、悔しいです。どなたか良い方法を教えてください。
コード
new NavigatioPage(new StartPage())
で呼び出します。
後は StartPage にズラズラ書いてしまいましたが、ContentView を別クラスにして呼び出しても大丈夫そうです。(ただ、その場合、qsl の IsVisible を上手く参照できなかったのは私の力不足です。。)
public StartPage() { // 矢印の先のボタンです。 ToolbarItems.Add(new ToolbarItem { Text = "検索", Icon = "Search.png", }); ToolbarItems.Add(new ToolbarItem { Text = "設定", Icon = "Setting.png", }); // AbsoluteLayout を定義します。 AbsoluteLayout abs = new AbsoluteLayout { }; // こちらが下の View で、 ml = new StackLayout { BackgroundColor = Color.White, Padding = 15, Children = { ~省略~ }, }; // こちらが上に表示される View です。 // 黒背景を最初に置いて、 bl = new ContentView { BackgroundColor = Color.Black, Opacity = 0.65d, }; // 更に上に View を被せました。 qsl = new ContentView { Content = new StackLayout { Children = { // 画像で誤魔化しますw new Image { Source = "QuickStart.png", WidthRequest = 250, HorizontalOptions = LayoutOptions.End, }, new Image { Source = "QuickStartSwipe.png", WidthRequest = 340, }, // 閉じると Application Properties に bool 値を保存します。 new Button { Text = "閉じる", VerticalOptions = LayoutOptions.EndAndExpand, Command = new Command (()=>{ qsl.IsVisible = false; bl.IsVisible = false; qslVisible = false; Application.Current.Properties["qsl"] = qslVisible; }), }, } } }; // AbsoluteLayout にコントロールを追加しますがその際に // Properties Dictionary をチェックして QuickStart Layer を追加しています。 // サンプルでは Device.OS == TargetPlatform.WinPhone のチェックもしています。 abs.Children.Add(ml); if (Application.Current.Properties.ContainsKey("qsl")) { var bqsl = (bool)Application.Current.Properties["qsl"]; if (bqsl) abs.Children.Add(qsl); } else { abs.Children.Add(qsl); } Title = "QuickStartLayer"; Content = abs; SizeChanged += OnPageSizeChanged; } /// <summary> /// 画面サイズ変更時(起動して画面が表示される時)に呼び出されます。この後でないと画面サイズが取得できません。 /// </summary> /// <param name="sender"></param> /// <param name="args"></param> void OnPageSizeChanged(object sender, EventArgs args) { var w = this.Width; var h = this.Height; AbsoluteLayout.SetLayoutFlags(ml, AbsoluteLayoutFlags.PositionProportional); AbsoluteLayout.SetLayoutBounds(ml, new Rectangle(0d, 0d, w, h)); AbsoluteLayout.SetLayoutFlags(qsl, AbsoluteLayoutFlags.PositionProportional); AbsoluteLayout.SetLayoutBounds(qsl, new Rectangle(0d, 0d, w, h)); }
Forms でも頑張れそうな気がしてきました。
いかがでしょうか。引き続き色々やってみたいと思います!
関連エントリー
- Xamarin.Forms の NavigationPage に ToolbarItem を追加するには - Xamarin 日本語情報
- Xamarin.Forms でアプリの設定情報を保存するには (Properties Dictionary 使用) - Xamarin 日本語情報
- Xamarin.Forms で NavigationBar の色を変更する - Xamarin 日本語情報
Xamarin 気になった方は
是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソース や JXUG リンクページ に参考資料を纏めてますので併せてどうぞ。
Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。
以上です。