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

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

## Step1. 爆速でUITabBarController管理化
[前回のコード](https://qiita.com/chang1019/items/77fbc484f0b27511cee8) をベースに作業。
今回もひとまずStoryboardではなくコード側で実装してみる

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

```diff: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の組み合わせ画面となる）
<img width="310" alt="スクリーンショット 2019-03-02 17.40.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/1144/dbf8e111-8326-1037-94f0-0de873183c5d.png">


## Step2. Storyboardを使ってみる
特にカスタマイズしたいところもないので、早速Storyboardにお任せする

### 2.1. UITabBarControllerの追加
例によってStoryboard右上のボタンからコンポネント追加
<img width="500" alt="スクリーンショット 2019-03-03 10.33.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/1144/4489c58e-f1de-9e20-4b8c-53740d209417.png">


例によってここから追加すると、すでにtabが２つ紐づいた状態で配置されてとても邪魔。
爆速で消しにかかる。
<img width="1512" alt="スクリーンショット_2019-03-03_10_34_03.png" src="https://qiita-image-store.s3.amazonaws.com/0/1144/f582e9dd-7ddf-71e2-240c-3aeafeca5d93.png">

ちょっと配置を整理
<img width="1512" alt="スクリーンショット 2019-03-03 10.34.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/1144/56567230-7279-f3e2-709b-e640e897ac4f.png">

また、EntrypointをUITabBarController側に変更する
<img width="1512" alt="スクリーンショット_2019-03-03_10_34_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/1144/fd7f4578-e9c8-d4b7-85e9-c04dac3141aa.png">

UITabBarControllerのrootViewControllerとして既存のUINavigationControllerをバインドする
<img width="1512" alt="スクリーンショット_2019-03-03_10_35_05.png" src="https://qiita-image-store.s3.amazonaws.com/0/1144/eb7979d2-eedf-2a3a-9b9d-88b1fc255280.png">

TabBarItem要素を選択し、「System Item」を変更し、アイコンを設定する
<img width="1512" alt="スクリーンショット_2019-03-03_10_38_13.png" src="https://qiita-image-store.s3.amazonaws.com/0/1144/ef337742-48d7-6fa3-7d15-ce0669c7b1a6.png">

最後に、TabBarのtab要素をドラッグし、順番を入れ替える
<img width="1512" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f313134342f31376330613063322d316662372d383534302d663465372d6433323233663162393630332e706e67.png" src="https://qiita-image-store.s3.amazonaws.com/0/1144/bae3c962-e34e-b88c-c904-9fff108bba36.png">



### 2.2. コード修正
これによって以下のコードが削減できる。

```diff: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すると同じ動き
<img width="310" alt="スクリーンショット 2019-03-03 10.44.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/1144/ccc95ee6-0a8f-3ce6-fde6-b30cbfdfbc16.png">


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