前回までで、簡単なアプリケーションの作成ができるようになったので、さっそく本題となるアプリの作成に取り掛かる。
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に変更)
つづく