【Swift】Bar Button Itemの設定。スペースを調整してバーにアイコンを並べる。(Swift 2.1、XCode 7.2)

2020年6月16日

Bar Button Itemとは

本記事ではSwiftで使える部品のBar Button Item(以下、バーボタンアイテム)について説明する。

バーボタンアイテムとは、ナビゲーションバーやツールバーの中に並べるボタンやスペースの部品のことである。部品リストには「Bar Button Item」、「Fixed Space Bar Button Item」、「Flexible Space Bar Button Item」の3つがあるが、設定を変えただけでクラスは同じである。

Bar Button Item

 

バーボタンアイテムはボタンとして使うという意味ではUIButtonと同じだが、アイコンやスペース調整の機能によって、限られた幅のバーにボタンを並べやすくなっている。

 

バーボタンアイテムの設定項目

バーボタンアイテムのアトリビュートインスペクタの設定項目を確認する。

Bar Button Itemのアトリビュートインスペクタ

 

Style

表示スタイルを「Plain」、「Bordered」、「Done」から選択する。iOS6まではこの設定によってボタンの周囲に枠線をつけたり、背景色を青色にしたりできたが、iOS7以降は太字になるかどうかの違いしかない。

Plain
Styleに「Plain」を設定

 

Border。スタイルはPlainと変わらない。
Styleに「Border」を設定

 

Done。太文字になった。
Styleに「Done」を設定

System Item

ボタンにアイコンを設定する。下表はアイコンの一覧。

アイコン 設定値 説明
1 bar_button_custom Custom 自前のタイトルや画像を表示する。
2 System Itemに「Add」を設定 Add 追加
3 System Itemに「Edit」を設定 Edit 編集
4 System Itemに「Done」を設定 Done 完了
5 System Itemに「Cancel」を設定 Cancel キャンセル
6 System Itemに「Save」を設定 Save 保存
7 System Itemに「Undo」を設定 Undo 取り消し
8 System Itemに「Redo」を設定 Redo やり直し
9 System Itemに「Compose」を設定 Compose 作成
10 System Itemに「Replay」を設定 Reply 返信
11 System Itemに「Action」を設定 Action 実行
12 System Itemに「Organize」を設定 Organize 移動
13 System Itemに「Trash」を設定 Trash 削除
14 System Itemに「Bookmarks」を設定 Bookmarks お気に入り
15 System Itemに「Search」を設定 Search 検索
16 System Itemに「Refresh」を設定 Refresh 更新
17 System Itemに「Stop」を設定 Stop 停止
18 System Itemに「Camera」を設定 Camera 撮影
19 System Itemに「Play」を設定 Play 再生
20 System Itemを「Pause」に設定 Pause 一時停止
21 System Itemに「Rewind」を設定 Rewind 巻き戻し
22 System Itemに「First Forward」を設定 Fast Forward 早送り
23 非表示 Page Curl ページめくり
23 非表示 Flexible Space 後ほど説明
24 非表示 Fixed Space 後ほど説明

 

Flexible Space

System Itemに「Flexible Space(以下、可変スペース)」を設定すると、部品の間にスペースを入れる部品になる。可変スペースが画面左右端に向かってボタンを押すようにしてボタンの位置が決まる。

例えば、下図のようにツールバーの中に可変スペース、ボタンの順で並べるとボタンはどのように配置されるか。

Flexible Space、ボタンの順に並べる

 

可変スペースが右に向かってボタンを押すことで、ボタンはバーの右端に配置される。

ボタンは右端に表示される

 

では、下図のように並べるとボタンはどのように配置されるか。

Flexible Space、ボタン、ボタン、Flexible Spaceの順で配置した場合

 

左右の可変スペースに押されて2つのボタンは中央寄りに配置される。

2つのボタンがバーの中央に表示された

 

ちなみに、Xcodeの部品リストに「Flexible Space Bar Button Item」というのがあるが、これはバーボタンアイテムのSystem Itemを「Flexible Space」に設定したものと同じものである。

Flexible Space Bar Button Item

 

Fixed Space

System Itemに「Fixed Space(以下、固定スペース)」を設定すると、部品の間に固定幅のスペースを入れる部品になる。

例えば、下図のように並べるとボタンはどのように配置されるか。

固定スペースを入れる例

 

ボタンの左側に固定幅のスペースが入る。スペースのデフォルト値は42ピクセル。

ボタンの左端に固定スペース

 

スペースの幅を変えるのはストーリーボードからはできないので、以下のコードのようにソースコードからwidthプロパティの値を変更する。

Fixed Spaceの幅を200に設定した結果

 

ちなみに、Xcodeの部品リストに「Fixed Space Bar Button Item」というのがあるが、これはバーボタンアイテムのSystem Itemを「Fixed Space」に設定したものと同じものである。

Fixed Space Bar Button Item

 

Tint Color

ボタンの色。

下図はSystem Itemに「Play」、Tint Colorに緑色を設定した結果

Tint Colorに緑を設定

 

Title

ボタンのタイトル。System Itemに「Custom」を設定したときに設定したタイトルが表示される。

 

Image

ボタンの画像。System Itemに「Custom」を設定したときに設定した画像が表示される。TitleとImageどちらか一方しか設定できない。

画像の色はTintColorで塗りつぶされる。例えば、下図の画像をImageに登録するとどうなるか。

Imageに設定する画像

 

下図のようになる。

画像の色がTintColorで塗りつぶされる

 

画像の色を塗りつぶされたくない場合は、以下のコードのように画像のレンダリングモードをAlwaysOriginalにする。

 

すると、下図のように実際の画像が表示される。

画像が実際のカラーで表示される

 

Tag

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

 

Enabled

チェックを外すとボタンが押せなくなる。