Skip to content
This repository has been archived by the owner on Jun 20, 2023. It is now read-only.

Latest commit

 

History

History
111 lines (73 loc) · 5.51 KB

1-2_UITabController.md

File metadata and controls

111 lines (73 loc) · 5.51 KB
Raw

参考 mixi-inc/iOSTraining 2.2 UITabController

UITabBarController Class Reference

iOS View Controllerプログラミングガイド

概要

tabController1 UITabBarController Class Reference から引用

UITabBarController は TabBar インタフェースを用いて ViewController を管理するコンテナです。

tabController2 View Controller Programming Guide for iOS から引用

UITabBarController における重要な property と method は以下の通りです。

  • viewControllers - viewController が含まれている NSArray
  • selectedViewController - 現在表示されている ViewController を取得、別のViewControllerに変更可能なプロパティ
  • delegate - 表示変更などのイベントを取得できる delegate UITabBarControllerDelegate Protocol

tab の表示は ViewController の UITabBarItem を設定することで変更可能

実装

プロジェクト作成

createTabProject

moreViewControllers と tabBarItem

viewControllers に 5 つ以上の ViewController を管理させる場合、Tab では 4 つを管理し、それ以外の ViewController は more として管理されます。

tabBarItem

iOS View Controllerプログラミングガイド から引用

FirstViewController.swift

init(imageName: String) {
    super.init(nibName: "FirstViewController", bundle: nil)
    title = imageName
    tabBarItem?.image = UIImage(named: imageName)
}

init(nibName:bundle:)を呼ぶためには、FirstViewController.xibが必要になります。

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    if let tabBarContorller = window?.rootViewController as? UITabBarController {
        let viewControllers: [UIViewController] = [
            FirstViewController(imageName: "first"),
            FirstViewController(imageName: "second"),
            FirstViewController(imageName: "third"),
            FirstViewController(imageName: "fourth"),
            FirstViewController(imageName: "fifth"),
            FirstViewController(imageName: "sixth")
        ]
        tabBarContorller.viewControllers = viewControllers
    }
    return true
}

画像ファイルはこちら

tab のバッジ

tabBadge

iOS View Controllerプログラミングガイド から引用

tabBar の上にバッジを表示することが可能です。

tabBarItem.badgeValue = "5"

Storyboardを用いた方法

Storyboardを用いることで、視覚的にTabBarControllerとその中に入るViewControllerをデザインすることができます。 プロジェクトテンプレートから作成するときに"Tabbed Application"を選ぶと、起動時にTabBarControllerが表示されるアプリケーションが作成されます。

img

またそのUIはMain.storyboardに記載されています。

img

新しくViewControllerを追加する際は、ViewControllerをstoryboard上に追加し、Tab Bar Controller から controlを押しながらViewControllerへドラッグします

img

�その後、segueは "view controllers" を選択します。

img

このように追加したViewControllerにSegueが追加されていれば完了です。

img

演習

  • storyboard上のTabBarControllerに対して、新しくViewController（ThirdViewController）を追加してください。
  • xibからロードしたViewContorller（FourthViewController）を更に追加してください。

解答は after/day2/1.2/TabSample をごらんください