*

Xcode5で画面にツールバーを配置して利用する。

公開日: : 最終更新日:2014/05/12 Objective-C ,


スポンサードリンク



「ナビゲーションバー」と同様に「ツールバー」もナビゲーションコントローラ(UINavigationController)
と併用することが一般的ではあることは疑いようのない事実ですが、
画面コンポーネントとしての「ツールバー」にフォーカスを当てると言う意味で、
今回もナビゲーションコントローラと併用しない形で説明させていただきます。

利用しているXcodeはXcode5(5.1)となります。

本エントリーの内容は以下の通りです。

  1. ツールバーの概要
  2. コンポーネントとしてのツールバー
  3. ツールバーの実際の利用例

 

1 ツールバーの概要

ツールバーの外観と簡単な説明

ツールバーは画面の下部に配置され、ツールバーの上には機能に対応したボタンが配置されます。
ツールバーにはボタンと固定スペースと可変スペースが配置可能です。

バーの高さは88pxです。これはナビゲーションバーと同じサイズです。
なお、標準の部品を利用せず、独自にツールバー相当の物を作成する場合もこのサイズに準拠することが推奨されています。
これはナビゲーションバーに限ったことではないですが・・・
スクリーンショット 2014-04-29 21.19.04

前述の画像の状態の時のDocument Outlineは以下の様になっています。
スクリーンショット 2014-04-29 22.13.20

上記の画面も固定スペースと可変スペースを利用してボタンの配置位置を制御しています。
この配置方法については後述いたします。

ナビゲーションバーとの違い

  1. ナビゲーションバーには前の画面に戻るボタンがデフォルトで配置されるが、ツールバーには配置されていない
  2. ナビゲーションバーにはタイトルが設定できるが、ツールバーには設定できない。
  3. ナビゲーションバーには定型作業的なボタンを主に配置、アプリ固有の機能に対応したボタンをツールバーに配置する。

 

ナビゲーションバーとの違いの3の補足

ナビゲーションバーにアプリ固有の機能のボタンを配置してももちろん良いのですが、
ナビゲーションバーに配置可能なボタン数はツールバーに比べると少ないです。
この機能はナビゲーションバー、それ以外はツールバー等の棲み分けを行ったり、
全てツールバーに配置する方が良い等の事を考え、利用者の操作性が良いボタン配置を行うことが望ましいです。

2 コンポーネントとしてのツールバー

ツールバー関連のクラス

ツールバー関連の主要クラスとしては、

  • ツールバーのクラスはUIToolBar
  • ツールバーに配置するボタンのクラスはUIBarButtonItem

が挙げられます。

UIBarButtonItemはナビゲーションバーと同じクラスが用いられています。

なお、Objective-Cのコードを記述する場合は、UIBarButtonItemの初期化の仕方を変更することで
「1 ツールバーの概要」で言及させていただいた固定スペースと可変スペースも対応可能です。
Xcodeのみでツールバーを構成する段階では、この知識は不要ですが、コードでツールバーを
動的に制御する必要性が生まれる可能性もありますので、押さえて置く必要があります。

ツールバー関連の主要設定可能項目

Toolbar

設定名 説明
Style Default,Black,black Translucentからスタイルを指定
Translucent 透過を有効にするかどうかを指定
BarTint ツールバーの背景色を指定

 

対応する設定画面は以下の画像の赤枠の部分となります。
スクリーンショット 2014-04-30 18.03.51

Bar Button Item

「Bar Button Item」はナビゲーションバーと同じ説明となりますので
「Xcode5で画面にナビゲーションバーを配置して利用する。」での説明箇所をご覧ください。

Bar Button Item – Fixed Space

固定スペースとして利用されるときのUIBarButtonItemです。
この時だけ、固定スペースのサイズが以下の画像の赤枠の部分で設定できます。
スクリーンショット 2014-04-30 18.30.40

3 ツールバーの実際の利用例

