読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Xamarin.Forms でアプリ起動時に QuickStart 的な View を表示してみた

Xamarin Xamarin.Forms

こんにちは。エクセルソフトの田淵です。

f:id:ytabuchi:20150728113417p:plain:w150 f:id:ytabuchi:20150728113437p:plain:w150 f:id:ytabuchi:20150728113452p:plain:w150

いわゆる初回起動時に出てくるこういうやつです。

どうやるの?

今回は、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 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

以上です。