iOS開発メモ4 (MediaUploaderの設計)

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

MediaUploaderについて

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

tabcontrol001

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

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

tabcontrol002-1

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

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

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

ss--2017-10-17-8.42.53

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

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

ss--2017-10-17-8.44.10

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

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

ss--2017-10-17-9.00.15

ss--2017-10-17-9.00.02

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

ss--2017-10-17-9.05.37

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

ss--2017-10-17-9.07.15

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

ss--2017-10-17-9.07.23

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

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

ss--2017-10-17-9.03.03

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

ss--2017-10-17-9.10.43

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

ss--2017-10-17-9.10.54

TabBarControllerソースの追加と紐付け

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

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

ss--2017-10-17-9.24.59

ss--2017-10-17-9.29.54

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

ss--2017-10-17-9.30.35

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

ss--2017-10-17-9.30.50

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

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

ss--2017-10-17-9.36.34

ss--2017-10-17-9.35.02

ss--2017-10-17-9.36.58

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

ss--2017-10-17-9.38.12

ss--2017-10-17-9.38.39

ss--2017-10-17-9.38.52

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

ss--2017-10-17-9.39.24

つづく