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

TabbedPageとは？

TabbedPageとは，タブ付きのページのことです。タブというのは次の画像の「TAB1」「TAB２」「TAB３」のように，画面の上部にタブのタイトルを表示して，そのタブごとにページの表示を切り替えることができます。「TAB1」と書かれているところをタップしてもページが切り替えることができますし，ページの内容が表示されているエリアで右や左にスワイプすることで，ページを切り替えることができます。ちょうどスマホで表示されたKindle本のページをめくるような操作と同じです。TabbedPageの場合はボタンを押してページを変更するパターンとは違い，存在するページが全体的にわかるので，使いようによっては，こちらのほうが使いやすいというケース発生すると思います。

TabbedPageの作り方

MainPageの削除

それではTabbedPageを作っていきましょう。VisualStudioでXamarin.Formsのプロジェクトを作りましょう。プロジェクトはAndroidと共通のプロジェクトだけでOKです。共通のプロジェクトにはMainPage.xamlが自動で生成され，初期表示されるページになっているはずです。今回このページは使わないので削除します。MainPage.xamlを選択して右クリックメニューから「削除」を選びましょう。

TabbedPageの追加

MainPageを削除したため，現在このプロジェクトにページは一つもありません。今からTabbedPageを追加していきます。ページを追加するときは，ページがどの程度存在するかを簡単に把握するためにも，一つのフォルダーにPageを追加していったほうがわかりやすいので，「Pages」というフォルダーを作成します。フォルダーの作成の仕方は，共通プロジェクトを右クリックして「追加」「新しいフォルダー」の順で選択します。作成された新しいフォルダーに「Pages」という名前を付ければページ用のフォルダーの作成は完了です。

それではPagesフォルダーにTabbedPageを追加します。共通プロジェクトを右クリックして「追加」から「新しい項目」を選択します。「Tabbed Page」を選択し，名前を「HomePage」にして追加します。これでTabbedPageの作成は完了です。

起動ページをTabbedPageにする

App.xaml.csを見てください。そこにはデフォルトでMainPageの設定をしている箇所がありますが，MainPageには先ほど削除したMainPage.xamlを設定するコーディングのままになっています。このままでは当然コンパイルエラーが出ているので，この部分を今作成した「HomePage」を設定するように変更します。ネームスペースはプロジェクト名＋Pagesになります。私のサンプルでは「X011.Pages.HomePage」という記述になります。

public App ()
{
	InitializeComponent();

	MainPage = new X011.Pages.HomePage();
}

起動する

これで準備は完了です。この状態でプログラムを実行しましょう。

このような画面が起動すれば成功です。画面上部の「TAB1」「TAB2」「TAB3」の部分をタップしてもページが変わりますし，ページの内容が表示される白い部分をKindleのページをめくるようにスワイプしてもページが移動します。

サンプルコード全体

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="X011.Pages.HomePage">
  <!--Pages can be added as references or inline-->
  <ContentPage Title="Tab 1" />
  <ContentPage Title="Tab 2" />
  <ContentPage Title="Tab 3" />
</TabbedPage>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace X011.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class HomePage : TabbedPage
    {
        public HomePage ()
        {
            InitializeComponent();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace X011
{
	public partial class App : Application
	{
		public App ()
		{
			InitializeComponent();

			MainPage = new X011.Pages.HomePage();
		}

		protected override void OnStart ()
		{
			// Handle when your app starts
		}

		protected override void OnSleep ()
		{
			// Handle when your app sleeps
		}

		protected override void OnResume ()
		{
			// Handle when your app resumes
		}
	}
}