StoryboardReferenceを用いて実装したTabBarControllerをカスタマイズする時の注意点


## 状況
[Youtubeチャンネル](http://www.youtube.com/channel/UCEZIDajfDXXZtosEn9u94Ug?sub_confirmation=1)の素材用に[Tinderの模擬アプリ](https://www.youtube.com/watch?v=RaKaGPsUU9w)を作成する際、
1つの`Storyboard`で`TabBarController`と遷移先のVCを置く場合
カスタマイズは

- `Storyboard`上でそのままやってしまう
- `TabBarController`か`TabBar`のcustomclassを作って紐づける

のどちらかだと思うのですが
`StoryboardReference`を用いて`TabBarController`を実装した際
これだとうまくいかなかったのでメモしておきます

#### 参考
1つの`Storyboard`で`TabBarController`と遷移先のVCを置く場合の参考文献です
**・[tabBarControllerとUINavigationControllerを同時に使いたい！ - Takahiro Octopress Blog](https://grandbig.github.io/blog/2016/01/17/tabbarcontroller/)**
**・[NavigationController とTabBarControllerを一緒に使う方法 - marikoootaの日記](http://marikooota.hatenablog.com/entry/2017/09/10/211139)**
**・[【Swift4】StoryboardでUINavigationControllerやUITabBarControllerを設定する方法【Xcode9】 | ニートに憧れるプログラム日記](https://program-life.com/678)**
**・[iOSアプリ開発入門#3 ~UITabBarController~ - Qiita](https://qiita.com/chang1019/items/02b52c574a4600b22574)**

## 対策
`StoryboardReference`を用いて`TabBarController`を実装した場合
#### tabBarをカスタマイズ
- `TabBarController`の`TabBar`を`Storyboard`で直接編集する
->`TabBar`**表示されない**

- `Storyboard Reference`で紐づいている遷移先のVCでカスタマイズしてみる
->tabBarController, tabBarのカスタムクラス作って`tabController.storyboard`のそれに紐づければおそらくいける
->VCとtabbarのstoryboardが別だから**見た目変化なし**

- `tabBarItem`でcustomclass作る
->tagで仕分けて実装したら**カスタマイズできた**
->見た目に関しては**各VCで設置したtabBarItemしか反応しない**のかも

※TabBarControllerでもきちんと準備をしておかないと**Tabが表示されないことがある**
->

```swift
import UIKit

class StyledTabBarItem: UITabBarItem {
    //storyboardで設置した時
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        setAppearance()
    }
    
    private func setAppearance() {
        //ライフサイクル内ならselfでVCから参照すれば使わなくてもいける->NCのみ
        //tabBarの画像は30*30px(Retinaだと60*60)
        switch self.tag {
        case 0:
            self.setTabBarItem(title: "", image: UIImage(named: "girlTabIcon")!, selectedImage: UIImage(named: "girlTabIcon-selected")!)
        case 1:
            self.setTabBarItem(title: "", image: UIImage(named: "emperorTabIcon")!, selectedImage: UIImage(named: "emperorTabIcon-selected")!)
        default:
            break
        }
    }
    
    func setTabBarItem(title: String, image: UIImage, selectedImage: UIImage) -> Void {
        self.title = title
        self.image = image//.withRenderingMode(.alwaysOriginal)<-PDFの時はこの設定いらない
        self.selectedImage = selectedImage//.withRenderingMode(.alwaysOriginal)<-PDFの時はこの設定いらない
    }
}
```

#### アイコン画像の設定
- KeynoteとかAdobeXDで適当にアイコン用に正方形の画像(300*300pxとか)作って設定したら**むちゃくちゃはみ出した**

->**30*30pxの画像を用意したらできた**
->アイコン画像に**PDFを使う**と
`single scale`かつ`Preserve Vector data`にチェックで
**30*30pxのデータのみで`retina(60*60px)`にも対応できる**
->しかしこれだと`tabBar.tintColor = UIColor.pink`, `tabBar.unselectedItemTintColor = UIColor.gray`などが使えないので
~~**選択時と非選択時のデータを両方用意**する必要がある~~ 
->後述の`withRenderingMode(.alwaysOriginal)`を使えば**選択時の画像のみで良い**
![スクリーンショット 2019-12-05 19.34.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427937/a5372bb2-0e91-fd2c-17e9-bc463d183821.png)

- アイコン画像のカスタマイズ時の注意点(PDFとPNGの違い)

->PDFだと用意するサイズは**１種類でいい**(↑の設定でretinaサイズにも対応できる)
->`withRenderingMode(.alwaysOriginal)`を使えばPDFでも**選択時の画像のみで良い**

```swift
//PNGのみ
tabBar.tintColor = UIColor.pink
tabBar.unselectedItemTintColor = UIColor.gray
```
または

```swift
//PNGでもPDFでも使える
tabBarItem.selectedImage = selectedImage.withRenderingMode(.alwaysOriginal) 
//↑これしないとtemplate扱いになって勝手に他の色に塗りつぶされる
tabBar.image = image
//↑非選択時で勝手にグレーになってもいいならこっち(あるいは.withRenderingMode(.alwaysTemplate))
```


#### tabbarの上線消す方法
これに関しては`tabBarItem`からカスタマイズした影響でうまくやるやり方がわかりませんでした
->`tabBar.shadowImage = UIImage`というやり方をしたいけど
**`tabBar`にアクセスしてカスタマイズする** or **`tabBar(Controller)`から`tabBarItem`をカスタマイズする**
方法が分かっていないから

#### 別の方法
**参考: [UITabBarControllerの基本](https://www.swift-study.com/uitabbarcontroller-basic/)**

- `storyboardReference`側から`tabBarItem`を編集する

->`tabbBarControlller`や`tabBar`の変更が反映されないのは
遷移先で`tabbarItem`を新たに作っているせいかもしれない
->遷移先VCの`tabBarItem`を消去 & `storyboardReference`の`tabBarItem`を`custom class`に準拠
->`tabBar`が**表示されない**

- `tabBarItem`をNCではなくVCに移動する

->VC側で`self.tabBarController.tabBar.shadowImage = UIImage()`
->VCに移動しても影響はなかったが**変更が反映されなかった**

#### titleをカスタマイズ(NavigationControllerを導入している画面のVC)
- `navigationBar`と`TabBar`のtitleが同じでいい場合
`ViewController`に`(self.)title = "hoge"`

- `navigationBar`と`TabBar`のtitleを別にしたい場合
`ViewController`に`(self.)title = "hoge"`(TabBar)
`ViewController`に`(self.)navigationItem.title = "hoge"`(navigationBar)

**・[UITabBarControllerのTabBarItemのタイトルが勝手に変わってしまう場合の対処 - Qiita](https://qiita.com/jin/items/f785278d66d19a604ca6)**

#### 参考
**・[【Swift4】Storyboardを分割してプロジェクトを作成する方法【iOS11】【Xcode9】 | ニートに憧れるプログラム日記](https://program-life.com/269)**
**・[【Xcode】Storyboard Referenceを活用してみた - Qiita](https://qiita.com/shikazon/items/03a3cddf8fe17361c5b2)**

**・[Storyboard Reference がいい感じ - SH Lab の アプリ開発部屋](http://hoshi0523.hatenablog.com/entry/2015/10/04/024324)**
->遷移先のVCをそれぞれの`Storyboard`にする場合と遷移先のVCのみ1つの`Storyboard`にまとめてしまう(`TabBarController`は別)場合別のやり方が書いてある

**・[UITabBarControllerをStoryboardで設定する時にTabBarItemが表示されない - Qiita](https://qiita.com/itsukiss/items/2b8ef230c873d73b9462)**
->本記事でも書いたように`TabBarController`と遷移先VCを分けた場合は`TabBarItem`を遷移先VCにそれぞれ加えないとダメだと書いてある
**・[iOS Swiftチートシート・ライブラリまとめ UITabBar・UITabBarItem編 - Qiita](https://qiita.com/homunuz/items/298fb31c159a4cc75fcf#%E4%B8%8A%E4%BB%98%E3%81%8Dtabbar1)**
->`tabBar.unselectedItemTintColor = UIColor.white`など
**・[iOS - UITabbarの中央アイコンをタブバーをはみ出したデザインにしたい｜teratail](https://teratail.com/questions/22310)**
->[HELargeCenterTabBarController](https://github.com/HsoiEnterprises/HELargeCenterTabBarController)の紹介
**・[【Swift5】UITabBarの色、背景画像、サイズやアイコン文字の色、フォント、サイズ、位置の調整まで網羅フルカスタマイズまとめ【Objective-C】 | ニートに憧れるプログラム日記](https://program-life.com/1341)**
**・[UINavigationBar・UITabBar のカスタマイズ方法について - Qiita](https://qiita.com/usagimaru/items/7f5c63d5cb75d8c479ed)**
->カスタマイズのTips.(`appearance()`なくてもいけるからこれの存在意義はよくわからない。。。)
**・[UITabBarControllerの基本](https://www.swift-study.com/uitabbarcontroller-basic/)**
->storyboardReference側からtabbarItemを編集するやり方が書いてある

**・[[Swift]UIImageのレンダリングモードまとめ - Qiita](https://qiita.com/nashirox/items/2229b82dd68c6cc64603)**(rederingModerでのやり方)
**・[[Swift] iOS で画像の色を動的に変える - Qiita](https://qiita.com/takecian/items/5375fdc95106f17d1e1a)**(rederingModerでのやり方)
**・[[Swift] 画像の色を変更する - Qiita](https://qiita.com/Kon_pippiana/items/78b46d53398681462549)**(tintColorでのやり方)
**・[[Swift] iOS で画像の色を動的に変える - Qiita](https://qiita.com/takecian/items/5375fdc95106f17d1e1a)**(rederingModeでのやり方)
->今回のようにPDFではなくPNGでtabbarのアイコン作った場合は必要。
**・[【Swift】 アセット画像を３種類も書き出したくない - Qiita](https://qiita.com/okamu_/items/085cfc5999db801020ff)**
->PDFでのやり方はこっち。
**・[【iOS】Tabbar メニューの画像のサイズや解像度に関して - 東京伊勢海老通信](https://altarf.net/computer/objective-c/2654)**
->tabbarの画像サイズは30*30でないとダメ。