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

当サイトではアフィリエイト広告を利用しています。

Xamarin.Formsでスマホアプリ開発

TabbedPageとは?

TabbedPageとは,タブ付きのページのことです。タブというのは次の画像の「TAB1」「TAB2」「TAB3」のように,画面の上部にタブのタイトルを表示して,そのタブごとにページの表示を切り替えることができます。「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
		}
	}
}