C#Xamarin.Formsでスマホ開発#12 TabbedPageの中身の作り方

前回はTabbedPageを作りました。3つのタブを作成して，ページが切り替わる様子を確認しましたが，各ページの中身がなかったので，あまりページが切り替わっていることが実感できなかったと思います。今回はその中身を作っていきます。完成イメージは次のような感じです。

３つのタブを作りますが，タイトルはそれぞれ「Menu」「Mail」「List」とします。画像を見ていただくとわかると思いますが，タイトルにはそれぞれアイコンが表示されています。こういったアイコンを表示するだけで，一気に「スマホソフトを作成している」と実感が出ます。業務用のソフトは味気ないものが多いですが，スマホアプリはおしゃれな感じで作りたいですよね。今回紹介する画像がおしゃれかどうかはわかりませんが，この画像はフリーのモノを適当に探してきて使っています。

仕様は3つのタブを作成し，それぞれのタイトルを「Menu」「Mail」「List」にすることと，タイトルにアイコンも合わせて表示する。そしてページの中身には，そのページを示す文字を表示するというシンプルなものです。それでは作り方を見ていきましょう。

タブの削除

前回TabbedPageを作ったときに「HomePage」のXamlにタブが3つ表示されるためのコードがありましたが，今回は使用しないため削除します。

ページの追加

タブの中に表示するページをそれぞれ作成します。「MenuPage」「MailPage」「ListPage」をそれぞれContentPageで作成します。作り方はいつもと同じですが，手順は共通のプロジェクトを右クリックして「追加」「新しい項目の追加」を選択し，ContentPageを選びます。名前はそれぞれ「MenuPage」「MailPage」「ListPage」として3ページ作成します。ページを作成したら，それぞれのページが識別できるようにXamlにデフォルトで作成されるラベルにそれぞれのページ名を記述しましょう。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="X011.Pages.MenuPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Menu page!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="X011.Pages.MailPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Mail page!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="X011.Pages.ListPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="List page!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

HomePageの編集

HomePage.xamlに次のように記述します。3行目に

「xmlns:pages=”clr-namespace:X011.Pages;assembly=X011″」が追加されていることに注意してください。さらに「X011.Pages」は現在「MenuPage」等を作成したネームスペースを記述しているので，あなたのプロジェクトの環境などによりネームスペースが異なる場合は，環境にあったネームスペースにしてください。「assembly=X011」の部分もあなたの作ったプロジェクトの名前を入れてください。要するにXamarin.FormsのプロジェクトをX011で作成し，「Pages」というフォルダーを作成し，その中に「MenuPage」等を作成している場合は，私のサンプルと同じコードでよいという事です。

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:pages="clr-namespace:X011.Pages;assembly=X011"
            x:Class="X011.Pages.HomePage">
    <!--Pages can be added as references or inline-->

    <pages:MenuPage Title="Menu" Icon="menu.png"/>
    <pages:MailPage Title="Mail" Icon="mail.png"/>
    <pages:ListPage Title="List" Icon="list.png"/>

</TabbedPage>

3行目の「pages」の定義があることで，その後の7行目以降のコードが記述できるようになります。7行目以降の「pages:MenuPage」等で始まるコードはタブに表示するページ，タイトル，アイコンを指定しています。この部分を2行（MenuPageとMailPageのみなど）にすると表示されるタブ数は２つになります。

今回はこのように３つのタブを指定しているので，実行すると３つのタブが表示されます。

アイコン画像の設置

アイコンの画像を設置していないので，このままではアイコンが表示できません。画像はAndroidプロジェクトの「Resources」フォルダーの配下の「drawable」フォルダーに置きます。

この状態で実行してみましょう。

３つのタブにそれぞれタブのタイトルとアイコンが表示されています。さらにタブを切り替えると，それぞれのページ名が中央に表示されます。