前回までで、簡単なアプリケーションの作成ができるようになったので、さっそく本題となるアプリの作成に取り掛かる。

MediaUploaderについて

ざっくりとしたユーザインタフェースは以下になる。

タブで画面が切り替えられるようにして、それぞれCollectionViewとTableViewを使って、写真ロールから取得したサムネイルをCollectionViewで一覧表示し、複数選択できるようにする。

いくつか選択した状態で、TableViewに切り替えると選択した写真のみが列挙されるようにし、右上のボタンで処理を実行するイメージになる。(最終的には選択した写真を外部へ転送したい)

上図は、StoryBoardに模した概略図で、GUI部品のクラスを記載した。
これらをインタフェースビルダーで作りこんでいく。

インタフェースビルダーでユーザインタフェースの構築

新規プロジェクトを作成する。今回は概略で示したようにタブ切り替えできるツールであるので、Tabbed Appからスタートすることにする。

プロジェクト新規作成直後の状態。IBでみると、"Tab Bar Controller"から2つのタブページが作成されており、1つ目が"FirstView"、2つ目が"SecondView"というラベルが配置されたシンプルなView Controllerとリンクしている。

ナビゲーションバーのソースコードと照らし合わせると、"FirstView"とFirstViewController.swiftが、"SecondView"とSecondViewController.swiftがすでに紐づいており、"Tab Bar Controller"に紐づいているソースは存在しない。この状態でもビルド＆実行すればタブは切り替わるので、IB上で定義されている内容だけでも、基本的なTabBarControllerとしては機能すると言うことである。

FirstViewControllerのユーザインタフェースを構築

次にFirstViewControllerにCollectionViewなどの部品を配置していく。(初期配置されたラベルは削除)
AutoLayoutに関しては、とりあえず利用せずにガイドに合わせて配置する。

CollectionViewのセルの数を1として、セルに識別子をつける。(図中は”Cell"とした)また、セルのサイズに関しては、後ほどプログラム内で自動的に計算してサイズを割り出すので、ここでは編集しやすい適当なサイズにしておく。

セルのサブビューとしてImageViewを貼り付けてセルのサイズと同じにフィットさせる。

FirstViewに関してのビューの階層は以下になった。

SecondViewControllerのユーザインタフェースを構築

まずはNavigationやTableViewを配置し、テーブルのセル数を1とする。

また、セルにImageViewとラベルを配置する。またTableViewについてもセルに識別子となる名称を付与しておく。こちらも"Cell"にしておく。

SecondViewに関してのビュー階層は以下のようになる。

TabBarControllerソースの追加と紐付け

IBのTabBarControllerだけでも基本的な動作はできるが、画面間のデータのやり取りするためにはプログラムを記述する必要があるので、UITabBarControllerを継承するコントロールクラスを追加し、IBのTabBarControllerと紐付ける。

[New File]からCocoa Touch Classを追加し、親クラスにUITabBarControllerを指定する。

IB上のTabBarControllerと追加したクラスを紐付けるために、Main.storyboardからTabBarControllerを選択する。

画面右側の"Custom Class"に追加したクラスを選択する。(UITabBarControllerやUIViewControllerを継承したクラスだけが表示されるはず)

CollectionViewやTableViewのセルとプログラムソースの紐付け

セルも後ほどカスタマイズするためにソースを追加し、紐付けしておく。
CollectionViewのセルには、CollectionViewCellを継承したクラスを追加＆紐付けする。

TableViewのセルには、TableViewCellを継承したクラスを追加＆紐付けする。

とりあえず、実装は後ほどするとして、クラスの追加と紐付けが完了した状態が以下になる。
(SampleAppからMediaUpLoaderに変更)

つづく