UITableView

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

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