はじめに

今回、UITabBarControllerの選択中タブの上にバーをつける実装をやったので、その実装方法について書きます。

イメージとしては、以下のようなものになります。

環境

• OS : macOS Monterey 12.6
• Xcode : Version 14.0.1(14A400)
• Swift : 5.7

やったこと

今回、選択中タブの上にバーをつけるため、以下2つのことをやりました。

1. UIGraphicsGetImageFromCurrentImageContextで上に線が引かれた画像を生成
2. 生成した画像をselectionIndicatorImageにセット

描画したimageを取り出すメソッドです。

UIGraphicsBeginImageContext(_:)でimageの描画を開始
描画を行い、UIGrapicsGetImageFromCurrentImageContext()で描画したimageを取り出す
UIGrapicsGetImageFromCurrentImageContext()で描画の処理を終了

上記の手順でUIImageを作成することができます。

Documentation: UIGraphicsBeginImageContext(_:)
Documentation: UIGraphicsGetImageFromCurrentImageContext()
Documentation: UIGraphicsEndImageContext()

UITabBarのプロパティーです。

selectionIndicatorImageに画像をセットすることで、選択中タブの後ろに画像を表示することができるようになります。

Documentation: selectionIndicatorImage

実装

UIGraphicsGetImageFromCurrentImageContextで上に線が引かれた画像を生成

UIImageを拡張し、static func で上に線が引かれた画像を生成するメソッドを実装しました。

1. UIGraphicsBeginImageContext(size)で生成する画像サイズを指定し、描画を開始
2. color.setFill()で描画を塗りつぶす色を指定し、UIRectFill(_ :)で上の線を四角形で描画
3. UIGraphicsGetImageFromCurrentImageContext()で描画したimageを取り出し
4. UIGraphicsEndImageContext()で描画処理を終了
5. return で取り出したimageを返す

1extension UIImage {
2    static func createSelectionIndicator(color: UIColor, size: CGSize, lineHeight: CGFloat) -> UIImage? {
3        UIGraphicsBeginImageContext(size)
4        color.setFill()
5        UIRectFill(CGRect(origin: CGPoint(x: 0,y: 0), size: CGSize(width: size.width, height: lineHeight)))
6        let image = UIGraphicsGetImageFromCurrentImageContext()
7        UIGraphicsEndImageContext()
8        return image
9    }
10}

生成した画像をselectionIndicatorImageにセット

UITabBarControllerのviewDidLayoutSubviews()のタイミングでselectionIndicatorImageに画像をセットしました。

今回はUITabBarItemの数に合わせて幅を変更し、高さ2の青色のバーを表示するため、
colorには.bule、
sizeのwidthにはtabBarのwidthをUITabBarItemの数で割った値、
sizeのheightにはtabBarのheight、
lineHeightには2を指定しました。

1class MainTabBarController: UITabBarController {
2    override func viewDidLayoutSubviews() {
3        super.viewDidLayoutSubviews()
4        tabBar.selectionIndicatorImage = UIImage.createSelectionIndicator(
5            color: .blue,
6            size: CGSize(
7                width: tabBar.frame.width / CGFloat((tabBar.items?.count ?? 1)),
8                height: tabBar.frame.height
9            ),
10            lineHeight: 2
11        )
12    }
13}

おわりに

今回、UITabBarControllerの選択中タブの上にバーをつける方法について書いてみました。

この記事が同じような実装をされる方の参考になれば幸いです。

最後までご覧いただきありがとうございました。