ツールバーを画面に配置し、ボタンを配置したり、複数ボタンを配置したり、
システムで用意されたイメージのボタンを配置してみたり
と色々(とまでは言えませんが・・・)試してみたいと思います。

ツールバーとその左端、右端にボタンを1つ配置してみる。

まずは、ツールバーを画面に配置してみます。
スクリーンショット 2014-04-30 18.38.17

配置したツールバーの中央を画面の中央に揃えはしましたが、こんな感じになりました。

スクリーンショット 2014-04-30 18.41.06

おやと思う事がありますね、Documents Outletには
「ToolBar」の配下に「Bar Button Item – Item」が1つ追加されています。
まあボタン使うためにツールバー配置したんだから、その仕様もありですかね・・・

しかし、このボタンは普通に使っても良いんですよね、特別な意味とか無いんですよね・・・
何も考えずに使います!

これで左端のボタンはOKです。次は右端なんですが「Bar Button Item」を
普通に右端にドラッグしてもうまく行きません。
スクリーンショット 2014-04-30 18.48.10

こんな感じに左側づめで配置されてしまいます。
スクリーンショット 2014-04-30 18.52.27

ここで固定スペースと可変スペースの登場です。
固定スペースは任意の値のスペースを空ける物なので、イメージしやすいと思います。
逆に可変スペースはイメージしにくいですよね。

まさに今やりたい事に対して可変スペースは最適です。
いまあるボタンの右側に可変スペースを配置してみます。
スクリーンショット 2014-04-30 19.34.34

配置後は、以下の様になりました。
スクリーンショット 2014-04-30 19.36.22

次に「Bar Button Item」を配置します。
静止画像では説明できないのですが、「Bar Button Item」をツールバーにドラッグすると
セパレーターが表示され、先ほど配置した可変スペースのどちら側に新しいボタンを配置するかが選択できます。
まあ、これは可変スペースの時だけでなく、既存ボタンのどちらに新規ボタンを配置するか選択する時と同じです。

右側に「Bar Button Item」を追加した後の画面は以下の様になりました。
可変スペースは、はさまれているボタンとボタンの間一杯にひろがって、スペースを確保する物です。
ボタンが無い場合はツールバーがサイズ決定の対象になります。
スクリーンショット 2014-04-30 19.43.58

アプリとして実行すると以下の様になりました。思った通りのツールバーになりました。
スクリーンショット 2014-04-30 19.43.01

ツールバーとその左端と中央、及び右端に複数ボタンを配置してみる。

左端に「巻き戻し」、「再生」、「進む」ボタン
中央に「中央」ボタン
右端に「右端」、「追加」ボタン
を配置します。

なお、「巻き戻し」、「再生」、「進む」、「追加」ボタンはシステムで用意された画像やフォーマットのボタンです。
配置した「Bar Button Item」のIdentifierを変更することでこれらのボタンの見た目を選択可能です。
詳細は「Xcode5で画面にナビゲーションバーを配置して利用する。」のナビゲーションバーに配置するボタンのIdentifierをご覧ください。

まずは、「Bar Button Item – Flexible Space」を削除します。
画面は以下の様になっていると思います。
スクリーンショット 2014-04-30 20.43.17

先にもう1つ「Bar Button Item」を配置します。
その後、再左端のボタンを選択し「Identifier」をクリックします。
スクリーンショット 2014-04-30 20.48.34

「Identifier」をクリックすると以下の画面が表示されますので「Rewind」を選択します。
スクリーンショット 2014-04-30 20.52.09

同様に2番目のボタンの「Identifier」を「Play」、3番目のボタンの「Identifier」を「Fast Forward」に変更してください。
この時点で画面は以下のようになっていると思います。
スクリーンショット 2014-04-30 20.57.12

中央に「中央」ボタンを配置するために、「Fast Forward」ボタンの次に固定スペースをはさんで
「中央」ボタンを配置する必要があります。

固定スペースを配置してください。スペースのサイズは「中央」ボタン配置後に変更します。
スクリーンショット 2014-04-30 21.04.49

