2016年7月2日土曜日

iOS テーブルビュー・サンプル(1):ストーリーボード参照を使ってストーリーボードを分割

「OS X : テーブルビューを使うサンプルアプリケーション」では OS X で動作するアプリを作成しました。このシリーズでは iOS でテーブルービューを使う場合のサンプルを作成します。ひとつのアプリで、様々なテーブルビューのサンプルを示すために、サンプルごとにストーリーボードを分割して、ストーリーボードを管理しやすくします。
開発/実行環境:Xcode8_beta, Swift3.0, macOS Sierra 10.12 Beta

プロジェクトの作成

テーブルビューをベースとしたアプリを作成する場合、プロジェクト作成で Xcodeに付属する Master-Detail Applicationテンプレートを選択すると、必要なビューやコードが自動的に準備されます。
  1. Xcodeのメニューで、
    File > New > Project... を選択。
  2. 新規プロジェクト作成シートで、
    iOS > Applicationセクション > Master-Detail Application テンプレートを選択して、Next をクリック。
  3. 次のページで次の画面のように設定(言語は swift を選択):

  4. 作成された新規プロジェクトの Main.storybord は図1のようになります。
    図1:プロジェクト作成直後のメイン・ストーリーボード:

    (*1):シミュレートするデバイスとして iPad Pro 9.7 を設定しています。
    (*2):Xcode8_beta では、ストーリーボードで表示するデバイスも選択できます。
    (*3):Xcode8_beta では、ズームも簡単になりました。


初期ビュー(メニュービュー)の作成

図1のマスターシーンのテーブルビューを修正して、初期表示のテーブルビューを、複数のテーブルビューサンプルを選択するためのメニュー(テーブル行がメニュー項目となる)として作成します。
  1. 自動作成された不要なファイルを削除:
    ブロジェクト・ナビゲータで、以下のファイルを削除します。
    • DetailViewController.swift
  2. 自動作成された AppDelegate.swift ファイルを以下のように修正:

  3. 自動作成された Main.storybord を以下のように修正:
    • セグエの削除:
      プロジェクト・ナビゲータで Main.storybord を選択して(図1が表示される)、不要なセグエを削除します。
    • マスターシーンをメニューテーブルに修正:
      1. ドキュメント・アウトラインで、マスターシーン(Master Scene)の Table View を選択します。
        属性インスペクタ/Table View セクション で以下を設定:
        • Content フィールド:"Static Cells"
        • Style フィールド:"plain"

        これにより、上記のように3つの静的なセルが自動的に作成されます。
      2. ドキュメント・アウトラインで、上の Table View の Table View Section を選択して、サイズ・インスペクターで以下のように行数を4行にします:
      3. ドキュメント・アウトラインで、テーブルビューのセクションの各セル(1...4)を選択して、タイトルを"サンプル01...04" に変更します。
    • 詳細シーンを修正:
      1. ドキュメント・アウトラインで、詳細シーン(Detail Scene)を選択します。
        アイデンティティインスペクタを開いて、Custom Class セクション/Class フィールド(DetailViewController がセットされている)をクリアします。
      2. ドキュメント・アウトラインで、この詳細シーンのビューのラベルを選択します。
        以下のようにして、このラベルのアウトレットを削除します:
    以上の結果として、メイン・ストーリーボードは次のように修正されます:


ストーリーボード参照を使用する

このサンプルアプリケーションでは、メニューテーブルのメニュー項目(テーブル行)が選択された場合に、各テーブルビューのサンプルへ遷移するようにします。
一つのストーリーボードで全てのテーブルビューサンプルのシーンを管理すると、ストーリーボードが非常に複雑になります。ストーリーボード参照を使用して、サンプルごとにストーリーボードを分割して、ストーリーボードを管理しやすくします。
  1. オブジェクトライブラリからストーリーボード参照をキャンバスへドラッグします:

    メニューテーブルの各行(サンプル01 ... サンプル04)に対応するように、上記の操作を繰り返して、4つのストーリーボード参照をキャンバスに追加します。
  2. マスターシーンのセル(サンプル01)を選択して、ストーリーボード参照へ CTRL + ドラッグします:

    表示されたポップアップで show detail を選択します:
  3. 残りの全てのセル(サンプル02..サンプル04)に対しても同様の操作を行います。
以上の結果、ストーリーボードは以下のようになります:



セルを装飾する

マスターシーン(MasterViewController)のテーブルビューの各セルを以下のように、MasterViewController.swift へアウトレットします:

MasterViewController.swift を次のように修正します:


実行結果:




次回以降は、それぞれのストーリボード参照に対応するテーブビューのサンプルを作成していきます

0 件のコメント:

コメントを投稿