*

Xcode5で画面にナビゲーションバーを配置して利用する。

公開日: : 最終更新日:2014/08/02 Objective-C ,


スポンサードリンク



今回は「ナビゲーションバー」をiPhoneアプリの画面に配置して利用する方法を記載させていただきます。

どこかのエントリーでも同じ様な事を記載いたしまいたが、本エントリーでも「ナビゲーションコントローラ」を利用しない、
単独での利用を前提としており、純粋に、「ナビゲーションバー」で出来ることにフォーカスしてます。
「ナビゲーションコントローラ」につきましては、近々エントリーを作成する予定です。

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

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

  1. ナビゲーションバーの概要
  2. コンポーネントとしてのナビゲーションバー
  3. ナビゲーションバーの実際の利用例

 

1 ナビゲーションバーの概要

画面上部に配置され、タイトルや、画面遷移イベントを発火させるためのボタンが配置されます。
バーの高さは88pxです。
なお、標準の部品を利用せず、独自にナビゲーションバー相当の物を作成する場合もこのサイズに準拠することが推奨されています。
これはナビゲーションバーに限ったことではないですが・・・

ナビゲーションバーの外観と簡単な説明

「Interface Builder」からナビゲーションバーを配置する場合は、タイトルの左右にボタンアイテムが1つしか配置できません。
実際問題として左ボタンの場所には、「ナビゲーションコントローラ併用時」には「戻る」ボタンが表示されるので利用できません。

タイトルの左右にボタンアイテムを1つずつ配置して、実際に動作させた時のイメージは以下の様になります。
スクリーンショット 2014-04-25 15.48.20

「Documents outlet」では以下の様に表示されます。
スクリーンショット 2014-04-25 15.54.00

実際のコンポーネントの配置状況を簡単に図示してみました。吹き出しは「Documents outlet」のでの名称としています。
奇麗に平行になってないですが・・・
スクリーンショット 2014-04-25 16.41.14

「Interface Builder」からは「Navigation Item」の左または右ボタンに単一の「Bar Button Item 」しか配置できませんが
Objective-Cのコードを書けば可能です。

ナビゲーションコントローラ併用時

一般的には、「ナビゲーションコントローラ」と併用されることが多いです。
この場合には、左ボタンに画面遷移元の画面のタイトルが自動的に表示されます。
イメージとしては以下の様になります。
スクリーンショット 2014-04-25 13.17.50

そのボタンをタップすると、画面遷移元の画面に遷移します。この処理はコーディングレスで
「ナビゲーションコントローラ」が自動的に制御してくれます。

2 コンポーネントとしてのナビゲーションバー

ナビゲーションバー関連のクラス

ナビゲーションバーのクラスはUINavigationBar
ナビゲーションアイテムのクラスはUINavigationItem
Bar Button ItemのクラスはUIBarButtonItem
となります。

ナビゲーションバー関連の主要設定可能項目

先ほど示した図に、クラス名や対応するプロパティを追加し、主要設定可能項目が一望できる図が以下になります。
斜めと平行な文字が混在して見にくいですね・・・
スクリーンショット 2014-04-25 20.26.18

ナビゲーションバー関連の一般的な設定項目のユーティリティエリアでの設定方法

Navigation Bar

「Navigation Bar」としての設定項目は以下の通りです。

設定名 説明
Style Default,Black,black Translucentからスタイルを指定
Translucent 透過を有効にするかどうかを指定
BarTint ナビケーションバーの背景色を指定
Title Font タイトルのフォントを指定
Title Color タイトルのフォントの色を指定
Title Color タイトルのフォントの色を指定

 

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

Navigation Item

「Navigation Item」としての設定項目は以下の通りです。

設定名 説明
Title タイトルを指定
Prompt Promptとして表示する文字列を指定を指定
Back Button ナビゲーションバーで表示される「戻る」ボタンのテキストは、前画面の画面タイトルだが、これを指定した文言に変更する。

 

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

Bar Button Item

「Bar Button Item」としての設定項目は以下の通りです。

設定名 説明
Style Plain,Bordered,Doneから選択して指定
Identifier 普通のボタンの場合はCustomを選択する。他の値を選択すると、ボタンが選択した責務機能の見た目になる。Addを選択すると+ボタン等
Tint ボタンに表示されるタイトルのフォントの色を指定
Tag 複数ある「Bar Button Item」を識別したい時に固有な数値を割り当てる

 

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

3 ナビゲーションバーの実際の利用例

ナビゲーションバーを画面に配置し、ボタンも配置したり、複数ボタンを配置したり、
と色々(とまでは言えませんが・・・)試してみたいと思います。

画面への配置

ナビゲーションバーと左右に1個のボタンを配置

まずは、ナビゲーションバーのみ画面に配置してみます。
スクリーンショット 2014-04-25 21.51.46

この時点で、「Documents outlet」では以下の様に表示されます。
ナビゲーションバーのみ配置だけなのに「Navigation Bar」と同時に「Navigation Item」も配置されています。
スクリーンショット 2014-04-26 15.16.16

