• トップ
  • ブログ一覧
  • [Swift] UITabBarControllerの選択中タブの上にバーをつける
  • [Swift] UITabBarControllerの選択中タブの上にバーをつける

    いまむー(エンジニア)いまむー(エンジニア)
    2022.11.04

    IT技術

    はじめに

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

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

    環境

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

    やったこと

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

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

    UIGrapicsGetImageFromCurrentImageContextとは

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

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

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

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

    selectionIndicatorImageとは

    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の選択中タブの上にバーをつける方法について書いてみました。

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

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

    いまむー(エンジニア)

    いまむー(エンジニア)

    おすすめ記事