1. HOME
  2. ブログ
  3. IT技術
  4. [Swift] UITabBarControllerの選択中タブの上にバーをつける

[Swift] UITabBarControllerの選択中タブの上にバーをつける

はじめに

今回、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を返す

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

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

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

おわりに

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

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

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

書いた人はこんな人

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

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア