UITableView | 可能性を求めて ~Seeking Star~

本項目ではUITableViewの入門部分を書いていきます。実装していく上でのステップは以下の通りです。

StoryBoardの設定
ソースコードのオブジェクトと紐付け
デリゲートメソッドの実装
xibファイルでカスタムセルを作成
カスタムセルを表示する
最終的なコード

StoryBoardの設定

StoryBoardを使って

ソースコードのオブジェクトと紐付ける

StoryBoardで設置したオブジェクトをソースコード上で編集できるようにするには「@IBOutlet」を使います。 IBOutletについてはこちらどのように実装するかというととってもシンブルです。以下のように、クラス変数としてUITableView!型の変数を定義してあげます。


class CalculationViewController: UIViewController　{
    @IBOutlet var tableView : UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

そしたら次は、StoryBoardファイルを開きます。今回追加したUITalbeViewにカーソルを合わせてメニューを表示します。 Reference Outletsの右にある丸いところからStoryboardへドラッグすると、 Storyboardと紐づいているソースコードで定義されたオブジェクトが表示されます。

デリゲートメソッドの実装

次にデリゲートメソッドを実装します。デリゲートメソッドに関してはこちらで説明します。まずはデリゲートメソッドを使える状態にしましょう。手順は二つです。

UITableViewDelegateとUITableViewDataSourceを継承する。
UITableViewのオブジェクトのdelegateとdataSourceを設定する。

これでUITableViewのデリゲートメソッドを使えるようになります。

class CalculationViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    @IBOutlet var tableView : UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.delegate = self
        self.tableView.dataSource = self
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

UITableViewのデリゲートメソッドはいくつかあります。

tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?	セクションのヘッダーのビューを設定する
numberOfSections(in tableView: UITableView) -> Int	セクションの数を設定する
tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int?	指定したセクションのセルの数を設定する
tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat	セクションのヘッダーの高さを設定する
tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell	各セルを設定する

詳しくはこちら今回、デリゲートメソッドを使って以下のように実装しています。

    //MARK : UITableViewDelegate
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        return self.headerView
    }
    // セクションの数
    func numberOfSections(in tableView: UITableView) -> Int {
        return //セクションの数
    }
    
    // 1セクション毎のセルの数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return //セルの数
    }
    
    // ヘッダーの高さを設定する
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return //ヘッダーの高さの値
    }
    
    // セルの高さを設定する
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return //セルの高さの値
    }
    
    // MARK: UITableViewDataSource
    // セルの内容を設定する
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        return //表示したいTableViewCell型のオブジェクト
    }

xibファイルでカスタムセルを作成

カスタムビューを作成する手順は以下の通りです。

「File -> New -> File」（command + N）から新しくファイルを作成
「Cocoa Touch Class」を選択
「Subclass of」はUITableViewCellを選択
「Also create XIB file」にチェックを入れる

あとは保存先を選択してファイルを作成します。余談ですが、今回はUITableViewCellでファイルを作ったので「Also create XIB file」にチェックを入れることができましたが、UIViewなどではそうはいきません。その辺りはこちらに書きます。

カスタムセルを表示する

では、カスタムセルを実際に表示してみましょう。手順は以下のような感じです。

xibファイルを好きなように構成する
xibファイルを読み込む
デリゲートメソッドで読み込んだxibファイルを表示する

xibファイルを好きなように構成する

ここは自由です。まずは、Xibファイルから簡単に作成してみましょう。ドラッグアンドドロップをしてUIを配置してみてください。

xibファイルを読み込む

では、作ったxibファイルを読み込んで、ソースコードで呼び出せるようにしましょう。以下のように書くとできます。詳しく知りたい人はこちら

class CalculationViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    // 読み込むNIBファイルのクラス名
    let QUESTION_CELL_NIB = "QuestionCell"
    let CHECK_POINT_CELL_NIB = "CheckPointCell"
    
    // TableViewCellの識別子
    let QUESTION_CELL_IDENTIFIER = "QuestionCell"
    let CHECK_POINT_CELL_IDENTIFIER = "CheckPointCell"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let questionNib = UINib(nibName: QUESTION_CELL_NIB, bundle: nil)
        self.tableView.register(questionNib, forCellReuseIdentifier: QUESTION_CELL_IDENTIFIER)
    }

    // 1セクション毎のセルの数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 100
    }

    // セルの高さを設定する
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.row % 11 == 10 {
            return CheckPointCell.cellHeight()
        }
        return QuestionCell.cellHeight()
    }

    // MARK: UITableViewDataSource
    // セルの内容を設定する
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: 
        QUESTION_CELL_IDENTIFIER, for: indexPath)
        return cell
    }
}

最終的なコード

最終的に、以下のようなコードが出来上がります。 UItableViewの初歩はこんな感じです。お疲れ様です！

import UIKit

class CalculationViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // 読み込むNIBファイルのクラス名
    let QUESTION_CELL_NIB = "QuestionCell"
    let CHECK_POINT_CELL_NIB = "CheckPointCell"
    
    // TableViewCellの識別子
    let QUESTION_CELL_IDENTIFIER = "QuestionCell"
    let CHECK_POINT_CELL_IDENTIFIER = "CheckPointCell"
    
    @IBOutlet var tableView : UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.tableView.delegate = self
        self.tableView.dataSource = self
    }

    // セクションの数
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    // 1セクション毎のセルの数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 100
    }
    
    // ヘッダーの高さを設定する
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return CalcStatusView.viewHeight()
    }

    // セルの高さを設定する
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.row % 11 == 10 {
            return CheckPointCell.cellHeight()
        }
        return QuestionCell.cellHeight()
    }
}