実行すると、以下の画面のようになりました。
スクリーンショット 2014-04-26 15.20.51

ナビゲーションバーと左側ボタンと右側ボタンの配置

とりあえず、Titleを「とりあえずタイトル」に変えてからボタンを追加していこうと思います。

ナビゲーションバー関連のコンポーネントでも、他のコンポーネントと同様に、ダブルクリックで表示テキストが変更可能です。
スクリーンショット 2014-04-26 15.25.16

次に左側にボタンを追加してみます。
スクリーンショット 2014-04-26 15.27.55

ボタンのテキスト(正確にはTitle)を「左ボタン」に変更しました。
同様に右側にもボタンを追加し、テキストを「右ボタン」に変更しました。

「Documents outlet」と「Canvas」は以下の様になりました。
スクリーンショット 2014-04-26 15.33.59

ナビゲーションバーに配置するボタンのIdentifier

配置するボタンのIdentifierを指定することで、定型的なアクションに対応したボタンになります。
設定する画面箇所は以下の通りです。
スクリーンショット 2014-08-02 18.22.30

なお、Identifierはツールバーやナビゲーションバー等に属するボタンでのみ設定可能となります。

定型的なアクションに対応したボタンは以下の通りです。

Identifier 画像
Add UIBarButtonAdd_2x
Edit UIBarSystemItemEdit_2x
Done UIBarButtonSystemItemDone_2x
Cancel UIBarSystemItemCancel_2x
Save UIBarButtonSystemItemSave_2x
Undo UIBarButtonSystemItemUndo_2x
Redo UIBarButtonSystemItemRedo_2x
Compose UIBarButtonCompose_2x
Replay UIBarButtonReply_2x
Action UIBarButtonAction_2x
Organize UIBarButtonOrganize_2x
Trash UIBarButtonTrash_2x
Bookmarks UIBarButtonBookmarks_2x
Search UIBarButtonSearch_2x
Refresh UIBarButtonRefresh_2x
Stop UIBarButtonStop_2x
Camera UIBarButtonCamera_2x
Play UIBarButtonPlay_2x
Pause UIBarButtonPause_2x
Rewind UIBarButtonRewind_2x
Fast Forward UIBarButtonFastForward_2x

 

ナビゲーションバーと右側に2つのボタン配置

左側または右側の領域に複数ボタンを配置するにはObjective-Cのコードを記載する必要があります。
現在配置されているボタンを削除してください。

次に右側に2つのボタンを配置するコードを書きます。
ViewController.hは以下の様になりました。

UIBarButtonItemのinitWithTitle:style:target:action:メソッドで以下の設定を行っています。

  • ボタンに表示するテキスト
  • ボタンのスタイル
  • デリゲート先
  • タップされた時のイベントリスナーのメソッド

「UIBarButtonItem」の詳細な情報につきましては、
iOS Developer Libraryの「UIBarButtonItem Class Reference」を参照ください。

実行時の画面は以下の様になりました。思いっきりダメな例ですね、
仕様的には、ボタンを優先して、ナビゲーションバーのタイトルを削るんですね。
スクリーンショット 2014-04-26 17.39.55

ナビゲーションバーと右側に4つのボタン配置

どこまでボタンが表示されるんでしょうか?、2個追加して確認してみましたが、とことんボタン重視ですね・・・、
仕様的にはボタン配置に対する制約は無いようですが、その分、目視の確認が必要ですね。
スクリーンショット 2014-04-26 18.51.40

以上で「Xcode5で画面にナビゲーションバーを配置して利用する。」は終了です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcode(Objective-C)のデリゲートとプロトコルの使い方[前編]

Xcode(Xcode5でも同様)でアプリ開発をしていて、少し複雑な事をしようとするとデリゲートと言

記事を読む

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

文字列の処理、操作は、どの言語でプログラムを作成するにしても重要で欠かせないものです。 Obj

記事を読む

Xcode6&Objective-Cにおけるブロック構文(Blocks記法)の利用方法

Xcode&Objective-CにおけるBlock構文の説明のエントリーとなります。 B

記事を読む

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

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

記事を読む

Xcode(Objective-C)のデリゲートとプロトコルの使い方[後編]

ではXcodeが既に用意しているデリゲートを利用した実装例について説明させていただきました。

記事を読む

Xcodeの使い方[エディタエリアの環境設定]

「Xcodeの使い方」に引き続き「Xcodeの使い方[エディタエリアの環境設定]」となります。

記事を読む

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

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

記事を読む

Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「Attributes」,「Size」,「Connections」Inspector]

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

記事を読む

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

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

記事を読む

Xcode6からはProjectName-Prefix.pchは自動的に生成されませんが、それでもpchファイルを利用したい時の利用方法

小ネタですが、Xcode6からはProjectName-Prefix.pchは自動的に生成されなくな

記事を読む

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 ↑