すぐできる!SwiftでのUITableViewの使い方
上記のようなUIはUITableViewを使って実現されています。
Lineのトークの一覧にも利用されていますね。
私がSwiftを始めたばかりの頃は、本やいろんなサイトを見ながらこのUITableViewをなんとか使えるようになりましたが
無駄に時間がかかったので簡単にまとめておきます。
UITableViewとは
情報をリスト表示したい時に使います。
そして1つの項目を表示する領域を「セル」と言います。
セルには、UITableViewCellというものを使用します。
使い方
大きくやることは以下の3つ!!
- storyboardにUITableViewとUITableViewCellを配置します
- UITableViewとUITableViewCellに情報を受け渡す設定
- ViewControllerに必要なメソッドを書く
セルをView Controller内で使用出来るように設定しておく
Table View Cellを選択し、右側の「Show the Attributes inspector」という項目を選択します。
ここの「Identifier」という項目にセルの識別子を付けます。
上記の設定が済んだら後はコードをどんどん書いていきます!
ViewControllerの編集
ここでやること
- 表示するための変数(配列)を定義
- UITableViewDelegateとUITableViewDataSourceを実装
- デリゲートメソッドとデータソースメソッドを定義
- 変数の内容が表示されるようにする
1.は配列を定義するだけ
2.は以下のように実装
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
ここまで記述するとエラーが起きます。
これは3.のdelegate datasourceを実装すれば解消されます。
3.
/// セルの個数を指定するデリゲートメソッド(必須)
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 0
}
/// セルに値を設定するデータソースメソッド(必須)
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
return UITableViewCell()
}
/// セルが選択された時に呼ばれるデリゲートメソッド
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {}
4.
では変数の値が表示されるようにしましょう!1.で用意した配列のカウントを返します。
このメソッドには表示するセルの個数を指定する
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return array.count
}
次は値の設定です。
11
/// セルに値を設定するデータソースメソッド(必須)
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
// セルを取得する
let cell: UITableViewCell = tableView.dequeueReusableCellWithIdentifier("(identifireに設定した値)", forIndexPath: indexPath)
// セルに表示する値を設定する
cell.textLabel!.text = fruits[indexPath.row]
return cell
}
storyboardでTable View CellのIdentifierに設定した値を入れる必要がある