XcodeでUIToolbar(ツールバー)を追加する方法【初心者向け】
XcodeのUIパーツ【UIToolbar(ツールバー)】を追加する方法を初心者向けに解説した記事です。iPhoneアプリなどで、補助的な機能を持ったボタン（UIToolbarButtonItems）を配置するために使われるパーツです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。
今回は、XcodeでUIToolbar（ツールバー）を追加する方法を初心者向けに解説します。
なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。
UIToolbarとは
UIToolbarはiOSアプリで、補助的な機能を持ったボタン（UIToolbarButtonItems）を配置するために使われるパーツです。
AppleのガイドラインではiPhoneアプリでは画面下部に、iPadアプリでは上下に配置できることになっています。
UIToolbarの使い方
InterfaceBuilderでToolBarを選択して、画面下部にドラッグ&ドロップして配置します。
このとき、最初から一つボタンが用意されています。
ボタンはデフォルトで24種類用意されています。ただし、FixedSpaceとFlexibleSpaceはボタンの間の余白を取るためのものです。
またiOS7以降はPage Curlのような画面遷移がなくなりましたのでご注意ください。
デフォルトで用意されているボタンには、それぞれ特定の意味があります。それと異なる意味を持つボタンは文字列で説明するか、画像を用意する必要があります。
画像については、特にサイズ指定に関するガイドラインはありません。UIToolBarに配置した段階で自動的に調整されます。
ボタン間の空白の設定
まずはボタンを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アプリ開発オンラインブートキャンプを開催しています。
