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のデリゲートメソッドはいくつかあります。

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

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