Xamarin.iOS のタブバーとタブバーコントローラー

[アーティクル]
03/21/2017

iOS ではタブ付きアプリケーションを使って複数の画面に特定の順序でアクセスできるユーザーインターフェイスをサポートします。この UITabBarController クラスを使用すると、アプリケーションにこのようなマルチスクリーンシナリオのサポートを簡単に含めることができます。 UITabBarController はマルチスクリーン管理を行うため、アプリケーション開発者が各画面の詳細に集中できるようになります。

通常、タブ付きアプリケーションは UITabBarController がメインウィンドウの RootViewController となるように構築されます。ただし、コードを少し追加することで、タブ付きアプリケーションを他の初期画面に連続して使用することもできます。たとえば、アプリケーションが最初にログイン画面を表示し、その後にタブ付きインターフェイスを表示するシナリオなどです。

このページでは、タブがアプリケーションビュー階層のルートにある場合と、非 RootViewController にある場合の両方のシナリオについて説明します。

UITabBarController の概要

UITabBarController は、タブ付きアプリケーション開発を次の方法でサポートします。

複数のコントローラーを追加できるようにする。
ユーザーがコントローラーとそのビューを切り替えできるように、UITabBar クラスを介してタブ付きユーザーインターフェイスを提供します。

コントローラーは、UIViewController 配列である ViewControllers プロパティを通じて UITabBarController に追加されます。 UITabBarController 自体は、適切なコントローラーの読み込みを処理し、選択されたタブに基づいてビューを表示します。

タブは UITabBarItem クラスのインスタンスで、UITabBar インスタンスに含まれます。各 UITabBar インスタンスには、各タブのコントローラーの TabBarItem プロパティを使用してアクセスできます。

UITabBarController の使用法を理解するために、それを使った簡単なアプリケーションを構築する方法について説明します。

タブ付きアプリケーションのチュートリアル

このチュートリアルでは、次のアプリケーションを作成します。

Visual Studio for Mac には既にタブ付きアプリケーションテンプレートが用意されていますが、この例では、アプリケーションがどのように構築されるかをより理解するために、空のプロジェクトから始めます。

アプリケーションの作成

それでは、新しいアプリケーションの作成を始めます。

Visual Studio for Mac で [ファイル] > [New] (新規) > [ソリューション] メニュー項目を選択し、次に示すように [iOS] > [アプリ] > [空のプロジェクト] テンプレートを選択し、プロジェクトに TabbedApplication という名前を付けます。

UITabBarController の追加

次に、[ファイル] > [New File] (新しいファイル) から、General : Empty Class テンプレートを選択して空のクラスを追加します。次に示すように、ファイルに TabController という名前を付けます。

TabController クラスには、配列 UIViewControllers を管理する UITabBarController の実装が含まれます。ユーザーがタブを選択すると、UITabBarController には適切なビューコントローラーのビューが表示されます。

UITabBarController を実装するには、次の操作を行う必要があります。

TabController の基底クラスを UITabBarController に設定します。
UIViewController インスタンスを作成し、TabController に追加します。
TabController の ViewControllers プロパティに割り当てられた配列に UIViewController インスタンスを追加します。

次のコードを TabController クラスに追加し、これらの手順を実行します。

using System;
using UIKit;

namespace TabbedApplication {
    public class TabController : UITabBarController {

        UIViewController tab1, tab2, tab3;

        public TabController ()
        {
            tab1 = new UIViewController();
            tab1.Title = "Green";
            tab1.View.BackgroundColor = UIColor.Green;

            tab2 = new UIViewController();
            tab2.Title = "Orange";
            tab2.View.BackgroundColor = UIColor.Orange;

            tab3 = new UIViewController();
            tab3.Title = "Red";
            tab3.View.BackgroundColor = UIColor.Red;

            var tabs = new UIViewController[] {
                tab1, tab2, tab3
            };

            ViewControllers = tabs;
        }
    }
}

