[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を返す

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

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

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