
[Swift] UITabBarControllerの選択中タブの上にバーをつける
2022.11.04
はじめに
今回、UITabBarControllerの選択中タブの上にバーをつける実装をやったので、その実装方法について書きます。
イメージとしては、以下のようなものになります。
環境
- OS : macOS Monterey 12.6
- Xcode : Version 14.0.1(14A400)
- Swift : 5.7
やったこと
今回、選択中タブの上にバーをつけるため、以下2つのことをやりました。
- UIGraphicsGetImageFromCurrentImageContextで上に線が引かれた画像を生成
- 生成した画像をselectionIndicatorImageにセット
UIGrapicsGetImageFromCurrentImageContextとは
描画したimageを取り出すメソッドです。
UIGraphicsBeginImageContext(_:)でimageの描画を開始
描画を行い、UIGrapicsGetImageFromCurrentImageContext()で描画したimageを取り出す
UIGrapicsGetImageFromCurrentImageContext()で描画の処理を終了
上記の手順でUIImageを作成することができます。
Documentation: UIGraphicsBeginImageContext(_:)
Documentation: UIGraphicsGetImageFromCurrentImageContext()
Documentation: UIGraphicsEndImageContext()
selectionIndicatorImageとは
UITabBarのプロパティーです。
selectionIndicatorImageに画像をセットすることで、選択中タブの後ろに画像を表示することができるようになります。
Documentation: selectionIndicatorImage
実装
UIGraphicsGetImageFromCurrentImageContextで上に線が引かれた画像を生成
UIImageを拡張し、static func で上に線が引かれた画像を生成するメソッドを実装しました。
- UIGraphicsBeginImageContext(size)で生成する画像サイズを指定し、描画を開始
- color.setFill()で描画を塗りつぶす色を指定し、UIRectFill(_ :)で上の線を四角形で描画
- UIGraphicsGetImageFromCurrentImageContext()で描画したimageを取り出し
- UIGraphicsEndImageContext()で描画処理を終了
- return で取り出したimageを返す
1 2 3 4 5 6 7 8 9 10 | extension UIImage { static func createSelectionIndicator(color: UIColor, size: CGSize, lineHeight: CGFloat) -> UIImage? { UIGraphicsBeginImageContext(size) color.setFill() UIRectFill(CGRect(origin: CGPoint(x: 0,y: 0), size: CGSize(width: size.width, height: lineHeight))) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image } } |
生成した画像をselectionIndicatorImageにセット
UITabBarControllerのviewDidLayoutSubviews()のタイミングでselectionIndicatorImageに画像をセットしました。
今回はUITabBarItemの数に合わせて幅を変更し、高さ2の青色のバーを表示するため、
colorには.bule、
sizeのwidthにはtabBarのwidthをUITabBarItemの数で割った値、
sizeのheightにはtabBarのheight、
lineHeightには2を指定しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 | class MainTabBarController: UITabBarController { override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() tabBar.selectionIndicatorImage = UIImage.createSelectionIndicator( color: .blue, size: CGSize( width: tabBar.frame.width / CGFloat((tabBar.items?.count ?? 1)), height: tabBar.frame.height ), lineHeight: 2 ) } } |
おわりに
今回、UITabBarControllerの選択中タブの上にバーをつける方法について書いてみました。
この記事が同じような実装をされる方の参考になれば幸いです。
最後までご覧いただきありがとうございました。
書いた人はこんな人

- 業務ではiOS開発に携わらせていただいています。
まだまだ分からないことだらけで、日々分からないことと戦いながら仕事をしている者です。
ブログ記事は暖かい目で見ていただけるとありがたいです。