ぬるぬるタブバーを動く棒

Swift

本記事はXcode9.2 / Swift4で書かれています。

f:id:sato-fun0619:20171219000619g:plain

作ったもの

今回は上にある画像のようにタブを選択時に動く棒を作ります

何故作ったか

ちょっとこのようにタブバーで棒を表示しなければいけなかったのですが、それを画像で渡されなんかうまく行かなかったので作成しました。

実際に

準備

UITabBarControllerをサブクラスに持つクラスを作成し、UITabBarControllerDelegateもサブクラスに追加してください。
ストーリーボードにTabBarControllerを追加して先程作ったクラスを設定しておきます。

コード

viewDidLoad内

self.delegate = self
// tabbarのタイトルを少し上に上げる
UITabBarItem.appearance().titlePositionAdjustment = UIOffsetMake(0, -8)
// tabbar内のアイテムの個数をfloatで保存
let tabItemCount = CGFloat((tabBar.items?.count)!)
// tabbar内で動くBarの長さを設定
tabItemWidth = self.view.frame.width / tabItemCount
// barの色を設定
underlineLayer.backgroundColor = UIColor.red.cgColor
// barの設定
underlineLayer.frame = CGRect(x: 0, y: tabBar.frame.size.height-5, width: tabItemWidth, height: 2.5)
tabBar.layer.addSublayer(underlineLayer)

viewDidLoad外

let underlineLayer = CALayer()
var tabItemWidth: CGFloat = 0

tabBarItemを選択した際に呼ばれるもの

func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
    let x = CGFloat(self.selectedIndex) * tabItemWidth
    underlineLayer.frame.origin.x = x
}

参考にしたもの

以下のQiitaではSegmentedControlで同じようなものを作っていらっしゃったのでちょっと変えればいけると思ったらいけました。
qiita.com

GitHub

説明だけでわかりづらければGithubに上がっているのでそちらを参考にしてください。
GitHub - sattotto/tabbarTestApp