丁寧解説！SwiftでUITableViewの使い方

2016.03.27

こんにちは、プログラマーの@Yuuです。

iPhoneアプリ開発の際には切っても切れないUITableView。
僕がiPhoneアプリを開発を始めたばかりの頃はUITableViewの使い方はサッパリ分からず、色々な解説サイトを見てコードをコピペしては、トライアンドエラーを繰り返してました。

むしろ複数サイトを参考にした結果エラーアンドエラーみたいになってましたねw

今回は、iPhoneアプリを始めたばかりだけどUITableViewを使う、というレベルの人でも理解出来るように書いていこうと思います。
解説ではstoryboardを使用する方法で解説を行います。

今回の終着点はfruitsという名前の配列
let fruits = ["リンゴ", "みかん", "ぶどう"]
を以下の画像のように、UITableViewを使って表示出来るようにします。

ステータスバーとUITableViewが被ちゃってますが、今回は表示出来る事に重きをおくのでご了承下さい。

UITableViewとは

UITableViewは、情報をリスト表示する際に良く使います。

例えば、以下の画像はApple純正の「設定」アプリのトップ画面ですが、こちらもUITableViewを使用して作成されています。

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

このように情報をリスト表示する際に使用すると非常に便利なUITableView。
他にも、画面に収まらなかった情報は自動的にスクロールすると表示されるようになったりと、非常に優秀です。

UITableViewを使用する

大きくやることは3つ

storyboardにUITableViewとUITableViewCellを配置
UITableViewとUITableViewCellに情報を受け渡す設定を行う
ViewControllerに必要なメソッドを書く

ザックリとこのような流れになっています。

最初は分かりづらいUITableViewですが、どの項目でどのような事をやっているか、順を追って覚えれば2回目以降はわりと分かりやすいです。
そして基本的な使い方を覚えれば、1つのセルのデザインをオリジナルのものにする「カスタムセル」を使ったTableViewの使用もすんなり出来るようになります。

解説を行う環境

今回解説を行う環境です。

OS：OS X Yosemite10.10.5
Xcode：7.2
Swift：2.1

1. UITableViewとUITableViewCellを配置

プロジェクトを作成するところは省略します。
僕は「Single View Application」で「TableViewSample01」というプロジェクト名で作成しました。

1-1. UITableViewを配置

まずstoryboardにUITableViewを配置します。

ここで気にして欲しい事は2つ。
UITableViewのX座標・Y座標といった配置場所と、width・heightなどのサイズの2点。
つまりこの段階では、UITableViewの見た目だけを気にしてデータの受け渡し方などは後で考えよう、という事です。

見た目の設定をここで行うので、AutoLayoutの設定を行う場合はこの段階でやっちゃいましょう！

僕は今回画面全体にUITableViewが表示されるように設定してみます。
ここの配置に関しては、皆さんの好きなように配置して下さいね。

まずViewControllerにUITableVIewを配置だけします。

次にUITableViewをViewControllerいっぱいの大きさにマウスを使って変更します。

どのような画面サイズでも画面いっぱいにちゃんと表示されるようにAutoLayoutを設定します。

最後に行ったAutoLayoutの設定は、皆さんの環境に合わせて設定を行って下さい。

僕と同じ設定にした人は、ここまでの設定を行うと配置したTableViewの制約が以下のようになるはずです。

1-2. UITableViewCellを配置

次に先ほど配置したUITableViewに表示するためのセルをstoryboard上に配置します。

「Table View Cell」と書かれたオブジェクトを、先ほど配置した「Table View」と書かれたオブジェクトのすぐ下にドラッグアンドドロップします。

すると上記画像のように「Table View Cell」が「Table View」の子要素のようになったかと思います。
これだけでUITableViewCellの配置は終了です。

2. 情報を受け渡す設定を行う

情報を受け渡すための設定もstoryboardで行います。

ここでは以下の2つを行います。

UITableViewに「dataSource」と「delegate」の設定を行う
UITableViewCellにViewControllerで「セル」として認識させるための設定を行う

では、順番に設定していきましょう！

