第16回タブコントローラーを表示させる｜ドットインストールでiPhoneアプリ作成を勉強

※本ページはプロモーションが含まれています

公開日：2025/04/14 更新日：2025/04/14

前回（第15回アプリに地図を表示させる｜ドットインストールでiPhoneアプリ作成を勉強）はアプリに地図を表示させました。今回は別の画面遷移を行うため、新しいプロジェクトを作成して、タブによる画面遷移について書きます。

新しいプロジェクトの作成

ショートカットを使用した新しいプロジェクトの作成方法を紹介。

「command」+「shift」+「n」を同時押しで新規プロジェクトの作成画面が表示される。「Single View Application」を選択し「Next」をクリック。 Xcode新規プロジェクトの作成

「Product Name」を「MythirdApp」として、他の設定は以前通りで、「Next」をクリック。新しいプロジェクトに名前をつける

保存場所もいつも通りで「XcodePractices」内に作成。「Create」をクリック。 Xcode 2

ナビゲーションバーのストーリボードをを選択しストーリボードを表示させる。ストーリボードを選択

ストーリボード内のViewを選択してから、メニューバーの「Editor」→「Embed In」→「Tab Bar Controller」をクリック。タブバーを追加

Viewの下にタブバーが表示され、新しいViewが1つ追加されている。

タブを複数作るためにViewを2つ追加する。ユーティリティーエリアの「Object library」をクリックし、「View Controller」をストーリボード内にドラッグ＆ドロップ。

「Tab Bar Controller」と表示されているViewから各Viewへ「control」を押しながらドラッグ＆ドロップ。「View controllers」を選択。タブバーを追加

各Viewに「Label」を追加し、どのViewか分かるようにする。ラベルを追加

タブの表示が「Item」になっているので、わかりやすいように変更する。タブをクリックし、ユーティリティーエリアの「Bar Item」内の「Title」をラベルの内容に変更。他のViewも同じように変更。タブの名前を変更

タブをクリックし、ユーティリティーエリアの「Tab Bar Item」内の「Badge」に数字を入れるとタブにバッジが表示される。

タブをクリックし、ユーティリティーエリアの「Tab Bar Item」内の「Identifier」を変更する。

独自のアイコンを使いたい場合は、ナビゲーターのプロジェクト内にアイコンをドラッグ＆ドロップしてコピーする。（アイコンはhttp://www.glyphish.comの無料アイコンを使用した。）画像をプロジェクトに追加

「Destination」にチェックを入れ「Finish」画像コピーの確認

変更したいタブをクリックし、ユーティリティーエリアの「Tab Bar Item」内の「Identifier」を「Custom」にし、「Bar Item」内の「image」をクリックすると先程追加したアイコンがあるので、表示させたいアイコンを選択。アイコンを変更する

シミュレーターを実行して動作を確認する。シミュレーターで動作を確認。

タブアイコンが変更され、各タブをクリックするとタブの内容に遷移することが確認できた。