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

【 Xamarin 記事一覧 】

1 コードによる方法

(1) タブバーコントローラの生成

アプリの起動時に最初に表示されるビューは、UIWindowのRootViewControllerにセットされたものですが、ここに、タブバーコントローラを設定します。
すると、図のように、表示ビューを持たないタブバーだけのアプリが作成されます。

[Register("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate {
    UIWindow window;
    public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
        window = new UIWindow(UIScreen.MainScreen.Bounds);
        //タブバーコントローラの生成
        var tabBarController = new UITabBarController();
        //タブバーコントローラをRootViewControllerに設定
        window.RootViewController = tabBarController;
        //windowをのキー画面に設定し表示状態にする
        window.MakeKeyAndVisible();

        return true;
    }
}

(2) ビューの追加

それぞれのタブに表示するビューは、タブバーコントローラ(UITabBarController)のViewControllersプロパティに配列（UIViewController[]）としてセットします。

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

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

        var tabBarController = new UITabBarController();
        window.RootViewController = tabBarController;

        window.MakeKeyAndVisible();

        //１つ目のビューの生成
        var tab1 = new UIViewController{
            Title = "Green",
            View ={BackgroundColor = UIColor.Green}
        };
        //２つ目のビューの生成
        var tab2 = new UIViewController{
            Title = "Orange",
            View ={BackgroundColor = UIColor.Orange}
        };
        //３つ目のビューの生成
        var tab3 = new UIViewController{
            Title = "Red",
            View ={BackgroundColor = UIColor.Red}
        };
        //タブバーコントローラのViewControllersにビューを設定する
        tabBarController.ViewControllers = new[]{tab1, tab2, tab3};


        return true;
    }
}

2 ストーリボードによる方法

「ファイル」-「新規作成」ｰ「新しいプロジェクト」ｰ「テンプレート」－「Vieual C#」- 「iOS」-「iPhone Storybord」-「tabbed Application」でプロジェクトを作成するとタブビューを使用したプロジェクトが生成されます。



新しくビューを追加するには、ツールボックスからView Controllerを追加し( ① )、続いてタブビューコントローラから新しく追加したビューにCtrlキーを押しながらマウスでつなぎます。( ② ) そして、ここで表示されるポップアップでは「Tab」を選択します。

タブの順番を変更するには、いったんセグエを削除して、先の要領で順番につなぎ直します。

3 アイコン・バッチ

対象ビューのプロパティTabBarItemでアイコンなどの設定が可能です。

//システムアイコンを設定
tab1.TabBarItem = new UITabBarItem(UITabBarSystemItem.Bookmarks, 0);

//タイトル文字と画像を設定
tab2.TabBarItem = new UITabBarItem("タイトル", UIImage.FromFile("icon.png"), 0);
            
//バッチを付ける
tab3.TabBarItem.BadgeValue = "TEST";

【 Xamarin 記事一覧 】