TIPS

何かと分かりづらい「dataSource」と「delegate」の設定方法。

実はこの2つの設定方法、参考サイトによってはViewController内で設定を行っているサイトも沢山ありまして。
結局storyboardで設定するのも、ViewController内で設定するのもどちらも意味合いは一緒です。
ですが、最初のうちは混乱してしまうかもしれないので、自分の中でどちらかの方法に統一しておくと良いのではないかと思います。

2-1. dataSourceとdelegateの設定

「ここでの設定は一体何をやっているのか？」を簡単に書くのであれば、この設定を行うことでTableViewに値を表示したり操作したりすることが出来るようになる。
と思ってもらえばいいと思います。

ではstoryboardからdataSourceとdelegateの設定の行います。

storyboardのTable Viewを選択します。選択した後controlボタンを押したまま「View Controller」画面の上にある3つのボタンのようなものの、1番左のところにドラッグアンドドロップします。

すると以下のように背景の黒いポップアップが表示されます。（見づらくてすいません）

そして表示されたポップアップの「dataSource」と「delegate」を両方選択します。

どちらかの選択を行うとポップアップが消えてしまうので、再度ポップアップを表示させ、前に選択しなかった方を選択します。

両方を選択するとこれまた見づらくて恐縮なのですが、以下のようになります。

ポップアップに表示されている「dataSource」と「delegate」という文字の左側に「●」がついていれば成功です。

2-2. セルをView Controller内で使用出来るように設定する

ここの設定はとても簡単なのですが、忘れやすく、また後ほど出てくるViewController.swiftでの名前と違うだけでエラーが起きてしまういます。
ちなみに大文字小文字の違いも判定しますので注意しながら設定しましょう。

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

ここの「Identifier」という項目にセルの識別子を付けます。
今回は「MyCell」という識別子を指定します。

セルのIdentifierに対して「MyCell」と今回は付けましたが、ここの名前は自由に付けて大丈夫です。
ただし、後々出てくるViewController.swiftを編集する時に名前を揃える必要がある、という事だけ覚えておいて下さい。

storyboard上での作業は以上で終了です。
後はコードをどんどん書いていきましょう！

3. ViewControllerの編集

ここでやることは4つ。

表示するための変数を用意
UITableViewDelegateとUITableViewDataSourceを実装
デリゲートメソッドとデータソースメソッドを定義
変数の内容が表示されるようにする

では順番に解説を。

3-1. 表示するための変数を用意

今回は以下のfruits配列の値をTableViewに表示しよう！
let fruits = ["リンゴ", "みかん", "ぶどう"]
という内容だったので、まずfruits配列を用意します。

ViewController.swiftを編集し全体を以下のようにします。

import UIKit

class ViewController: UIViewController {

    let fruits = ["リンゴ", "みかん", "ぶどう"]

    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.
    }
}

import UIKit

class ViewController: UIViewController {

let fruits = ["リンゴ", "みかん", "ぶどう"]

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.

}

5行目を追加し、fruits配列を定義しています。

3-2. DelegateとDataSourceを実装

UITableViewDelegateとUITableViewDataSourceをViewControllerクラスに実装します。

3行目辺りのclass ViewController: UIViewControllerの隣に追記します。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    let fruits = ["リンゴ", "みかん", "ぶどう"]

    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.
    }
}

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

let fruits = ["リンゴ", "みかん", "ぶどう"]

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.

}

ここまで記述するとエラーが起きると思いますが、今は気にしなくて大丈夫。
次の項目で行う、デリゲートメソッドとデータソースメソッドを実装することでこのエラーは消えます。

3-3. デリゲート/データソースメソッドを定義

いつまでもエラーが出ているのも気持ち悪いので、ViewController.swiftに以下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) {}

/// セルの個数を指定するデリゲートメソッド（必須）

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) {}

この3つのメソッドを追記するとエラーが解消されるはずです。
ただし、今追加したメソッドは「とりあえず」で定義したものになります。
今のままだと何も表示されないので、これからセルに値が表示されるよう修正します。

