【Swift3】CustomCellの実装方法

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

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

まずTableViewControllerのTableCell内にImageViewとLabelを２つ配置する
※部品からドラッグするのみ
※本当はAutoLayoutを設定する必要があるが今回は割愛
<img width="1280" alt="スクリーンショット 2018-07-18 16.04.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/272324/67974add-b08d-0c64-9694-6c9f69ae564f.png">

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

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

StoryboardにてTableCellと追加したCustomクラスを紐づける
<img width="1280" alt="スクリーンショット 2018-07-18 16.10.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/272324/f3f4e296-9214-5e6a-3829-34310af2e9a2.png">

あとコードから紐づける際にidentifierが必要なためstoryboardで”MyCell”と入力しておく
<img width="1280" alt="スクリーンショット 2018-07-18 16.24.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/272324/af68c8f7-39a4-4d28-579c-2c4dd89acc72.png">



次に追加した３つの部品（ImageViewとLabelを２つ）を追加したCustomクラス側のソースに紐付け
<img width="1280" alt="スクリーンショット 2018-07-18 16.12.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/272324/eb4f4439-dc79-5471-51be-670971a36d8d.png">

これで準備完了！！！

あとはソースを変更する。
変更する箇所は下記のメソッドのみで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
    }

}

```

実装後はこんな感じ
<img width="1280" alt="スクリーンショット 2018-07-18 17.12.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/272324/af2fa180-353c-ec58-b0da-58d3dba63184.png">