2015年11月28日土曜日

Swift とストーリーボードで iOS アプリを作成(1):プロジェクトの作成

iOS アプリも Swift も Xcode も初めてです。今から iOS アプリを作るなら、できるだけ新しい環境と新しい方法で開発したいと思います。 そこで、iOS9 をターゲットにして、Swift2, Xcode7 で新しくなったインターフェース・ビルダーとストーリーボードを使ってサンプルアプリを作成することにします。

プロジェクトの作成を始める前に、まずこのサンプルアプリで実現したいストーリー(仕様)を簡単にまとめておきたいと思います。
全てが初めてなので、あまり複雑なものではありません。 概ね以下のようなものとします:
  1. メイン画面とそれ以外の幾つかのサブ画面で構成する。
    それぞれのサブ画面ではテーブルビューを使ってデータを一覧表示する。
  2. メイン画面からサブ画面へはタブバーでタブを選択して移動する
  3. サブ画面1ではRESTサービスから取得した製品一覧を表示する
    データはREST API を使って取得し、さらに別の画面で追加、更新などの処理を行う
  4. サブ画面2では画像を含むデータを表示する
    データは端末内から取得し、別の画面で画像の追加、更新などの処理を行う
  5. サブ画面3ではDrop Box のファイル一覧情報を表示する
    別の画面で選択ファイルの詳細を表示する

また、Xcode とストーリーボードの使い方を覚えるのも、このサンプルアプリ作成の目標なので、上記のストーリーから離れない範囲で、できるだけ多くの Xcode の機能を取り上げることにします。

プロジェクトの作成

  • Xcode7 を起動して、新規プロジェクトを作成します。上記のシナリオにふさわしいテンプレートとして、Tabbed Application を選択して、Nextボタンをクリックします:

  • 次のページで以下のように入力して、Next ボタンをクリックします:

    Next ボタンをクリックして表示された画面で、プロジェクトの保存フォルダを選択し、Source Control: Create Git repository on .. がチェックされているのを確認して、Create ボタンをクリックします:
    本格的なプロダクトを開発する場合は当然ですが、学習目的でアプリを作成する場合も、ソース管理は重要です。動かなかったり、間違えたり、方針転換した場合はロールバックしてやり直せます。自分の作業内容を追跡できるのも学習の助けとなります。
    新規プロジェクトの作成方法についてはこちらのページを参照してください。
  • 作成された新規プロジェクトは次のような画面になります:
    プロジェクトには、3つのクラス(AppDelegate, FirstViewController, SecondViewController)と Main.storyboard ファイルがあります。端末の向きを制限したい場合は、上記画面の Deployment Info セクションの Device Orientation を編集します。また、ツールバーでシミュレータのタイプを選択できます(このプロジェクトでは iPhone6s を選択します)。
    Xcode の作業エリアの名称等はこちらのポストを参照してください。
  • プロジェクト・ナビゲータの Main.stroybord ファイルを選択します:

    上の画面には3つのシーン(タブバーコントローラとそれぞれのタブに対応する2つのビューコントローラ)が表示されています。
    左側からタブバーコントローラを指し示す矢印は、このストーリーボードで表示される最初のビューコントローラ(エントリポイント)を表します。
    ストーリーボード・エディタでのレイアウト設計はユーティリティ・エリアの下部(Xcodeの右下隅)からコントロールをキャンバスやビューコントローラへドラッグして行います。
    Xcode の作業エリアの名称等はこちらのポストを参照してください。


ストーリーボードでシーンを作成する

前述した仕様に従って、タブバーで選択される3つのサブ画面(テーブルビュー)を作成します。ここで行う作業の概要は以下の通りです:
  1. プロジェクトの作成時に自動作成された2つのビューコントローラを、ストーリボードから削除します。
  2. ストーリーボードに、新たに3つのテーブルビューコントローラを追加します。
  3. 追加したテーブルビュー・コントローラをナビゲーション・コントローラに埋め込みます。
  4. タブバー・コントローラとナビゲーション・コントローラをそれぞれ接続します。
  5. タブバーの項目のタイトルを設定します:製品、映画前売り券、Drop Box
  6. ナビゲーションバーのタイトルを設定します:製品一覧、前売り券一覧、ファイル一覧

では、それぞれの作業を細かく見ていきます。

1. 自動作成された不要なビューコントローラの削除

  • アウトライン・ビューで次のようにビューコントローラ(Firstシーン)を選択して "Delete"キーを押します:

  • 同じように、アウトライン・ビューでビューコントローラ(Secondシーン)を削除します。ストーリーボードの状態は次のようになります(2つのビュー・コントローラが削除されます):


2. テーブルビュー・コントローラの追加

  • ビューコントローラが削除されたら、オブジェクト・ライブラリ(Xcodeの右下部分)からテーブルビュー・コントローラを選択して、キャンバスへドラッグします:
    上の画面は2つのテーブルビュー・コントローラを追加したところまでの状態です。

