소개

최근, TableView상의 Switch를 눌렀을 때 그 안의 설정을 유효하게 하는, 같은 잘 보이는 것을 만들려고 했습니다만, 조사해도 좀처럼 제대로 움직이는 코드를 만날 수 없었습니다. 그래서 이번에는 우선 목적을 달성할 수 있을 정도로 움직인 코드에 대해 정리해 보겠습니다.

환경

Xcode:12.3

Swift:5.3.2

이번에 구현할 내용

print 문으로 콘솔에 다음과 같이 출력

셀에서 탭
→ (셀 번호) 번째 셀이 선택되었다

셀에서 스위치를 탭합니다.
→(on/off)
→ (셀의 레이블 텍스트)가 (true 또는 false)

동영상이라면 다음과 같습니다.

맞춤 셀 준비

먼저 맞춤 셀을 만듭니다.

오른쪽 클릭 → New File...


코코아 터치 클래스 선택


파일 이름은 자유롭습니다. 이번에는 「TableViewCell」로 합니다. Also create XIB 파일을 체크하는 것을 잊지 마세요.


지금까지 가능하면 기본 위치에 저장합시다. 다음에 방금 전의 TableViewCell.swift에 코드를 써 갑니다.

TableViewCell.swift

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var uiSwitch: UISwitch!

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

        // スイッチを最初全てoffにしておく
        uiSwitch.isOn = false
    }

    // スイッチが押された時に呼ばれる
    @IBAction func changeSwitch(_ sender: UISwitch) {
        if sender.isOn {
            print("on")
        } else {
            print("off")
        }
    }
}

다음으로 xib 파일도 편집합니다. 이번에는 이런 느낌으로. 연관도 잊지 않고.

ViewController로 TableView 설정하기

ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet var table: UITableView!
    var cellContents: Array = ["1つ目","2つ目","3つ目","4つ目","5つ目"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // dataSourceメソッドとdelegateメソッドはこのファイルに書くと宣言
        table.dataSource = self
        table.delegate = self

        // 余分なセルを描画しないようにする
        table.tableFooterView = UIView()

        // 使うxibファイルを指定
        table.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "TableViewCell")
    }

    // セルの個数を配列の個数に設定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return cellContents.count
    }

    // セルの設定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell

        // セルのラベルに配列の中身を順番に表示
        cell.label.text = cellContents[indexPath.row]
        // スイッチのタグにindexPath.rowの値を入れる
        cell.uiSwitch.tag = indexPath.row
        // スイッチが押されたときの動作
        cell.uiSwitch.addTarget(self, action: #selector(changeSwitch(_:)), for: UIControl.Event.valueChanged)

        return cell
    }

    // セルが押された時に呼ばれるメソッド
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("\(indexPath.row)番目のセルが選ばれた")
    }

    // セルの幅を80に設定
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }

    @objc func changeSwitch(_ sender: UISwitch) {
        /*
         sender.tagにはスイッチのセルの位置が入る(Int)
         sender.isOnにはスイッチのon/off情報が入る(Bool)
         下のprint文はセル内のラベルの内容とスイッチのTrue/False
         */
        print(cellContents[sender.tag] + "が\(sender.isOn)になった")
    }
}

다음으로 스토리 보드도 편집합니다. 이쪽도 관련도 잊지 않고.

요약

응용하면 대체로는 할 수 있을 것 같은 느낌이 듭니다.
정확히 같은 내용의 프로젝트는 여기

참고 사이트

셀에서 스위치를 전환 할 때 셀의 텍스트를 출력하고 싶습니다.