【Swift】Tab Bar Itemの設定。ボタンの画像やタイトルを好みに合わせて設定する。(Swift 2.1、XCode 7.2)

2020年6月16日

Tab Bar Itemとは

本記事ではTab Bar Item(以下、タブバーアイテム)のアトリビュートインスペクタの設定について説明する。

Tab Bar Item

 

タブバーアイテムとは、Tab Bar(以下、タブバー)に配置するボタンやタイトルを持つ部品のことである。Tab Bar Controllerを使う場合、1つのビューコントローラーにつき1つのタブバーアイテムが割り当たる。

タブバーアイテムのアトリビュートインスペクタの設定項目について1つずつ説明する。

Tab Bar Item

 

Badge

バッチに表示する文字列を設定する。バッチとは、未読や新着情報があることをユーザーに知らせるためにボタンを目立たせるアクセサリーのことである。⇒「バッチの使い方

数字に限らず、英語でも日本語でも記号でも表示できる。

バッチの表示例

 

System Item

ボタンのアイコンを設定する。下表は設定値と表示されるアイコンの一覧。

アイコン 設定値 説明
1 System Itemに「Custom」を設定 Custom 自前のタイトルや画像を表示する。
2 System Itemに「More」を設定 More その他
3 System Itemに「Favorites」を設定 Favorites お気に入り
4 System Itemに「Featured」を設定 Featured 特集
5 System Itemに「Top Rated」を設定 Top Rated ランキング
6 System Itemに「Recents」を設定 Recents 最近
7 System Itemに「Contacts」を設定 Contacts 連絡先
8 System Itemに「History」を設定 History 履歴
9 System Itemに「Bookmarks」を設定 Bookmarks ブックマーク
10 System Itemに「Search」を設定 Search 検索
11 System Itemに「Downloads」を設定 Downloads ダウンロード
12 System Itemに「Most Recent」を設定 MostRecent 最新
13 System Itemに「Most Viewed」を設定 MostViewed 最多閲覧

Selected Image

アイテムをタップして選択したときの画像を設定する。System Itemが「Custom」に設定されているときのみ有効になる。

以下の動画は、すべてのタブバーアイテムのSelected Imageにチェックマークの画像を設定した場合

 

Title Position

タイトルの表示位置を「Default Position」、「Custom Offset」から選択する。「Custom Offset」を選択すると、Horizontal(水平方向)とVertical(垂直方向)の数値を入力する欄が現れるので、デフォルトの位置からの距離を入力する。

下図は「Default Positon」

Title Positionに「Default Position」を設定

 

下図は夕方のボタンを「Custom Offset」に設定し、Horizontalに「10」、Verticalに「-30」を入力した場合

Title Positionに「Custom Offset」を設定

 

Title

アイコンのそばに表示する文字列。設定するとSystem Itemが自動で「Custom」に変更される。

 

Image

アイコンの画像ファイル。設定するとSystem Itemが自動で「Custom」に変更される。

普通に登録するとアイコンの色はTint Colorと同じ色に塗りつぶされる。用意した画像そのものの色を表示したい場合は、UITabBarControllerのサブクラスを作り、以下のコードのように画像のレンダリングモードをAlwaysOriginalにしてタブバーアイテムのimageプロパティに登録する。

 

以下は実際のプレイ動画

 

Tag

ソースコードから部品にアクセスするための識別番号。