[iOS]これからiOSアプリを作る方向け Storyboardで画面遷移を作る

iOS
96件のシェア(ちょっぴり話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

これからiOSアプリを作る開発者が覚えておきたい事

こんにちは、Objective-Cを始めて1年が経過した荒川です。とは言いつつも最近はBLEだとか、かじった程度のC++とCをいじっている事が多いです。

最近ではiOSアプリケーションを作成できるAppleの新しい言語「Swift」が発表され、iOSエンジニアではない方からも注目を集めています。

iOSアプリケーションの作り方について、言語に注目されている今だからこそUIの作成について記事にします。

狭い画面領域でユーザーが使いやすいと思えるUIを提供するのが、スマートフォンアプリケーションの肝です。

特にiOSアプリケーションにおいては、UIの描画をするために優れたGUIツールが提供されています。もちろん、GUIツールを使わずにコードでも表現は出来ますが、使い方を覚えれば開発効率を向上させる事ができるでしょう。

今回は、Objective-C・Swift、両方で使えるStoryboardの使い方についておさらいします。

Storyboard予備知識

Storyboardの使用例です。以下のように画面やパーツがグラフィカルに作成できます。

スクリーンショット_2014-08-29_11_17_57

Storyboardを使う前に、まずは予備知識を身につけましょう。

Storyboardを使うメリット

  • プッシュ(左から右へ遷移)・モーダル(下から新しい画面が出てくる遷移)が簡単に作れます。
  • ViewControllerやUIKitオブジェクトをドラッグ&ドロップで追加できます。
  • 各Viewのクラスファイルへの紐付けをControl + ドラッグでできます。
  • ボタンタップ時などのデリゲートメソッドをドラッグ&ドロップでクラスファイルへ定義できます。
  • タップ・ピンチ・回転・スワイプ・パン・ロングプレスなどの指の動きの検知したい場合もドラッグ&ドロップでできます。
  • 各Viewのもつ属性を、ほとんどコードを書く事なく表現できます。

Storyboardで不便な点

  • リポジトリ管理をしている場合、コンフリクトが起こりやすいです。Storyboardの中身はplist(プロパティリスト)というxmlに似たファイルで構成されています。mergeが大変なので、複数人で同じStoryboardを同時に編集する事はリスクとなります。
  • 一度ドラッグ&ドロップで紐づけたクラスファイルを削除したり、Storyboardから紐づけてあるViewを消すと実行時エラーになる可能性があります。警告などは出ないので、削除する前はStoryboardとクラスファイルとの関連付けを切りましょう。
  • 画面数が極端に多い場合、巨大なStoryboardになりやすいです。大きすぎるStoryboardは、一覧性を下げて改修が大変になります。Storyboardはいくつでも追加・切り替えできますので、機能毎などで分けたりすることをオススメします。チームで開発する場合、担当機能を割り振ってそれぞれStoryboardを分割するとコンフリクトするリスクもなくなります。
  • 各Viewへのタグ(int型の値をViewに紐づけて、クラス内でViewを保持できる仕組みです。)を設定できますが、実装者以外が見た場合は見逃しやすいです。コメントなどでStoryboardでタグを設定している事を明記した方が良いでしょう。

知っておけば回避できる事がほとんどです。知りましょう。

Storyboardで画面遷移

今回は、クラスファイルへの紐付け・画面遷移を紹介します。

  1. Xcodeのプロジェクト新規作成

  2. iOS Application

  3. Single View Applicationテンプレートを選択

  4. Project Navigator(画面左側のツリー、なければCommand + 1)のMain.Storyboardを選択 スクリーンショット 2014-08-29 12.09.44

  5. Object Library(画面右下のUI郡、なければCommand + Option + Control + 3)のUIButtonをViewController中央へドラッグ&ドロップ。

  6. Attributes Inspector(画面右上のプロパティ設定、なければ配置したボタンオブジェクトを選択しCommand + Option + 4)を開き、表示文字の変更。 スクリーンショット 2014-08-29 12.30.25

  7. 画面右上の表示設定を分割ビューに変更。 スクリーンショット_2014-08-29_14_24_24

  8. Ctrl + ドラッグでボタンオブジェクトをViewControllerクラスへ紐付け。 スクリーンショット_2014-08-29_14_27_26

  9. アクション(ボタンが押された時に呼ばれるイベント)メソッドを指定。 

    スクリーンショット 2014-08-29 12.17.14 スクリーンショット 2014-08-29 12.17.57

  10. Object LibraryからViewControllerを2つ追加。 スクリーンショット 2014-08-29 14.39.14

  11. UIViewControllerのサブクラスを2つ作成。スクリーンショット_2014-08-29_14_42_15

  12. NavigationControllerを追加。スクリーンショット_2014-08-29_14_52_21

  13. 追加した各ViewControllerへSegueを追加。遷移方法(Segueと呼びます)はそれぞれpushとmodalに設定。

    スクリーンショット_2014-08-29_14_57_11

  14. SegueにIDを付与する。2つに設定。スクリーンショット_2014-08-29_15_02_01

  15. ViewController.mのButtonを押した時の処理を記述(swiftでもほとんど同じです。)

- (IBAction)pushButtonNext:(id)sender {
    // IDを指定してSegueを呼び出します。
    // IDを条件分岐することによって2つ目のViewと入れ替える事ができます。
    [self performSegueWithIdentifier:@"pushView" sender:self];
}

以上で基本的な画面遷移が作れます。

SegueのIDをif文などで変えてあげれば、条件によって1つのボタンから2画面へ遷移することが可能です。

まとめ

Objective-C・Swiftのどちらでも、iOSアプリで画面を作る方法は大差ありません。

SwiftからiOSアプリの開発を始める方は、Storyboardの操作に慣れれば早くアプリケーションが作成できる事でしょう。

セミナーのお知らせ

9/21, 9/23のどちらかに渋谷駅近辺でXcodeを使ったiOSアプリケーションの小規模のセミナーを開催します。

  • 対象:初級〜中級者(学生・社会人問いません)
  • 人数:5人ほどを見込んでいます。
  • 場所:電源のあるスペースをお借りします。渋谷駅近辺
  • 時間:お昼頃から2〜3時間程度
  • 料金:スペース代+各自飲みもの代 講習自体は無料
  • 講師:私 + α
  • 持ち物:MacBook Air or Pro、最新版のXcodeをインストールしておいて下さい。
  • 言語:Objective-C、SwiftどちらでもOK

主に私がStoryboardやCocoapodsを使ったOSSの使い方を実際にその場でレクチャーしたり、既に開発をしたことのある方へアドバイスをします。

希望される方がいらっしゃいましたら、TwitterかFacebookでご連絡下さい。

Facebook:ブログのプロフィールにリンクが貼ってあります。メッセージ下さい。

先着順で、人数が集まればやりますが、集まらなければやりません。参加される方のスキル差にもよりますが、5名くらいで開催します。