Xamarin StudioでiOSアプリ開発のチュートリアルをやってみた。

今日の朝チュートリアルは、tabbed_applicationsの作成。

詳細はコチラ

完成品はこんな感じ。

タブボタンを押すとUIViewが切り替わるという内容。 今回はemptyテンプレートからの作成で、xibやstoryboardは使いません。

emptyProject作成後に、新規クラスの作成 （ソリューションエクスプローラ＞右クリック＞追加＞新しいファイル）

ファイル名は、「UITabBarController」

追加したファイルを編集。

usingを追加。MonoTouch.UIKitを読み込む。

using MonoTouch.UIKit;

TabBarControllerクラスはUITabBarControllerを継承するよう修正。

public class TabBarController: UITabBarController 
{
}

AppDelegate.csを修正し、作成したTabBarControllerをwindow.RootViewControllerに設定。

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

    //↓追加
    tabBarController = new TabBarController ();
    window.RootViewController = tabBarController;   
    //↑追加

    window.MakeKeyAndVisible ();
    return true;
}   

これでひとまず作成した、TabBarControllerが読み込まれる。 実行するとこんな画面。タブが表示されて画面真っ黒。

TabBarControllerにコンストラクタを追加

       //タブを押したときに表示されるUIViewControllerの変数をclass変数として持つ
        UIViewController tab1;

        public TabBarController ()
        {
            //UIViewControllerのインスタンスを生成してtab1に設定
            tab1 = new UIViewController();

            //UIViewControllerの背景を白に
            tab1.View.BackgroundColor = UIColor.White;

            //タブを配列にしてViewControllersに設定
            var tabs = new UIViewController { tab1 };
            this.ViewControllers = tabs;
        }

ViewControllersはUITabBarControllerのプロパティで、管理してるUIViewが入るのだと思います。 チュートリアルではthisを省略しているが、ここでは意味が分かるようにthisを追加しました。

これで実行すると、

これじゃ寂しいのでタブに日本語をつけてみます。

       //タブを押したときに表示されるUIViewControllerの変数をclass変数として持つ
        UIViewController tab1;

        public TabBarController ()
        {
            //UIViewControllerのインスタンスを生成してtab1に設定
            tab1 = new UIViewController();

            //UIViewControllerの背景を白に
            tab1.View.BackgroundColor = UIColor.White;

            //タブのタイトルを追加
            tab1.TabBarItem.Title = "日本語タブ";

            //タブを配列にしてViewControllersに設定
            var tabs = new UIViewController { tab1 };
            this.ViewControllers = tabs;
        }

ちなみに、tab1.TabBarItemに画像を入れたりシステムのタブにする場合は

下記のようにUITabBarItemインスタンスを作成して設定するイメージです。

//システムのコンタクトアイコンのボタンを利用
tab1.TabBarItem = new UITabBarItem(UITabBarSystemItem.Contacts, 0);

//タイトル文字と画像を設定する場合
tab1.TabBarItem = new UITabBarItem("title" , UIImage.FromFile("second.png"),0);

バッチをつける場合は、BadgeValueに文字列を設定。

tab1.TabBarItem.BadgeValue = "321";

こんな感じでタブを弄るみたいです。