【iOS開発】iPhone / iPadのツールバーに「戻る」矢印ボタンを追加する方法

ツールバー上にボタンを作成するには、iOSの2つの異なるコンポーネントと、戻る矢印（バックアロー）画像が必要です。まず、それぞれのコンポーネントが何なのかを見ていきましょう。

必要な2つのコンポーネント

• Toolbar（ツールバー）：iOSネイティブのコンポーネントで、画面下部にアイテムやボタン類を表示するために使用されます。
• Bar Button Item（バー ボタン項目）：ツールバーやナビゲーションバー上に配置されることが多いボタンです。

ツールバーをStoryboardで配置すると、デフォルトでBar Button Itemが1つ自動的に付属します。これを利用すれば、追加のパーツをゼロから作る必要はありません。

実装手順

1. プロジェクトの準備

まず新しいプロジェクトを作成し、main.storyboard上にあるViewControllerに、分かりやすいよう任意の背景色を設定しておきましょう。

2. ツールバーの配置と制約の設定

オブジェクトライブラリからToolbarをドラッグ＆ドロップで、ViewControllerの画面下部に配置します。このときBar Button Itemも自動的に一緒に作成されます。

次にツールバーを選択し、Auto Layoutの制約として「下・左・右：0」「高さ：50」を設定してください。これにより、どのデバイスサイズでも画面下端にぴったりと固定されます。

3. 戻る矢印画像の設定

「戻る」用の矢印画像（back画像）を用意してプロジェクトに追加します。その後、ツールバー上のBar Button Itemを選択し、アトリビュートインスペクタ（Attributes Inspector）からImage欄で矢印画像を指定しましょう。

同じアトリビュートインスペクタでは、画像のほかにタイトル（Title）、ティントカラー（Tint Color）などのプロパティも設定できますので、デザインに合わせて調整するとよいでしょう。

4. 実行して確認

ここまでの設定が完了したらプロジェクトを実行します。以下のように画面下部に矢印ボタン付きのツールバーが表示されます。

補足：ツールバーのアイテム自動配置について

ツールバーは、配置されたアイテムの数に応じて自動的に間隔を計算し、等間隔で整列してくれます。複数のボタンを並べたい場合も、レイアウトを手動で調整する必要はほとんどありません。

このように、Storyboardとわずかな設定だけで、iPhone / iPadアプリのツールバーに簡単に「戻る」矢印ボタンを実装できます。