3. 追加したテーブルビュー・コントローラをナビゲーション・コントローラに埋め込む

  • アウトライン・ビューで、テーブルビュー・コントローラを選択して、メニューバーで Editor > Embed In > Navigation Controller を選択します:

  • 次の画面のように、ナビゲーション・コントローラ(タブバー・コントローラと同様のコンテナビュー・コントローラ)が追加されて、テーブルビュー・コントローラが埋め込まれます(関連付けされます)。テーブルビュー・コントローラをナビゲーションコントローラに埋め込むとインターフェース・ビルダーは自動的に、テーブルビュー・コントローラにナビゲーション・バーを追加します。
    上の画面は2つのテーブルビュー・コントローラをナビゲーション・コントローラに埋め込んだところまでの状態です。

4.タブバー・コントローラとナビゲーション・コントローラの接続

  • 次の画面のように、ドックのタブバー・コントローラをナビゲーション・コントローラまで Crtl + ドラッグして、その時表示されるポップアップメニューから、Relationship Segue > view controllers オプションを選択します:

  • 上記の操作を行って新しい接続を行うと、下の画面のように、単に”item”という名前の新しいタブがタブバー・コントローラに追加され、タブバー・コントローラとナビゲーション・コントローラは関連セグエで接続されます。


サブ画面3についても同じようにして追加します。

5.タブ項目のタイトル設定

この時点で、タブバーのタブのタイトルはどれも"item"となっています。これを仕様に合わせて意味のあるものに変更します。少し見栄えを良くするためにタブバーにアイコンも設定します。
アイコンの作成についてはこちらのポストをご覧ください
  • まず、このXcodeプロジェクトで使用するイメージを追加します。プロジェクトナビゲータで Assets.xcassets を選択して、アセット・カタログを表示します。カタログの左下の "+" ボタンを押して、表示されたポップアップメニューから "New Image Set" を選択して、3つのイメージ・セットを追加します。追加したイメージ・セットの名前をダブルクリックして、それぞれ "Product", "MovieT", "Dropbox" に変更します。簡単にするために、ここでは縦横が 75x75 の png イメージだけを追加します(イメージセットの x1 スロットには 25x25、x2 には 50x50、 x3 には 75x75 のイメージをセットする)。以下の画面は、ファインダーからドラッグ&ドロップで映画前売り券・タグに使うイメージを "MovieT" イメージ・セットの 3x スロットに追加する例を示します:
  • プロジェクトにイメージが追加できたら、次はメイン・ストーリーボードで、タブ項目のタイトルとアイコンを設定します。 ナビゲーション・コントローラをタブバー・コントローラに接続すると、Tab Bar Item(タブバー項目)オブジェクトが追加されます:

    タブバー項目を使えば、タブバー・コントローラに表示されるタブのタイトルやイメージを設定できます。
    上のようにドキュメント・アウトラインで、ナビゲーション・コントローラ内のタブバー項目を選択して、属性インスペクタでタイトルを"製品"、イメージを "product" に変更します:



    以下に、3つのナビゲーション・コントローラのタブバー項目の "Title" 及び "Image" をそれぞれ "製品"/"Product"イメージ, "映画前売り券"/"MovieT"イメージ, "Dropbox"/"Dropbox"イメージ に変更した結果を示します:

6.テーブルビューのタイトルを設定

タブバー項目と同様に、3つのテーブルビューのタイトルもビューの内容を表すものに変更します。テーブルビュー・コントローラをナビゲーション・コントローラに埋め込むと、Navigation Item(ナビゲーション項目)を持つようになります。ナビゲーション項目は、ナビゲーションバーを設定するために使用されます。
  • ドキュメント・アウトラインで、テーブルビューのナビゲーション項目を選択します:



    次の画面のように、3つのテーブルビュー・コントローラのナビゲーション項目を順に選択して、属性インスペクターの "Navigation Item" セクションの "Title" をそれぞれ、"製品一覧", "映画前売り券一覧", "ファイル一覧" に変更します:

これまでの結果を確認

アプリを実行して、シミュレータ(端末設定は iPhone6s)で確認します:
上の画面のように、起動直後は製品一覧・テーブルビューが表示され、映画前売り券タブ/Dropbox タブを選択すれば、映画前売り券一覧・テーブルビュー/ファイル一覧・テーブルビューが表示されます。

結果をコミットする

この時点で、仕様の2:(メイン画面からサブ画面へはタブバーでタブを選択して移動する)までが完了しました。
ここでメニューバーの Source Control > Commit... を選択して、これまでの変更をコミットします:
プロジェクトを作成後、変更操作は全てストーリーボード上で行ったので、Main.storybord ファイルだけが修正されています(後ろに Mのマークが付いています)。コミット・メッセージを入力して、"Commit" ボタンを押します。

次回は、ストーリー(仕様)の3番以降の作業を行います。

参考:

0 件のコメント:

コメントを投稿