【Swift3】CustomCellの実装方法

CustomCellの実装は必須項目となるのでメモ

今回も過去に実装したSwiftStudyに追加する形で解説する

まずTableViewControllerのTableCell内にImageViewとLabelを２つ配置する
※部品からドラッグするのみ
※本当はAutoLayoutを設定する必要があるが今回は割愛

追加したCell上のImageViewとLabelにはUITableViewCell越しにアクセスする

プロジェクトよりUITableViewCellを継承したクラスのソースを追加する
今回はTestCustomTableViewCellという名前にする

StoryboardにてTableCellと追加したCustomクラスを紐づける

あとコードから紐づける際にidentifierが必要なためstoryboardで”MyCell”と入力しておく

次に追加した３つの部品（ImageViewとLabelを２つ）を追加したCustomクラス側のソースに紐付け

これで準備完了！！！

あとはソースを変更する。
変更する箇所は下記のメソッドのみでOK
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

Cellの取得処理を下記に変更
let cell: TestCustomTableViewCell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath) as! TestCustomTableViewCell

あとはTestCustomTableViewCell越しにlabelとImageViewにアクセスする。
下記にソースを記載しておく

TestTableViewController.swift

import UIKit

class TestTableViewController: UITableViewController {

    let sectionList = ["section_1", "section_2", "section_3"]
    let cellList_1 = ["cell_1_1"]
    let cellList_2 = ["cell_2_1", "cell_2_1"]
    let cellList_3 = ["cell_3_1", "cell_3_2", "cell_3_3"]

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

    //セクション数を設定
    override func numberOfSections(in tableView: UITableView) -> Int {
        return sectionList.count
    }

    //セクションのタイトル設定
    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sectionList[section]
    }

    //セクションごとのCell数を設定
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if section == 0 {
            return cellList_1.count
        } else if section == 1 {
            return cellList_2.count
        } else {
            return cellList_3.count
        }
    }

    //Cell内に表示させる文言などを設定
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得する
        let cell: TestCustomTableViewCell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath) as! TestCustomTableViewCell

        // セルに表示する値を設定する
        if indexPath.section == 0 {
            switch indexPath.row {
            case 0:
                //cell.cellImageView.image =
                cell.titleLabel.text = cellList_1[indexPath.row]
                cell.detailLabel.text = cellList_1[indexPath.row]
                break
            default:
                break
            }
        } else if indexPath.section == 1 {
            switch indexPath.row {
            case 0:
                cell.titleLabel.text = cellList_1[indexPath.row]
                cell.detailLabel.text = cellList_1[indexPath.row]
                break
            case 1:
                cell.titleLabel.text = cellList_2[indexPath.row]
                cell.detailLabel.text = cellList_2[indexPath.row]
                break
            default:
                break
            }
        } else if indexPath.section == 2 {
            switch indexPath.row {
            case 0:
                cell.titleLabel.text = cellList_3[indexPath.row]
                cell.detailLabel.text = cellList_3[indexPath.row]
                break
            case 1:
                cell.titleLabel.text = cellList_3[indexPath.row]
                cell.detailLabel.text = cellList_3[indexPath.row]
                break
            case 2:
                cell.titleLabel.text = cellList_3[indexPath.row]
                cell.detailLabel.text = cellList_3[indexPath.row]
                break
            default:
                break
            }
        }
        return cell
    }

    // セルが選択された時の動作を設定
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        if indexPath.section == 0 {
            if indexPath.row == 0 {
                print("cell_1_1 tapped")
            } else if indexPath.row == 1 {
                print("cell_1_2 tapped")
            } else if indexPath.row == 2 {
                print("cell_1_3 tapped")
            }
        } else if indexPath.section == 1 {
            if indexPath.row == 0 {
                print("cell_2_1 tapped")
            } else if indexPath.row == 1 {
                print("cell_2_2 tapped")
            } else if indexPath.row == 2 {
                print("cell_2_3 tapped")
            }
        } else if indexPath.section == 2 {
            if indexPath.row == 0 {
                print("cell_3_1 tapped")
            } else if indexPath.row == 1 {
                print("cell_3_2 tapped")
            } else if indexPath.row == 2 {
                print("cell_3_3 tapped")
            }
        }
    }
}

TestCustomTableViewCell.swift

import UIKit

class TestCustomTableViewCell: UITableViewCell {

    @IBOutlet weak var cellImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var detailLabel: UILabel!


    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

実装後はこんな感じ