それぞれの UIViewController インスタンスに対して、UIViewController の Title プロパティを設定していることに注目してください。コントローラーが UITabBarController 追加にされると、UITabBarController は各コントローラーの Title を読み取り、次のように関連するタブのラベルに表示します。

TabController を RootViewController として設定する

コントローラーがタブに配置される順序は、ViewControllers 配列に追加される順序に従います。

UITabController を最初の画面として読み込むには、次の AppDelegate のコードのように、ウィンドウの RootViewController にする必要があります。

[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    UIWindow window;
    TabController tabController;

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        window = new UIWindow (UIScreen.MainScreen.Bounds);

        tabController = new TabController ();
        window.RootViewController = tabController;

        window.MakeKeyAndVisible ();

        return true;
    }
}

ここでアプリケーションを実行すると、UITabBarController は既定で最初のタブが選択された状態で読み込まれます。他のタブを選択すると、次のエンドユーザーが 2 番目のタブを選択した場合のように、関連するコントローラーのビューが UITabBarController, によって表示されます。

表示されている 2 番目のタブ

TabBarItems の変更

これでタブ付きアプリケーションを実行できるようになったので、表示される画像とテキストを変更し、タブのひとつにバッジを追加するために TabBarItem を修正してみましょう。

システム項目の設定

まず、システム項目を使用するように最初のタブを設定します。 TabController のコンストラクターで、tab1 インスタンスにコントローラーの Title を設定する行を削除し、次のコードに置き換えて、コントローラーの TabBarItem プロパティを設定します。

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0);

UITabBarSystemItem を使用して UITabBarItem を作成すると、タイトルと画像は iOS によって自動的に提供されます。次のスクリーンショットに示すように、最初のタブに [お気に入り] アイコンとタイトルが表示されます。

星アイコンが付いた最初のタブ

画像の設定

システム項目の使用に加えて、UITabBarItem のタイトルと画像をカスタム値に設定できます。たとえば、tab2 というコントローラーの TabBarItem プロパティを設定するコードを次のように変更します。

tab2 = new UIViewController ();
tab2.TabBarItem = new UITabBarItem ();
tab2.TabBarItem.Image = UIImage.FromFile ("second.png");
tab2.TabBarItem.Title = "Second";
tab2.View.BackgroundColor = UIColor.Orange;

上記のコードでは、second.png という名前の画像がプロジェクトのルート (または Resources ディレクトリ) に追加されていることを前提としています。すべての画面密度をサポートするには、次に示すように 3 つの画像が必要です。

プロジェクトに追加されたイメージ

推奨されるサイズは、画像のスタイル (円形、正方形、幅、高さ) によって異なります。

Image プロパティは second.png というファイル名に設定するだけでよく、iOS は必要に応じて、より解像度の高いファイルを自動的に読み込みます。詳細については、「画像の操作」をご覧ください。既定では、タブバーの項目は灰色で表示され、選択すると青い濃淡で表示されます。

タイトルのオーバーライド

Title プロパティが TabBarItem に直接設定されている場合は、コントローラー自身で Title に設定された値がオーバーライドされます。

このスクリーンショットの 2 番目 (中央) タブには、カスタムタイトルと画像が表示されます。

四角形のアイコンが表示された 2 番目のタブ

バッジ値の設定

タブにはバッジを表示することもできます。たとえば、次のコード行を追加して、3 番目のタブにバッジを設定します。

tab3.TabBarItem.BadgeValue = "Hi";

これを実行すると、次に示すように、タブの左上隅に "Hi" という文字列を含む赤いラベルが表示されます。

バッジは、多くの場合、未読や新しい項目を示す番号を表示するために使用されます。バッジを削除するには、次に示すように BadgeValue に null を設定します。

tab3.TabBarItem.BadgeValue = null;

RootViewController 以外のシナリオでのタブ

上記の例では、UITabBarController がウィンドウの RootViewController である場合の操作方法を示しました。この例では、UITabBarController が RootViewController でない場合に使用する方法を検討し、ストーリーボードを使用して作成する方法を示します。

