プログラミングと旅と映画の日々

普段はスマホ決済サービスの会社でバッグエンドを担当しているエンジニアです。プログラミングと趣味の映画、株、時々うどんに関してブログを書いていこうと思います。海外ドラマ、クロスバイクも好きです。

すぐできる!SwiftでのUITableViewの使い方

f:id:takanori5:20171017103942p:plain

 

上記のようなUIはUITableViewを使って実現されています。

Lineのトークの一覧にも利用されていますね。

 

私がSwiftを始めたばかりの頃は、本やいろんなサイトを見ながらこのUITableViewをなんとか使えるようになりましたが

無駄に時間がかかったので簡単にまとめておきます。

 

UITableViewとは

情報をリスト表示したい時に使います。

 

そして1つの項目を表示する領域を「セル」と言います。
セルには、UITableViewCellというものを使用します。

 

使い方

大きくやることは以下の3つ!!

  1. storyboardにUITableViewとUITableViewCellを配置します
  2. UITableViewとUITableViewCellに情報を受け渡す設定
  3. ViewControllerに必要なメソッドを書く

 

セルをView Controller内で使用出来るように設定しておく

Table View Cellを選択し、右側の「Show the Attributes inspector」という項目を選択します。

ここの「Identifier」という項目にセルの識別子を付けます。

 

上記の設定が済んだら後はコードをどんどん書いていきます!

 

 ViewControllerの編集

ここでやること

  1. 表示するための変数(配列)を定義
  2. UITableViewDelegateとUITableViewDataSourceを実装
  3. デリゲートメソッドとデータソースメソッドを定義
  4. 変数の内容が表示されるようにする

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に設定した値を入れる必要がある

 

 

takanori5.hatenablog.com