![いまむー(エンジニア)](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2022%2F03%2Fkyohei.imamura_100_100.png&w=64&q=75)
[Swift] UITabBarControllerの選択中タブの上にバーをつける
![いまむー(エンジニア)](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2022%2F03%2Fkyohei.imamura_100_100.png&w=64&q=75)
IT技術
![](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2022%2F11%2Fswift-uitabbar-controller-syain_tmb-1.png&w=3840&q=75)
はじめに
今回、UITabBarControllerの選択中タブの上にバーをつける実装をやったので、その実装方法について書きます。
イメージとしては、以下のようなものになります。
環境
- OS : macOS Monterey 12.6
- Xcode : Version 14.0.1(14A400)
- Swift : 5.7
やったこと
今回、選択中タブの上にバーをつけるため、以下2つのことをやりました。
- UIGraphicsGetImageFromCurrentImageContextで上に線が引かれた画像を生成
- 生成した画像をselectionIndicatorImageにセット
描画したimageを取り出すメソッドです。
UIGraphicsBeginImageContext(_:)でimageの描画を開始
描画を行い、UIGrapicsGetImageFromCurrentImageContext()で描画したimageを取り出す
UIGrapicsGetImageFromCurrentImageContext()で描画の処理を終了
上記の手順でUIImageを作成することができます。
Documentation: UIGraphicsBeginImageContext(_:)
Documentation: UIGraphicsGetImageFromCurrentImageContext()
Documentation: UIGraphicsEndImageContext()
UITabBarのプロパティーです。
selectionIndicatorImageに画像をセットすることで、選択中タブの後ろに画像を表示することができるようになります。
Documentation: selectionIndicatorImage
実装
UIGraphicsGetImageFromCurrentImageContextで上に線が引かれた画像を生成
UIImageを拡張し、static func で上に線が引かれた画像を生成するメソッドを実装しました。
- UIGraphicsBeginImageContext(size)で生成する画像サイズを指定し、描画を開始
- color.setFill()で描画を塗りつぶす色を指定し、UIRectFill(_ :)で上の線を四角形で描画
- UIGraphicsGetImageFromCurrentImageContext()で描画したimageを取り出し
- UIGraphicsEndImageContext()で描画処理を終了
- 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の選択中タブの上にバーをつける方法について書いてみました。
この記事が同じような実装をされる方の参考になれば幸いです。
最後までご覧いただきありがとうございました。
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
![いまむー(エンジニア)](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2022%2F03%2Fkyohei.imamura_100_100.png&w=3840&q=75)
業務ではiOS開発に携わらせていただいています。 まだまだ分からないことだらけで、日々分からないことと戦いながら仕事をしている者です。 ブログ記事は暖かい目で見ていただけるとありがたいです。