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

2016年6月2日2020年6月16日

Tab Bar Itemとは

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

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

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

Badge

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

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

System Item

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

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

Selected Image

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

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

Title Position

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

下図は「Default Positon」

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

Title

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

Image

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

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

//
//  TestTabBarController.swift
//

import UIKit

class TestTabBarController: UITabBarController{

    
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()

        //レンダリングモードをAlwaysOriginalでボタンの画像を登録する。
        tabBar.items![0].image = UIImage(named: "day.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        tabBar.items![1].image = UIImage(named: "evening.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        tabBar.items![2].image = UIImage(named: "night.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)

        //選択中のアイテムの画像はレンダリングモードを指定しない。
        tabBar.items![0].selectedImage = UIImage(named: "day.png")
        tabBar.items![1].selectedImage = UIImage(named: "evening.png")
        tabBar.items![2].selectedImage = UIImage(named: "night.png")

    }
}