Xamarin.iOSでUITabBarControllerを使用して、システムアイコンと、自分で用意したアイコンを表示してみます。

画像登録

タブに表示するカスタムアイコンを用意します。
画像用フォルダを作成し、その中に画像ファイル(png)を保存しておきます。
ファイル名はRetina向けに@2xとし、画像はTabBar向けに60x60ピクセルの透過画像を使用します。

ソリューションエクスプローラで「すべてのファイルを表示」を選んで上記を表示し、右クリックから「プロジェクトに含める」でプロジェクトに取り込みます。
 


プロジェクトに登録できたらプロパティのビルドアクションが「コンテンツ」になっている事を確認します。


タブに表示するコントローラを作成

UIViewControllerを継承した、タブ内に表示するコントローラクラスを作成します。
二つのタブを使用するとして、コントローラクラスを二つ作成します。

class FavoriteViewController : UIViewController
{
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
 
        base.View.BackgroundColor = UIColor.Green;
    }
}
class SettingViewController : UIViewController {     public override void ViewDidLoad()     {         base.ViewDidLoad();         base.View.BackgroundColor = UIColor.Yellow;     } }

 

タブを表示するコントローラを作成

UITabBarControllerを継承した、タブを表示するコントローラクラスを作成します。
一つ目のタブはシステムアイコンを使用してみました。
二つ目のタブは前述で取り込んだ画像を使用しています。
ファイル名に「@2x」を指定する必要はありません。
また、二つ目のタブが選択された場合にバッジを表示するようにイベントを登録しました。

public class RootTabViewController : UITabBarController
{
    private UIViewController _tab_favorite;
    private UIViewController _tab_setting;
    private UIImage _image_setting;
    private int _count;
 
    public RootTabViewController()
    {
        // コントローラを登録
        _tab_setting = new SettingViewController();
        _tab_favorite = new FavoriteViewController();
        var controllers = new UIViewController[]
        {
            _tab_favorite, _tab_setting
        };
        base.ViewControllers = controllers;
 
        // 画像を読み込み
        _image_setting = UIImage.FromFile("Images" + Path.DirectorySeparatorChar + "Setting.png");
 
        // タブを登録
        _tab_favorite.TabBarItem = new UITabBarItem(UITabBarSystemItem.Favorites, 0);
        _tab_setting.TabBarItem = new UITabBarItem("Setting", _image_setting, 1);
 
        // タブ選択時の動作を登録
        base.ViewControllerSelected += (object sender, UITabBarSelectionEventArgs e) =>
            {
                // 選択されているのが二つ目のコントローラの場合はバッジをカウントアップ
                var controller = e.ViewController as SettingViewController;
                if (null != controller)
                {
                    _count++;
                    controller.TabBarItem.BadgeValue = _count.ToString();
                }
 
                //// 又は、選択されたタブの番号で判別
                //if((sender as UITabBarController).SelectedIndex == 1)
                //{
                //    _count++;
                //    e.ViewController.TabBarItem.BadgeValue = _count.ToString();
                //}
            };
    }
}

 

AppDelegate.csの変更

上記を使用するように変更します。

[Register("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    private UIWindow _window;
    private RootTabViewController _controller;
 
    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
    {
        _window = new UIWindow(UIScreen.MainScreen.Bounds);
 
        // Tabコントローラを作成
        _controller = new RootTabViewController();
 
        // Windowにコントローラを登録
        _window.RootViewController = _controller;
        _window.MakeKeyAndVisible();
 
        return true;
    }
}

 

実行結果

「デバッグなしで開始」でiPhoneシミュレータで実行してみます。
二つの画面がタブで切り替えられる様子がMac上のシミュレータで確認できます。
また、二つ目のタブを選択する都度バッジがカウントアップされます。