【Storyboard】 基本的な使い方を解説

今回はストーリーボードの基本的な使い方について以下のことを説明します。

  • View・ViewControllerの配置の仕方
  • UIButtonを使ってストーリーボード上での画面遷移の仕方

iOSプロジェクトは作成済みとしてここでは省略します。プロジェクトの作り方についてはこちらに書いてます。

ios-app-init iOSアプリプロジェクト作成手順
環境・バージョン

  • swift 5.2.4
  • Xcode 11.6
  • macOS 10.15.6 Catalina
  • iOS 14.0.1

ストーリーボードとは

ストーリーボードとは何か

ストーリボードとはアプリUIを視覚的に表現できる機能です。

ドラッグ&ドロップでのViewの配置やAutoLayoutの指定、背景や文字色・サイズの設定、画面遷移などの多くのことが行えます。

画面

画面の見方

まずストーリーボード画面の説明からします。

ストーリーボードを開くと以下のような画面になるかと思います。

今回はストーリーボードを使用する際によく使用する場所に色をつけておきました。

storyboard_description

赤い背景部分

配置したViewがツリー状で確認できる場所です。

ストーリーボードに配置したViewControllerも確認することができます。

青い背景部分

実際に表示される画面を模したエディタです。

ここにViewを配置したり、制約をかけたりします。

黄色い背景部分

Viewの背景や文字の色・大きさなどの細かい設定を行う箇所です。

今回は使用しないです。

緑色の背景部分

各種View・ViewControllerが置いてあります。

ここから配置したいものを選択していくことになります。

紫色の背景部分

このボタンはViewの制約をかける場所です。

今回は説明しないですが、ストーリーボードを使用する際には毎回使うことになります。

View・ViewControllerの配置

Viewの配置

それでは早速Viewの配置の仕方を見ていきましょう。

今回はUIButtonを配置します

以下の手順でUIButtonを検索してください。

  1. サイドメニューを開く
  2. UIコンポーネントを選択する
  3. 検索タブに「tableview」と入力する
  4. 様々あったUIコンポーネントからUIButtonが検索結果に表示される
search_button

次はドラッグ&ドロップでUIButtonをViewControllerに配置します。

button_drag_and_drop

これでViewの配置は完了です。

それではこの段階でビルドしてみましょう。

まだButtonと表示されるだけですが、シュミレータにこのように表示されていれば成功です!

simulator

ViewControllerの配置

次はViewControllerの配置の仕方を見ていきます。

ただやり方はViewの場合とほとんど同じです。

まずはUIButtonの時と同じようにViewControllerを検索します。

  1. 検索タブに「viewcontroller」と入力する
  2. UIViewControllerが一番上に表示される
search_view_controller

次にドラッグ&ドロップをするのですが、先ほどのUIButtonとは違いすでにあるViewControllerの隣にドロップさせます。

view_controller_drag_and_drop

これでViewControllerの配置は完了です。

画面遷移

次はストーリーボード上で画面遷移をさせてみましょう

背景色を変える

画面遷移の前に背景が白色だと遷移がわかりにくいので背景色を変えましょう。

まずは左のView一覧からツリーの一番上にあるViewを選択します。

select_top_view

次に右側の設定タブから「Background」を選択します。

すると色を選択できるポップアップが表示されるので好きな色を選んでください。

今回は緑色を選択してみました。

change_first_view_background

右側に配置したViewControllerも同様に背景色を変えておきます。

change_second_view_background

画面遷移をさせる

それでは画面遷移したことがわかりやすくなったところで実装していきましょう。

まずはCtrlボタンを押しながらUIButtonを左クリックしてドラッグさせると青い線が出てきます。

それを右側のVIewControllerまで引っ張り離しましょう。

drag_button

すると黒いポップアップが表示されるので「show」を選びます。

select_show

簡単ですが、これで画面遷移が実装されました。

それではビルドして確認してみましょう。

このように動けば成功です!

goal

まとめ

今回はストーリーボードの使い方を説明しました。

ストーリーボードは視覚的に確認しながら画面を作れるので便利です。

実際の開発でも使われることが多いので是非使えるようにしておきましょう!