初期画面の例

このシナリオでは、最初の画面は、UITabBarController ではないコントローラーから読み込まれます。ユーザーがボタンをタップして画面を操作すると、同じビューコントローラーが UITabBarController に読み込まれ、ユーザーに表示されます。次のスクリーンショットには、アプリケーションフローが示されています。

この例の新しいアプリケーション作成を始めましょう。今回も [iPhone] > [アプリ] > [Empty Project (C#)] (空のプロジェクト (C#)) のテンプレートを使用し、プロジェクト名を InitialScreenDemo とします。

この例では、ストーリーボードを使用してビューコントローラーをレイアウトします。ストーリーボードを追加するには:

プロジェクト名を右クリックし、[追加] > [新しいファイル] を選びます。
[New File] (新しいファイル) ダイアログが表示されたら、[iOS] > [Empty iPhone Storyboard] (空の iPhone ストーリーボード) に移動します。

次に示すように、この新しいストーリーボード MainStoryboard を呼び出してみましょう。

ストーリーボード以外のファイルにストーリーボードを追加する場合は、いくつかの重要な手順に注意してください。この手順については、「ストーリーボードの概要」ガイドをご覧ください。次のとおりです。

ストーリーボード名を Info.plist の [メインインターフェイス] セクションに追加します。
App Delegate で次のコードを使用して、Window メソッドをオーバーライドします。
```
public override UIWindow Window {
    get;
    set;
}
```

この例では、3 つのビューコントローラーが必要になります。 ViewController1 の名前が付いたものは、最初のビューコントローラーとして、最初のタブで使用されます。他の 2 つ (ViewController2 および ViewController3 の名前が付いたもの) は、2 番目のタブと 3 番目のタブでそれぞれ使用されます。

MainStoryboard.storyboard ファイルをダブルクリックしてデザイナーを開き、3 つのビューコントローラーをデザインサーフェイスにドラッグします。それぞれのビュー・コントローラーに、上記の名前に対応する独自のクラスを持たせるため、次のスクリーンショットのように、[Identity] (識別) > [Class] (クラス) の下にその名前を入力します。

Visual Studio for Mac では、必要なクラスとデザイナーファイルが自動的に生成されます。これは、次に示すように Solution Pad で確認できます。

UI の作成

次に、Xamarin iOS デザイナーを使用して、ViewController のビューごとに単純なユーザーインターフェイスを作成します。

右側の ToolBox から ViewController1 に Label と Button をドラッグします。次に、Properties Pad を使用して、コントロールの名前とテキストを次のように編集します。

ラベル : Text = 1
ボタン : Title = ユーザーが最初のアクションを実行する

TouchUpInside イベントのボタンの可視性を制御するため、裏のコードでそれを参照する必要があります。次のスクリーンショットに示すように、Properties Pad の [名前]aButton で識別してみましょう。

デザインサーフェイスは、次のスクリーンショットのようになります。

ViewController2 と ViewController3 にラベルを付けて、もう少し詳しく説明し、テキストをそれぞれ 'Two' と 'Three' に変更します。これは、見ているタブ/ビューをユーザーに強調表示します。

ボタンの接続

アプリケーションの初回起動時に、ViewController1 を読み込みます。ユーザーがボタンをタップすると、ボタンが非表示になり、UITabBarController を最初のタブの ViewController1 インスタンスに読み込みます。

ユーザーが aButton をリリースする場合、TouchUpInside イベントをトリガーする必要があります。ボタンを選択し、[プロパティ] パッドの [イベント] タブでイベントハンドラー InitialActionCompleted を宣言して、コードで参照できるようにします。これを次のスクリーンショットに示します。

次に、InitialActionCompleted イベントが発生した場合にボタンを非表示にするよう、ビューコントローラーに指示する必要があります。 ViewController1 に、次の部分メソッドを追加します。

partial void InitialActionCompleted (UIButton sender)
{
    aButton.Hidden = true;  
}

ファイルを保存し、アプリケーションを実行します。画面 1 が表示され、タッチした場合、ボタンが非表示になります。

タブバーコントローラーの追加

これで、最初のビューが期待どおりに動作するようになりました。次に、ビュー 2 と 3 と一緒に、UITabBarController に追加します。デザイナーでストーリーボードを開いてみましょう。

ツールボックス で、[Controllers & Objects] (コントローラーとオブジェクト) からタブバーコントローラーを検索し、これをデザインサーフェイスにドラッグします。次のスクリーンショットに示すように、タブバーコントローラーは UI レスであるため、既定で 2 つのビューコントローラーが表示されます。

下部にある黒いバーを選択し、Delete キーを押して、これらの新しいビューコントローラーを削除します。

ストーリーボードでは、セグエを使用して TabBarController とビューコントローラーの間の遷移を処理できます。初期ビューを操作した後、ユーザーに表示される TabBarController に読み込みます。これをデザイナーで設定しましょう。

Ctrl キーを押しながらクリックし、ボタンから TabBarController にドラッグします。マウスを上に置くと、コンテキストメニューが表示されます。モーダルセグエを使用します。

各タブを設定するには、次に示すように、TabBarController からビュー・コントローラーを 1 つから 3 つまで順番に Ctrl キーを押しながらクリックし、コンテキスト・メニューから [リレーションシップ] タブを選択します。

ストーリーボードは次のスクリーンショットのようになります。

タブバー項目の 1 つをクリックしてプロパティパネルを調べると、次に示すようにさまざまなオプションが表示されます。

これを使用して、バッジ、タイトル、iOS 識別子などの特定の属性を編集できます。

ここでアプリケーションを保存して実行すると、ViewController1 インスタンスが TabBarController に読み込まれた場合にボタンが再び表示されます。これを修正するには、現在のビューに親ビューコントローラーがあるかどうかを確認します。その場合は、TabBarController 内に存在することがわかっているため、ボタンを非表示にする必要があります。 ViewController1 クラスに次のコードを追加してみましょう。

public override void ViewDidLoad ()
{
    if (ParentViewController != null){
        aButton.Hidden = true;
    }
}

アプリケーションが実行され、ユーザーが最初の画面のボタンをタップすると、UITabBarController が読み込まれ、次のように最初の画面のビューが最初のタブに配置されます。

まとめ

この記事では、アプリケーションで UITabBarController を使用する方法について説明しました。各タブにコントローラーを読み込む方法と、タイトル、画像、バッジなどのタブにプロパティを設定する方法について説明しました。次に、ストーリーボードを使用して、UITabBarController がウィンドウの RootViewController でない場合、実行時に読み込む方法を調べました。

次の方法で共有

Xamarin.iOS のタブバーとタブバーコントローラー

UITabBarController の概要

タブ付きアプリケーションのチュートリアル

アプリケーションの作成

UITabBarController の追加

TabController を RootViewController として設定する

TabBarItems の変更

システム項目の設定

画像の設定

タイトルのオーバーライド

バッジ値の設定

RootViewController 以外のシナリオでのタブ

初期画面の例

UI の作成

ボタンの接続

タブバーコントローラーの追加

まとめ

その他のリソース

次の方法で共有

Xamarin.iOS のタブ バーとタブ バー コントローラー

UITabBarController の概要

タブ付きアプリケーションのチュートリアル

アプリケーションの作成

UITabBarController の追加

TabController を RootViewController として設定する

TabBarItems の変更

システム項目の設定

画像の設定

タイトルのオーバーライド

バッジ値の設定

RootViewController 以外のシナリオでのタブ

初期画面の例

UI の作成

ボタンの接続

タブ バー コントローラーの追加

まとめ

関連リンク

その他のリソース

Xamarin.iOS のタブバーとタブバーコントローラー

タブバーコントローラーの追加