【Swift奮闘記ep39】図鑑アプリを作ってみたpart1（UIKitフレームワーク）

この本を見ながら進めてる↓

iPhoneアプリ開発講座はじめてのSwift

posted with カエレバ

諏訪悠紀 SBクリエイティブ 2017-01-26

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

前回⇒「【Swift奮闘記ep38】マップアプリを作ってみた（MapKit、CoreLocationフレームワーク）」

マップアプリでは色々なメソッドが出てきて、もはやこんがらがっている状態かもしれないが、先へ進む。

今までは１つの画面で完結していたが、今回は図鑑アプリといって一覧画面と詳細画面の２つの画面を使ってアプリを作っていく。

一覧画面についてはUITableViewクラスを使って、そのなかの一覧（セルという）についてはUITableViewCellクラスで管理する。

UITableViewCellでレイアウトを１つ決めれば、個別に設定しなくても複数のセルのレイアウトをまとめて設定することができる。

今回２つの画面が出てくるので、画面遷移（セグエ）についても出てくる。

また、「戻るボタン」の設置などナビゲーションバーの管理ができるUINavigationControllerクラスも使う。

ではさっそく。

UITabletViewの配置・制約・アウトレット接続まで
1. アウトレット接続
データ作成
1. ストラクチャ作成
デリゲートの設定

UITabletViewの配置・制約・アウトレット接続まで

オブジェクトライブラリからTableViewをシーンに配置。

次に制約を付けるのだが、上部に関しての配置については何を基準にするかによって設定が変わってくる。

ビューコントローラのコンテナを基準にすれば、ステータスバーも含む画面上部からの距離となる。

Top Layout Guideという見えないガイドも実は存在していて、ステータスバーの下からの距離となる。

今回はステータスバーも編集するのでステータスバーを含むビューコントローラのコンテナを基準にする。

デフォルトはTop Layout Guideが基準になっているので、忘れず設定する事。

そして画面全体に表示させるので上下左右「０」を入力する。

アウトレット接続

いつも通りViewController.swiftを表示させ、その中にUITableViewをcontrolキーを押しながらドラッグ。

@IBOutlet weak var tableView: UITableView!

となりアウトレット接続完了。

データ作成

次に一覧画面の見出しと、それを選択した時に表示される詳細画面の情報のデータ作成を行う。

ストラクチャ作成

データ作成のためにまずはViewController.swiftの中に、動物データを表現するために、ストラクチャを定義する。

ストラクチャって何だっけ・・・だよね。しっかり復習（⇒「【Swift奮闘記ep17】ストラクチャ（ストラクチャの定義、できること、参照型と値型の違い、プロパティ・イニシャライザ）」）

ViewControllerクラスの外に以下のコードを追加。

AnimalInfoの２つのプロパティの値はインスタンス化するときに渡す。

さらにViewControllerクラスの中に、AnimalInfoを複数インスタンス化したものを配列として管理する。

これをUITableViewに設置できるように設定を行う。

デリゲートの設定

一覧画面に表示されるセルは何個、だとかセルのレイアウトだとかをUITableViewで決めてしまうのではなく、もっと柔軟に（つまりアプリを作る人が毎回決められるように）するためにデリゲートという機能を使う。

デリゲートはプロトコルを使って実装する。

もし「セルの数を返すメソッド」が定義されたプロトコルが用意されていたとしたら、UITableViewはそのプロトコルをプロパティにすることで、そのプロパティのメソッドを呼び出すだけでセルの数を取得することができる。

とても難しい説明だ。具体的に見てみないとさっぱりわからなくなりそうだ。

UITableViewのビューコントローラにはプロトコルを準拠させ、セルの数を返すメソッドを実装
そのビューコントローラのインスタンス自体をUITableViewのデリゲートのプロパティに代入
ビューコントローラのインスタンスをUITableViewのプロパティであるかのように扱える

UITableViewのデリゲートは２つ用意されている

UITableDateSource：セルの数やレイアウトの元となる処理を委譲する（dataSource)
UITableViewDelegate：セルをタップしたときの動作など、操作に関する処理を委譲する（delegate）

今回使うのはUITableDateSourceだけ。

この時点ではエラーになるんだけど、それはプロトコルに定義されたメソッドをまだViewControllerに定義していないため。

tableView(_:numberOfRowsInnSection:)メソッドとtableView(_:cellForRowAt:)メソッド。

tableView(_:numberOfRowsInnSection:)メソッドではcountプロパティで配列の要素数を取得したりする。

そんでtableView(_:cellForRowAt:)メソッドではdequeueReusableCell(withIdentifier:)メソッドやrowプロパティ、textLabelプロパティが出てくる。

正直なところ迷宮入りな予感がする。

さっぱりわからなくなってきた。

セルのインデックス番号を取得して、それを返したり、動物の名前を表示したりする処理をしたってところだろうか。

ここまでで一度アプリを実行してみる。

ちゃんと実行されて、動物の名前が一覧として表示された。

次回は「詳細画面」をつくってそこへの遷移の設定や詳細画面にdescriptionを表示させる。

続き⇒「【Swift奮闘記ep40】図鑑アプリを作ってみたpart2（UIKitフレームワーク）」

キャンペーンの今のうちに是非！！↓