固定スペースの右側に「Bar Button Item」を配置後に、
コンポーネントをダブルクリックしてテキストを「中央」に変更します。おお!、ちゃんと中央ですね。
固定スペースのサイズ変更は必要不要ですね。ちなみにですが固定スペースのWidth=42です。
スクリーンショット 2014-04-30 21.20.40

最後に右端に「右端」と「追加」ボタンを追加します。
今度は追加する2ボタンを右端に置きたいので「可変スペース」を設置し、その右に2ボタンを追加します。

「可変スペース」追加後の画面
スクリーンショット 2014-04-30 21.24.30

「右端」ボタン追加後の画面
スクリーンショット 2014-04-30 21.25.34

「追加」ボタンを追加後の画面
スクリーンショット 2014-04-30 21.27.09

実行時の画面は以下の様になりました。

スクリーンショット 2014-04-30 21.55.14

ツールバーに配置可能なボタンの数

ツールバーに配置可能なボタンは最大数は制限されていませんが、
本当にそうか確認してみました。確認したのは4インチのiPhoneシュミレーターです。

・7個のボタンを配置した時
見た感じはもう少し配置できそうですね、まあ各ボタンのサイズにも依存するので何とも言えません。
スクリーンショット 2014-05-09 14.56.18

・8個のボタンを配置した時
かなり一杯一杯なかんじですね。
スクリーンショット 2014-05-09 15.03.15

・9個のボタンを配置した時
「Cancel」ボタンを右端に追加したのですが、ほぼ完全に見えてないですが、
iOSはできるだけ表示しようと頑張ってます。
スクリーンショット 2014-05-09 15.05.25

以上の結果から、配置可能なボタンの個数制限はないことが分かりましたが
一杯一杯にボタンを配置すると押し間違い等が発生するので、その辺はUI時に考慮が必要です。

以上で「Xcode5で画面にツールバーを配置して利用する。」は終了です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[後編:データのやり取り]

では、セグエを利用した画面遷移を実装しました。 後編では、各画面間でデータのやり取りを行えるよ

記事を読む

Xcode5&Objective-CでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法

本エントリーでは、Xcode5のテーブルビューにUINibを使ったカスタムセル(UITableVie

記事を読む

Xcode&Objective-Cの文字列処理をユニットテスト(XCTestフレームワーク)で確認する。[NSStringの比較]

前回は、NSStringの定義、分割、検索の各処理を確認しました。 二回目は、NSStringの比

記事を読む

Xcodeのユーティリティエリアの使い方[ソースファイル表示時]

本エントリーでは、Xcodeの「ユーティリティエリア」の使い方を説明させていただきます。 利用

記事を読む

iOS(Xcode6とObjective-C)におけるマルチスレッド(非同期)処理の実装方法その2[GCD(Grand Central Dispatch)の利用]

本エントリーではGCD(Grand Central Dispatch)を利用したiOSのマルチスレッ

記事を読む

Xcode5のEmpty Application templateでStoryboardを利用する。

Xcode5のEmpty Application templateでStoryboardを利用する方

記事を読む

iOS(Xcode6)におけるマルチスレッド処理の実装方法[iOSのマルチスレッド処理の概要]

iOSにおけるマルチスレッド処理の実装方法を数回に分けて説明させていただきます。 開発環境のXco

記事を読む

Xcode5の「Auto Layout」機能の使い方[簡単な画面レイアウトを構成してみる。]

「基礎知識と制約(Align:アライメント)の設定方法」 で「Auto Layout」機能の利

記事を読む

Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「File」,「Quick Help」,「Identity」]

本エントリーでは、「Xcodeのユーティリティエリアの使い方」に引き続き、「ストーリーボード」表示時

記事を読む

Xcode5でInterface Builderの接続状態の確認と切断を行う。

「Xcode5で画面コンポーネントを利用するための基本」で本来説明すべき内容でしたが あちらのエン

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