[UI部品] Table Viewの基礎

今回はTable Viewの使用方法についてみていきます。

Xcode：9.2
Swift：4.0.3

Table Viewを使用すると、データをリスト形式で表示することができます。例えば、リマインダーアプリではTable Viewが使用されていることがわかります。

1.TableViewを配置する

はじめにSingle View Applicationのプロジェクトを作成して、Table Viewを貼り付けます。配置したら、サイズを任意の大きさに変更してください。

2.Table View Cellを配置する

Table Viewに項目を表示する為にはセルが必要です。先ほど配置したTable Viewの上にTable View Cellを1つ配置します。もしくは左側のView Controller SceneのTable Viewの下にTable View Cellをドラッグして配置してもOKです。

3.dataSourceとdelegateの設定

Table Viewのにデータを表示したり操作する為にはdataSourceとdelegateの設定が必要です。

View Controller Sceneの下にあるTable Viewを[control]キーを押しながらドラッグして、View Controllerの上で離します。

すると、メニューが表示されるのでdataSourceを選択します。同様にしてdelegateも選択します。

3.Table View CellをViewController.swiftから操作するための設定

今度はTable View CellをViewController.swiftから操作できるようにします。

はじめにView Controller SceneにあるTable View Cellを選択します。続いて、Show the Attributes inspectorを選択し、最後にIdentifierに「myCell」よ入力します。ここに入力する名前は「myCell」でなくても構いません。

4.ViewController.swiftへの実装

デザインは以上で完了ですので、ViewController.swiftへのコードの実装をしていきます。

はじめに、セルに表示するデータを準備します。ここでは、ライオン、シマウマ、キリンの3つの文字列を表示するようにするため、override func viewDidLoad()の上あたりに、以下のコードを挿入してください。

let animals = ["ライオン","シマウマ","キリン"]

次に、ViewControllerクラスにdataSourceとdelegateを実装します。以下のようにUIViewControllerの右側に、UITableViewDelegateとUITableViewDataSourceを記述します。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

すると、エラーが表示されるので[Fix]を押して解決させます。

[Fix]を押すと、以下のように2つのメソッドが実装されます。この2つは必須のメソッドなので、「実装されていないよ」という意味でエラーが表示されていたわけです。

上のメソッドはTable Viewに何個のセルを表示するかを指定するためのものです。animalsのデータ全てが表示できるようにする為に、以下のように編集します。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return animals.count
}

もう1つのメソッドは、セルに表示する値を設定するためのものです。

// セルに表示する値を設定する
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // データを表示するセルを取得する
    let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
    
    // セルに表示する値を設定する
    cell.textLabel!.text = animals[indexPath.row]
　   
    // データを設定したセルを返却する
    return cell
}

以上で実装は完了です。実行をしてみると、以下のようにanimalsに設定したデータが一覧となって表示されます。

最後にViewController.swiftの全ソースを以下に示します。

import UIKit

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
    let animals = ["ライオン","シマウマ","キリン"]
    
    // Table Viewにいくつのセルを表示するかを指定する
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return animals.count
    }
    
    // セルに表示する値を設定する
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // データを表示するセルを取得する
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
        
        // セルに表示する値を設定する
        cell.textLabel!.text = animals[indexPath.row]
        
        // データを設定したセルを返却する
        return cell
    }
      
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

コードはGithubに置いておきます