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

Xamarin 日本語情報

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

Xamarin.Forms の TabbedPage について

Xamarin.Forms のタブページについて調べましたので備忘録として残します。

タブページの実装方法は Xamarin のサンプル Form Gallery の TabbedPageDemoPage のように ItemSource, ItemTemplate を使用する方法と、 以下のサンプルのように TabbedPage を new して、Children にそれぞれのページを指定する方法があるようです。

iOS プロジェクトの Resources/xxx.png を配置し、各ページの Icon Property にファイル名を指定すると iOS のタブのアイコンになります。png のサイズは良く分かっていませんが、30px だとちょうどいい感じでした。(iOS は 40px が普通ですかね?)

なお、この画像リソースは同じファイルを Android プロジェクトの Resources/drawable/xxx.png に配置しておけば PCL から参照できそうな感じがします。

using Xamarin.Forms;

public static Page GetMainPage ()
{   

    var tabPage1 = new ContentPage () { 
        Title = "Page 1",
        Icon = "1.png",
        Content = new Label { 
            Text = "Page 1 Label",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
        },
    };

    var label = new Label { 
        Text = "Page 2 Label",
        TextColor = Color.White,
        HorizontalOptions = LayoutOptions.Center,
    };

    var button = new Button {
        Text = "Page Name",
        HorizontalOptions = LayoutOptions.CenterAndExpand,
    };

    var tabPage2 = new ContentPage () { 
        Title = "Page 2",
        Icon = "2.png",
        Content = new StackLayout {
            Children = {
                label,
                button,
            },
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
        },
        BackgroundColor = Color.FromHex("666666"),
    };

    var mainPage = new TabbedPage { 
        Children = {
            tabPage1,
            tabPage2,
        },
    };

    button.Clicked += (sender, e) => {
        mainPage.DisplayAlert("Alert Title", mainPage.CurrentPage.Title + " is selected.", "OK", "Cancel");
    };

    return mainPage;

こんな感じです。

スクリーンショット 2014-06-16 00.24.14.png

以上です。