XcodeでUIToolbar(ツールバー)を追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。

今回は、XcodeでUIToolbar（ツールバー）を追加する方法を初心者向けに解説します。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UIToolbarとは

UIToolbarはiOSアプリで、補助的な機能を持ったボタン（UIToolbarButtonItems）を配置するために使われるパーツです。

AppleのガイドラインではiPhoneアプリでは画面下部に、iPadアプリでは上下に配置できることになっています。

 

 

UIToolbarの使い方

InterfaceBuilderでToolBarを選択して、画面下部にドラッグ&ドロップして配置します。

このとき、最初から一つボタンが用意されています。

 

ボタンはデフォルトで24種類用意されています。ただし、FixedSpaceとFlexibleSpaceはボタンの間の余白を取るためのものです。

またiOS7以降はPage Curlのような画面遷移がなくなりましたのでご注意ください。

デフォルトで用意されているボタンには、それぞれ特定の意味があります。それと異なる意味を持つボタンは文字列で説明するか、画像を用意する必要があります。

画像については、特にサイズ指定に関するガイドラインはありません。UIToolBarに配置した段階で自動的に調整されます。

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

ボタン間の空白の設定

まずはボタンを2つ配置してみました。

デフォルトでは、画面端からの余白もボタン間の余白もない状態です。

これでは見づらいですし、ユーザーも使いにくいでしょう。

 

そこで余白を追加します。

前述の通り、余白を空けるためののボタンとして、FixedSpace（固定幅）とFlexibleSpace（可変幅）の2つが用意されています。これらのボタンはユーザーの目には見えません。

 

まず、FixedSpaceを利用した例です。

空白は用意されていますが、固定幅なので、左側に偏っています。

続いて、FlexibleSpaceにしてみます。

こちらですと、等間隔に並ぶので綺麗に配置できました。

 

 

BarButtonのイベントの受け取り

実際に動作するように設定をおこないます。

目的のBarButtonを選択した状態で、ヘッダーファイルに右ドラッグします。

 

ヘッダーファイル内でドロップすると、ダイアログが表示されるので、ConnectionをActionに設定して適切な名称をつけます。

 

その結果、ヘッダーファイルには

– (IBAction)AddPressed:(id)sender;

が定義されました。

 

また、実装ファイルには

– (IBAction)AddPressed:(id)sender
{
}

が定義されます。

これでボタンが使えるようになる準備ができました。
今回の記事は以上です。

UIToolbarは、様々なボタンを配置するのに適していますが、あまり詰め込み過ぎるとユーザーにとって使いにくくなるのでご注意ください。

 

他のUIパーツを追加したい場合は、XcodeでUIWebViewを追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。