俺俺Twitterクライアント実装日記【Part2】

実装内容

・メイン画面となるUITabBarControllerの実装

↑ピンク枠で囲まれた部分！

実装方法

構成としては、
UITabBarControllerが複数のUINavigationControllerを保持する形。

class MainTabBarViewController: UITabBarController {

   override func viewDidLoad() {
       super.viewDidLoad()
       
       let homeViewController = UIStoryboard(name: "HomeViewController", bundle: nil).instantiateInitialViewController()!
       let searchViewController = UIStoryboard(name: "SearchViewController", bundle: nil).instantiateInitialViewController()!
       let notificationViewController = UIStoryboard(name: "NotificationViewController", bundle: nil).instantiateInitialViewController()!
       let directMessageViewController = UIStoryboard(name: "DirectMessageViewController", bundle: nil).instantiateInitialViewController()!
       
       viewControllers = [homeViewController, searchViewController, notificationViewController, directMessageViewController].map
           { UINavigationController(rootViewController: $0) }
   }
}

MainTabBarViewControllerではUINavigationControllerのrootViewControllerになるViewControllerを呼び出し、最後にviewControllersにセットしてます。

ここまでは特に問題なし！

次はタブバーにアイコンをセットします。
Twitterと全く同じアイコンは見つからなかったので、全てicooon-monoから拝借させて頂きました🙇‍♂️

最終的に出来たのがこちら↓

アイコンのサイズ調整はextensionで新しくメソッドを生やしました。

extension UIImage {
   
   func resize(to: CGSize) -> UIImage? {
       UIGraphicsBeginImageContextWithOptions(to, false, 0.0)
       draw(in: CGRect(origin: .zero, size: to))
       let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
       UIGraphicsEndImageContext()
       return resizedImage
   }
}

TabBarController側ではこんな感じで使ってます。

func resizeToItemSize(_ image: UIImage) -> UIImage? {
    return image.resize(to: CGSize(width: 22, height: 22))
}

let directMessageViewController = UIStoryboard(name: "DirectMessageViewController", bundle: nil).instantiateInitialViewController()!
directMessageViewController.tabBarItem.image = resizeToItemSize(#imageLiteral(resourceName: "mail_gray"))

このままだとアイコンが少し上にズレた状態になってしまうので、HTMLでいうpadding的なものを修正して位置を調整します。

directMessageViewController.tabBarItem.imageInsets = UIEdgeInsets(top: 8, left: 0, bottom: -8, right: 0)

下に8pxズラしました！
これbottomで8をしないとレイアウトが崩れるので注意です。

最後に選択された際のアイコンの色を調整。

private func setupTabBar() {
    UITabBar.appearance().tintColor = UIColor(rgb: (85, 172, 238))
}

選択されるとTwitterカラーに変わるようになりました！

感想

書いている最中に気づいた。。
本家だとアイコンを押した際に若干アニメーションが走っている笑

いまは別の画面作成中なので細かいアニメーションは落ち着いたらやろうかなと思います😝