iOSアプリ開発

iOSアプリ開発が簡単にできるStoryboard入門

iOSアプリを開発しようとXcodeをダウンロードしてプロジェクト作成までした。けれど、どうやってアプリを作れば良いのかわからない、Xcodeの使い方がよくわからないという方向けにStoryboardの使い方について紹介します。

Storyboardを使えば、簡単にアプリの画面を設計することができるのでぜひ覚えてみてください。

目次

  1. StoryboardはアプリUIを作るための機能
  2. 簡単な画面遷移アプリを作ってみよう
    • トップ画面を変更する
    • NavigationControllerの最初の画面を変える
    • 画面の遷移を実装する
  3. 設置したUIを細かくプログラムする方法
  4. 自分なりにアレンジしてみよう

StoryboardはアプリUIを作るための機能

iOSアプリのUIを作るために提供されている機能で、設計図のような意味合いです。Storyboardを使うことで、画面を視覚的に作ることが開発することができます。

デバイスごとのレイアウト・確認、画面遷移、デザインなどを確認しながらドラッグ&ドロップで開発できるので、初心者にとってもアプリが作りやすくなる機能なので積極的に使っていきましょう。

アプリを作るためには、まずXcodeプロジェクトを作る必要があるので以下の記事を参考にしながら作ってみてください。

簡単な画面遷移アプリを作ってみよう

それでは、Storyboardを使って簡単なアプリを作っていきます。Xcodeプロジェクトでは作成した段階で、Main.storyboardが用意されています。今回は、このStoryboardを使って作ってアプリを作っていきます。

トップ画面を変更する

Main.storyboardには、あらかじめViewControllerという画面が用意されています。デフォルトでは、ここが初期画面になります。Xcodeプロジェクトを作ったら試しに実行してみましょう。すると、アプリが起動してこの画面がされて確認することができます。

Storyboardを書き換えると、先ほど表示されていた初期画面を変えることができます。ここからは、この初期画面の変更をしていきます。

storyboard

初期画面を変更するには、新しい画面をStoryboard上にドラッグ&ドロップして追加します。

画面を追加するためには、右上のホームボタンのようなボタンをクリックしましょう。ポップアップが表示されたら、検索フォームに「UINagigationController」と入力してみましょう。

search-ui

NavigationControllerがサジェストされたら、ドラッグ&ドロップすることができるのでStoryboard上の空いているところに配置します。

navigation-controller

Storyboard上に設置したら、初期画面としてNavigationControllerを設定します。設置すると画面が2つ追加されるので、そのうちの左側の画面をクリックします。この画面が「UINavigationController」とです。

最初から設置されていた画面の左側に矢印がついていますがが、その矢印をNavigationControllerへ移動させてみましょう。するとこの矢印がNavigationControllerの左につき、トップに表示される画面として設定されます。

first-view

設定が終わったら起動してみましょう。トップに表示される画面が、NavigationControllerに変わってヘッダーがついているはずです。

run

NavigationControllerの最初の画面を変える

次は、UINavigationControllernのルートを変更します。UINavigationControllerの右側の画面を削除します。削除するには画面の上にある黄色いボタンをクリックしてdeleteキーを押します。

navigationcontroller

UINavigationControllerをクリックするとXcode右側に詳細が表示されます。ここを「インスペクタ」と言います。インスペクタの上にあるタブの一番右をクリックします。

その中に、「root view controller」という項目があるので右側の+ボタンからドラッグすると矢印が出るので、ViewControllerの上で離します。すると、UINavigationControllerのルートをViewControllerに設定できます。

segue

最後に起動してみてください。起動直後の画面がViewControllerに変わっています。

画面の遷移を実装する

次に、UINavigationControllerを使ってViewControllerから画面遷移を実装します。

まず、ViewControllerにボタンを設置します。UINavigationControllerを設置した手順と同様に「UIButton」と検索して、ViewController上に設置してみてください。

button

同様に新しい画面を設置します。今度は「UIViewController」を設置します。

設置し終えたら、Controlを押した状態でUIButton上からドラッグすると矢印が出現します。それを設置したUIViewControllerへドラッグします。

attach button

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

set action

これで、画面遷移の設定が終わりです。起動して確認してみましょう。ボタンを押すと、次の画面へ遷移するようになりました。

previw

設置したUIを細かくプログラムする方法

StoryboardでUIを作っていくと、細かなデザインを設定したりプログラムを使ってコントロールしたりしたいと思うことがあるかと思います。次の記事で細かくプログラムするための方法を紹介していますので参考にしてみてください。

自分なりにアレンジしてみよう

今回は、Storyboadを使った画面の作り方と画面遷移の方法を紹介しました。最初はみんな使い方がわからないです。何度も使ってみると、簡単に作れるようになっていくので自分なりにアレンジして慣れていきましょう。

BeautifulSoup4でid, classを持つDOMを取得して効率化しよう!Prev

IBDesignable、IBInspectableを使ってStoryboardでデザインする方法Next

Related post

  1. iOSアプリ開発

    SwiftでJSONデータを使いやすくする!Codableの使い方

    APIからデータを取得する時、JSONでデータを受け取ることがあるかと…

  2. xcode

    iOSアプリ開発

    iOSアプリ開発に必要なXcodeについて知ろう

    iPhoneアプリ作ってみたいけど「アプリ開発って難しそう」「作り方が…

  3. iOSアプリ開発

    iOSアプリ開発者が本当にオススメする6つの技術系サイト

    今回は、iOSアプリエンジニアとして実際に良く参考にしているサイトを紹…

  4. iOSアプリ開発

    DispatchQueueを使って容量のあるファイルをダウンロードする方法

    アプリなどで画像のようなファイルデータをダウンロードすることはよくあり…

  5. iOSアプリ開発

    SwiftUIで必ず知っておきたいリスト表示の仕方

    iOSアプリを開発するときに、データをリスト表示するUIを実装したいと…

  6. iOSアプリ開発

    iOSアプリ初心者が覚えておきたい10のUIクラス

    iOSアプリを開発したいけど、最初は何を知っていたら開発できるのかわか…

PAGE TOP