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

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

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

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」という記述になります。

起動する

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

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

サンプルコード全体

 

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。