読者です 読者をやめる 読者になる 読者になる

SIN@SAPPOROWORKSの覚書

C#を中心に、夜な夜な試行錯誤したコードの記録です。

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

【 Xamarin 記事一覧 】


1 コードによる方法

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

f:id:furuya02:20140704042641p:plain:w150:left
アプリの起動時に最初に表示されるビューは、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) ビューの追加

f:id:furuya02:20140704042717p:plain:w150:leftf:id:furuya02:20140704042718p:plain:w150:leftf:id:furuya02:20140704042715p:plain:w150:left
それぞれのタブに表示するビューは、タブバーコントローラ(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();

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


        return true;
    }
}

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

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


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

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


3 アイコン・バッチ

f:id:furuya02:20140704042829p:plain:w250:left
対象ビューのプロパティTabBarItemでアイコンなどの設定が可能です。

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

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

【 Xamarin 記事一覧 】