UITabBarController基礎【Swift3.0】

## この記事で理解できること

- タブの追加方法
- タブアイコンの指定方法
- タブアイコンのカスタマイズ方法
- タブバーのカスタマイズ方法

### 1.　プロジェクトの用意
前準備として「TabbedApplication」をテンプレートに指定してプロジェクトを作成します。ストーリーボードは図のようになっているはずです。
<img width="1822" alt="0.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/f2417cac-91d8-ca20-f5d2-bb97d77c0a00.png">

### ２.　タブの追加
タブを追加してみます。新しいタブに対応するViewControllerを一つ増やします。**TabBarController**から追加した**ViewController**へ向けてControl + ドラッグします。ポップアップから**view controllers**を選択します。
<img width="1742" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/7e4a935a-34b1-af9e-35f2-a8033a57b1ca.png">
タブの並びを変更したい時は、**TabBarController**上のアイコンを**shiftを押しながらドラッグ**します。
### ３.　タブアイコンの指定
タブアイコンの指定はTabBarControllerではなく、ViewControllerの下部を選択状態にしてから指定します。ここではシステムアイコンの***Favorites***を指定しています。
<img width="1747" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/77be04bb-4d0f-7067-5d95-15893a285904.png">

### ４.　カスタムタブアイコンの指定
デフォルトのものからカスタムアイコンに変更してみます。前準備として**Image Set**を作成しておきましょう。私の場合は、1xには25px,2xには50px,3xには75pxのサイズを割り当てることが多いです。今回は***myFirst***という名前のImage Set作成しました。

<img width="1638" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/5856083f-30e3-b6c0-7c9f-4c13c75542f7.png">

**System Item**を***Custom***に、**selected image**を***myFirst***に変更します。**Bar Item**のほうも忘れずに**Image**に***myFirst***を指定します。未選択時のアイコンの状態の設定となります。
<img width="1753" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/2a77402c-1844-e7b9-78d7-1021890ba55e.png">

### ５.　確認してみる
ここで一度ビルドしてみます。
<img width="380" alt="4-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/03444a24-4ff1-f8c4-f9e8-816cb11abf57.png">

### ６.　タブバーをカスタマイズする
TabbarControllerのカスタムクラスを用意します。メニュー:File → New → FileでCocoa Touch Classをテンプレとして選び、Subclassに**UITabBarController**を指定します。クラス名は***MyTabBarController***としました。
<img width="729" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/114153af-79fe-5740-eebe-d05ba1ea03dc.png">
ストーリーボード上の**MyTabBarController**を選択し、Custom Class欄で、***MyTabBarController***を指定します。
<img width="1756" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/5cebd9e2-0cc7-373f-a9cb-47ece9c01843.png">

例としてタブバーのアイコンと背景を変更してみましょう。MyTabBarController.swiftに変更のコードを追加します。

MyTabBarController.swift

```swift

//
//  MyTabBarController.swift
//

import UIKit

class MyTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // カスタマイズ
        
        // アイコンの色
        UITabBar.appearance().tintColor = UIColor(red: 255/255, green: 233/255, blue: 51/255, alpha: 1.0) // yellow
        
        // 背景色
        UITabBar.appearance().barTintColor = UIColor(red: 66/255, green: 74/255, blue: 93/255, alpha: 1.0) // grey black

        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}
```

### 7.　確認してみる
<img width="377" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/3c9f929a-0450-83a0-c74f-e8c3c559a906.png">