Help us understand the problem. What is going on with this article?

iOSアプリ開発入門#3 ~UITabBarController~

More than 1 year has passed since last update.

目的

  • よく使うであろうUITabBarControllerを使用したアプリをStoryboardありとなしでサクッと作れるようになる
  • ありなしの両方を試すことで、Storyboardが何をやっているのかなんとなくイメージできるようになる

Step1. 爆速でUITabBarController管理化

前回のコード をベースに作業。
今回もひとまずStoryboardではなくコード側で実装してみる

1.1. AppDelegateの修正

まずはAppDelegateを以下のように修正。
前回のUINavigationControllerの時と同様、Storyboardですでに初期化済みのwindowがバインドされているので、ここのrootViewController(StoryboardでUINavigationControllerに設定済み)をUITabBarControllerに付け替える。

AppDelegate.swift
--- a/PracticeApp/AppDelegate.swift
+++ b/PracticeApp/AppDelegate.swift
@@ -16,6 +16,22 @@ class AppDelegate: UIResponder, UIApplicationDelegate {

     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
         // Override point for customization after application launch.
+
+        var vcs: [UIViewController] = []
+
+        // 1st vc
+        let navc: UINavigationController = window?.rootViewController as! UINavigationController
+        navc.tabBarItem = UITabBarItem(tabBarSystemItem: .recents, tag: 0)
+        vcs.append(navc)
+
+        // 2nd vc
+        let vc: UIViewController = UIViewController()
+        vc.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 1)
+        vcs.append(vc)
+
+        let tabc: UITabBarController = UITabBarController(nibName: nil, bundle: Bundle.main)
+        tabc.setViewControllers(vcs, animated: true)
+        window?.rootViewController = tabc
         return true
     }

ポイントとしては

  • tab要素そのものの見た目はTabBarControllerではなく、それに追加するViewController側のtabBarItemを設定することで編集できる
  • UITabBarItemのtagは、tab押下時などにtabを識別するために使用する模様
  • UITabBarControllerのsetViewControllersでtabに対応するViewControllerの配列を渡す

1.2. 起動

たったこれだけで一応tab化できる(すでにUINavigationControllerの設定はできているので、tabとnavigationの組み合わせ画面となる)
スクリーンショット 2019-03-02 17.40.37.png

Step2. Storyboardを使ってみる

特にカスタマイズしたいところもないので、早速Storyboardにお任せする

2.1. UITabBarControllerの追加

例によってStoryboard右上のボタンからコンポネント追加
スクリーンショット 2019-03-03 10.33.17.png

例によってここから追加すると、すでにtabが2つ紐づいた状態で配置されてとても邪魔。
爆速で消しにかかる。
スクリーンショット_2019-03-03_10_34_03.png

ちょっと配置を整理
スクリーンショット 2019-03-03 10.34.41.png

また、EntrypointをUITabBarController側に変更する
スクリーンショット_2019-03-03_10_34_47.png

UITabBarControllerのrootViewControllerとして既存のUINavigationControllerをバインドする
スクリーンショット_2019-03-03_10_35_05.png

TabBarItem要素を選択し、「System Item」を変更し、アイコンを設定する
スクリーンショット_2019-03-03_10_38_13.png

最後に、TabBarのtab要素をドラッグし、順番を入れ替える
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f313134342f31376330613063322d316662372d383534302d663465372d6433323233663162393630332e706e67.png

2.2. コード修正

これによって以下のコードが削減できる。

AppDelegate.swift
--- a/PracticeApp/AppDelegate.swift
+++ b/PracticeApp/AppDelegate.swift
@@ -17,21 +17,6 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
         // Override point for customization after application launch.

-        var vcs: [UIViewController] = []
-
-        // 1st vc
-        let navc: UINavigationController = window?.rootViewController as! UINavigationController
-        navc.tabBarItem = UITabBarItem(tabBarSystemItem: .recents, tag: 0)
-        vcs.append(navc)
-
-        // 2nd vc
-        let vc: UIViewController = UIViewController()
-        vc.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 1)
-        vcs.append(vc)
-
-        let tabc: UITabBarController = UITabBarController(nibName: nil, bundle: Bundle.main)
-        tabc.setViewControllers(vcs, animated: true)
-        window?.rootViewController = tabc
         return true
     }

ポイントは特にない。この辺りはStoryboardに一任できそう。

2.3. 起動

Runすると同じ動き
スクリーンショット 2019-03-03 10.44.02.png

3. まとめ

コードは前回と変わらないため割愛

krdhrk
sensyn-robotics
「ドローンによる業務の完全自動化」を実現し社会課題を抜本的に解決
https://www.sensyn-robotics.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away