ちなみに上2つのメソッドは実装が必須のメソッドなので、上2つのメソッドは必ず書く必要があります。
１番下のメソッドは必ず実装しなくても大丈夫なのですが、セルを押した時のメソッドはよく使うので書いてみました。

それぞれのメソッドの内容は次の項目で書きますね。

3-4. 変数の内容が表示されるようにする

前の項目で追加したメソッドを変更してTableViewに値が表示されるようにします。

まず1番上の「セルの個数を指定するデリゲートメソッド」から。
このメソッドには表示するセルの個数を指定するので、今回はfruits配列の要素数を指定します。

以下のように修正します。

/// セルの個数を指定するデリゲートメソッド（必須）
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return fruits.count
}

/// セルの個数を指定するデリゲートメソッド（必須）

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

return fruits.count

}

次は「セルに値を設定するデータソースメソッド」。

まず修正後のコードを載せちゃいます。

/// セルに値を設定するデータソースメソッド（必須）
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    // セルを取得する
    let cell: UITableViewCell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath)

    // セルに表示する値を設定する
    cell.textLabel!.text = fruits[indexPath.row]

    return cell
}

/// セルに値を設定するデータソースメソッド（必須）

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

// セルを取得する

let cell: UITableViewCell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath)

// セルに表示する値を設定する

cell.textLabel!.text = fruits[indexPath.row]

return cell

}

5行目のtableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath) の「MyCell」というところには、storyboardでTable View CellのIdentifierに設定した値を入れる必要があるので注意！

Table View CellのIdentifierは、先ほど以下の画像で設定した項目のことです。

このメソッドは、上の「セルの個数を指定するデリゲートメソッド」で指定した回数分呼び出されます。
指定した回数分for文で呼び出し、順番にセルに対して値を設定していく。そんなイメージで僕は使っています。

コードの内容としては、
5行目で値を設定するセルをオブジェクト化。
7行目でセルに表示する値を設定しています。

ここで使っているindexPath.rowは表示するセルの番号を取得する事が出来ます。
セルの番号は「0」から始まるので、indexPath.rowも「0」から始まります。
そのため配列にそのまま使って値を取得する事が出来る！というわけですね。

最後に「セルが選択された時に呼ばれるデリゲートメソッド」を修正します。

以下のようにします。

/// セルが選択された時に呼ばれるデリゲートメソッド
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    print("セル番号：(indexPath.row) セルの内容：(fruits[indexPath.row])")
}

/// セルが選択された時に呼ばれるデリゲートメソッド

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

print("セル番号：(indexPath.row) セルの内容：(fruits[indexPath.row])")

}

このメソッドも表示するセルの個数分呼び出され、順番にセルが押された時の設定を行います。
今回はセルを押したら、セルの番号とセルの値を表示するようにしています。

これで全ての作業が終了です、お疲れ様でした。

実際に実行してみると

ステータスバーにかぶっちゃっていますが、ちゃんと表示出来ました！
よっしゃ！(๑•̀ㅂ•́)و✧

それぞれのセルを押してみると

セル番号：0 セルの内容：リンゴ
セル番号：1 セルの内容：みかん
セル番号：2 セルの内容：ぶどう

セル番号：0 セルの内容：リンゴ

セル番号：1 セルの内容：みかん

セル番号：2 セルの内容：ぶどう

こっちもちゃんと表示されました。

最後にViewController.swiftの全文を載せておきますね。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    let fruits = ["リンゴ", "みかん", "ぶどう"]

    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.
    }
    
    /// セルの個数を指定するデリゲートメソッド（必須）
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fruits.count
    }
    
    /// セルに値を設定するデータソースメソッド（必須）
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        // セルを取得する
        let cell: UITableViewCell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath)
        
        // セルに表示する値を設定する
        cell.textLabel!.text = fruits[indexPath.row]
        
        return cell
    }
    
    /// セルが選択された時に呼ばれるデリゲートメソッド
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        print("セル番号：\(indexPath.row) セルの内容：\(fruits[indexPath.row])")
    }
}