【iOS】Table Viewを使ってみる
前回の続き。
今回はTable Viewを表示する所をやってみる。
予め2ページ目の中央に配置していたLabelは削除しておく。
story boardでObject LibraryからTable View
を探してページに置く。
続けてTable View Cell
を探し、先程配置したTable View
の上に置く。
ここで2ページ目を表示するためのView Controllerを作成する。
プロジェクトツリーで右クリック -> New File..
を選択。
以下の画面でCocoa Touch Class
を選択する。
クラス名にSecondPageViewController
と入力し、
Subclass of にはUIViewController
を選択する。
※Table Viewだけのページであれば、UITableViewController
でも良さそう。
Storty Boardに戻り、2ページ目のView ControllerのAttribute Inspectorの設定で、classに先程作成したSecondPageViewController
を指定する。
Assistant Editor(∞みたいなアイコン)を開くと、左側にStory Board 右側にSecondPageViewControllerが表示される。
※表示されなければ表示されるように調整する。
この状態で、Table ViewからCtrl
キーを押しながらSecondPageViewControllerのクラス定義の直下にドラッグする。
↓画像のようなダイアログが出るので、tableView
という名前で設定する。
そうすると、@IBOutlet
でStory BoardのUITableViewとSecondPageViewController
のUITableViewがtableView
という変数名で接続され、以下のようにコードが挿入される。
その後、クラス定義部分にUITableViewDelegate
とUITableViewDataSource
を追加して以下のように書き換える。
class SecondPageViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
Story Boardに戻って、tableView
のConnection Inspector
を開く。
dataSource
とdelegate
からSecondPageViewController
に向かってドラッグする。
そうすると、dataSource
とdelegate
がSecondPageViewController
に接続される。
ここでdataSource
とdelegate
を実装していないのでコンパイルエラーが出るけど、先にCellの定義を追加する。
新たにCocoa Touch Class
作成画面を開く。
クラス名にSecondPageTableViewCell
を指定し、
Subclass of: にUITableViewCell
を指定する。
Story BoardでTableViewCellのIdentity Inspector
を開き、classにSecondPageTableViewCell
を指定する。
ついでにCellで画面表示したい項目をLabelで配置しておく。
画像の例だと、Labelでid
とname
を配置している。
同様にAttributes Inspector
を開き、IdentifierにSecondPageCell
を指定する。
※この項目は後ほどコード上でCellを取得するために使われる。
Assistant Editorで左にStory Board 右にSecondPageTableViewCell
を開いて、
Story BoardのCellからid
項目とname
項目をCtrl
キーを押しながらドラッグして、SecondPageTableViewCell
に接続する。
更に、データセット用のメソッドを定義する。
func setUserData(id: String!, name: String!) { self.id.text = id self.name.text = name }
最終的には以下のようなクラスになっている。
import UIKit class SecondPageTableViewCell: UITableViewCell { @IBOutlet weak var id: UILabel! @IBOutlet weak var name: UILabel! func setUserData(id: String!, name: String!) { self.id.text = id self.name.text = name } override func awakeFromNib() { super.awakeFromNib() // Initialization code } override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) // Configure the view for the selected state } }
SecondPageViewController
に戻って、TableViewの実装を行う。
まずはtableViewが何行あるかを表示するための以下のメソッドを実装する。
今回は練習なので単純に5をreturnする。
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 5 }
さらに、対象行のCellを取得するためのメソッドを定義する。
withIdentifier
に設定する項目は、Attributes InspectorでIdentifierに設定した値に合わせる必要がある。
今回の場合は、SecondPageCell
になる。
また、型はSecondPageTableViewCell
を指定する。
最後にsetUserData
でCellにセットする項目を入れる。
※今回の場合、現在の行のindexというidと"hoge"という名前がセットされる。
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "SecondPageCell", for: indexPath) as! SecondPageTableViewCell cell.setUserData(id: String(indexPath.row), name: "hoge") return cell }
この状態でビルドして実行すると、以下の画面のようにTable Viewを表示することができた。
ここまで進めてきて徐々に難しくなってきた反面、楽しくなってきたので引き続きiOSアプリ開発方法を学んでいきたい。
Swiftのコード実装も増えてくるといい感じ。