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


⇒「ひろゆき『1%の努力』を無料で見る方法

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

IPhoneアプリ作成Swift奮闘記

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

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

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

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

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

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

今回2つの画面が出てくるので、画面遷移(セグエ)についても出てくる。

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

ではさっそく。

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

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

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

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

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

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

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

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

アウトレット接続

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

@IBOutlet weak var tableView: UITableView!

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

データ作成

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

ストラクチャ作成

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

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

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


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

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

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

デリゲートの設定

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

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

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

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

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

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

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

今回使うのはUITableDateSourceだけ。

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

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

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

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

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

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

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

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

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

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

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

コメント