UISwitchでTableViewCellの伸縮を切り替えたい（コードのみ）

前提・実現したいこと

前提
Storyboardは使用しておらず、コードだけで実装しています。

実現したいこと
Swiftで伸縮可能セルをUISwitchで切り替えるシステムがつくりたいです。
以下のコードで下の写真のようになります。
![]

NotificationsのUISwitchをオフにしたらそのセルの下にセルを追加し、そのセルにUIPickerViewを設置したいです。そして、UISwitchをオンに戻せば追加されたセルが消えるようにしたいです。
どのように記述したら良いのかわかりません。この機会に学ばせていただきたいと考えております。

該当のソースコード（UserInfoHeaderは文字数の都合上省略しております）

以下コードは下記リンクを参考にして作らせていただきました。
How to Add A Settings Page To Your App
↓ViewController.swift

swift
1import UIKit
2
3private let reuseIdentifier = "SettingsCell"
4
5class ViewController: UIViewController {
6    
7    // MARK: - Properties
8    
9    var tableView: UITableView!
10    var userInfoHeader: UserInfoHeader!
11    
12    // MARK: - Init
13
14    override func viewDidLoad() {
15        super.viewDidLoad()
16        configureUI()
17    }
18
19    // MARK: - Helper Functions
20    
21    func configureTableView() {
22        tableView = UITableView()
23        tableView.delegate = self
24        tableView.dataSource = self
25        tableView.rowHeight = 60
26        
27        tableView.register(SettingsCell.self, forCellReuseIdentifier: reuseIdentifier)
28        view.addSubview(tableView)
29        tableView.frame = view.frame
30        
31        let frame = CGRect(x: 0, y: 88, width: view.frame.width, height: 100)
32        userInfoHeader = UserInfoHeader(frame: frame)
33        tableView.tableHeaderView = userInfoHeader
34        tableView.tableFooterView = UIView()
35    }
36    
37    func configureUI() {
38        configureTableView()
39        
40        navigationController?.navigationBar.prefersLargeTitles = true
41        navigationController?.navigationBar.isTranslucent = false
42        navigationController?.navigationBar.barStyle = .black
43        navigationController?.navigationBar.barTintColor = UIColor(red: 55/255, green: 120/255, blue: 250/255, alpha: 1)
44        navigationItem.title = "Settings"
45    }
46
47}
48
49extension ViewController: UITableViewDelegate, UITableViewDataSource {
50    
51    func numberOfSections(in tableView: UITableView) -> Int {
52        return SettingsSection.allCases.count
53    }
54    
55    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
56        
57        guard let section = SettingsSection(rawValue: section) else { return 0 }
58        
59        switch section {
60        case .Social: return SocialOptions.allCases.count
61        case .Communications: return CommunicationOptions.allCases.count
62        }
63    }
64    
65    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
66        let view = UIView()
67        view.backgroundColor = UIColor(red: 55/255, green: 120/255, blue: 250/255, alpha: 1)
68        
69        print("Section is (section)")
70        
71        let title = UILabel()
72        title.font = UIFont.boldSystemFont(ofSize: 16)
73        title.textColor = .white
74        title.text = SettingsSection(rawValue: section)?.description
75        view.addSubview(title)
76        title.translatesAutoresizingMaskIntoConstraints = false
77        title.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
78        title.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 16).isActive = true
79        
80        return view
81    }
82    
83    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
84        return 40
85    }
86    
87    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
88        let cell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier, for: indexPath) as! SettingsCell
89        guard let section = SettingsSection(rawValue: indexPath.section) else { return UITableViewCell() }
90
91        switch section {
92        case .Social:
93            let social = SocialOptions(rawValue: indexPath.row)
94            cell.sectionType = social
95        case .Communications:
96            let communications = CommunicationOptions(rawValue: indexPath.row)
97            cell.sectionType = communications
98        }
99        
100        return cell
101    }
102    
103    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
104        guard let section = SettingsSection(rawValue: indexPath.section) else { return }
105        
106        switch section {
107        case .Social:
108            print(SocialOptions(rawValue: indexPath.row)?.description)
109        case .Communications:
110            print(CommunicationOptions(rawValue: indexPath.row)?.description)
111        }
112    }
113}
114
115
116

↓SettingSection.swift

swift
1protocol SectionType: CustomStringConvertible {
2    var containsSwitch: Bool { get }
3}
4
5enum SettingsSection: Int, CaseIterable, CustomStringConvertible {
6    case Social 
7    case Communications
8    
9    var description: String {
10        switch self {
11        case .Social: return "Social"
12        case .Communications: return "Communications"
13        }
14    }
15}
16
17enum SocialOptions: Int, CaseIterable, SectionType {
18    case editProfile
19    case logout
20    
21    var containsSwitch: Bool { return false }
22    
23    var description: String {
24        switch self {
25        case .editProfile: return "Edit Profile"
26        case .logout: return "Log Out"
27        }
28    }
29}
30
31enum CommunicationOptions: Int, CaseIterable, SectionType {
32    case notifications
33    case email
34    case reportCrashes
35    
36    var containsSwitch: Bool {
37        switch self {
38        case .notifications: return true
39        case .email: return true
40        case .reportCrashes: return true
41        }
42    }
43    
44    var description: String {
45        switch self {
46        case .notifications: return "Notifications"
47        case .email: return "Email"
48        case .reportCrashes: return "Report Crashes"
49        }
50    }
51}
52

↓SettingsCell.swift

import UIKit

class SettingsCell: UITableViewCell {
    
    // MARK: - Properties
    
    var sectionType: SectionType? {
        didSet {
            guard let sectionType = sectionType else { return }
            textLabel?.text = sectionType.description
            switchControl.isHidden = !sectionType.containsSwitch
        }
    }
    
    lazy var switchControl: UISwitch = {
        let switchControl = UISwitch()
        switchControl.isOn = true
        switchControl.onTintColor = UIColor(red: 55/255, green: 120/255, blue: 250/255, alpha: 1)
        switchControl.translatesAutoresizingMaskIntoConstraints = false
        switchControl.addTarget(self, action: #selector(handleSwitchAction), for: .valueChanged)
        return  switchControl
    }()
    
    // MARK: - Init
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        addSubview(switchControl)
        switchControl.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        switchControl.rightAnchor.constraint(equalTo: rightAnchor, constant: -12).isActive = true
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // MARK: - Selectors
    
    @objc func handleSwitchAction(sender: UISwitch) {
        if sender.isOn {
            print("Turned on")
        } else {
            print("Turned off")
        }
    }
    
}

試したこと

以下サイトを応用できないかと思って、試してみました。

YouTube TableView -Expand/Collapse Section : Swift3

Qiita　伸縮するUITableViewを作る

補足情報（FW/ツールのバージョンなど）

Xcode　Version 11.3.1

自分なりにとことん粘ってみましたができませんでした。どなたかお力を貸してください。

行動規範の内容に同意します

回答2件

えっと、TableView を扱うときの鉄則ですが、表示するデータはすべて ViewController（というかデータソース）側で持つ必要があります。で、今回必要なデータは、表示内容（SettingsSection, SocialOptions, CommunicationOptions）に加えて、各 UISwitchControl の状態が必要です。ので、はじめにそれをなんとかしましょう。

swift
1class ViewController: UIViewController {
2
3    var switchStates: [CommunicationOptions: Bool] = [.notifications: true, .email: true, .reportCrashes: true]
4
5    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
6
7            // case .Communications: に以下を追加
8            if communications?.containsSwitch == true {
9                cell.switchControl.isOn = switchStates[communications!] == true
10                cell.delegate = self
11            }

swift
1protocol SettingsCellDelegate: AnyObject {
2    func settingsCell(_ settingsCell: SettingsCell, switchValue: Bool)
3}
4
5class SettingsCell: UITableViewCell {
6
7    weak var delegate: SettingsCellDelegate?
8
9    @objc func handleSwitchAction(sender: UISwitch) {
10        delegate?.settingsCell(self, switchValue: sender.isOn)
11    }
12}

swift
1extension ViewController: SettingsCellDelegate {
2    func settingsCell(_ settingsCell: SettingsCell, switchValue: Bool) {
3        guard let communications = settingsCell.sectionType as? CommunicationOptions else { return }
4        switchStates[communications] = switchValue
5        print(switchStates)
6    }
7}

（バージョン管理ツールをお使いであれば、ここで一度コミットしておくと良いかも知れません。）

次に、セルの高さを動的に変えられるようにします。

swift
1class ViewController: UIViewController {
2
3    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
4        if let section = SettingsSection(rawValue: indexPath.section),
5            section == .Communications,
6            let communications = CommunicationOptions(rawValue: indexPath.row),
7            switchStates[communications] == false {
8            return tableView.rowHeight + 216
9        }
10        return tableView.rowHeight
11    }

swift
1extension ViewController: SettingsCellDelegate {
2    func settingsCell(_ settingsCell: SettingsCell, switchValue: Bool) {
3        guard let communications = settingsCell.sectionType as? CommunicationOptions else { return }
4        switchStates[communications] = switchValue
5
6        if let indexPath = tableView.indexPath(for: settingsCell) {
7            tableView.beginUpdates()
8            tableView.reloadRows(at: [indexPath], with: .automatic)
9            tableView.endUpdates()
10        }
11    }
12}

最後に、SettingsCell に UIPickerView を表示します。

swift
1class SettingsCell: UITableViewCell {
2
3    var pickerValues = ["Item #1", "Item #2", "Item #3", "Item #4", "Item #5"]
4
5    lazy var pickerView: UIPickerView = {
6        let pickerView = UIPickerView()
7        pickerView.dataSource = self
8        pickerView.delegate = self
9        addSubview(pickerView)
10        return pickerView
11    }()
12
13    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
14        super.init(style: style, reuseIdentifier: reuseIdentifier)
15
16        addSubview(switchControl)
17        // switchControl.centerYAnchor の行を次で置き換える。
18        switchControl.topAnchor.constraint(equalTo: topAnchor, constant: 14).isActive = true
19        switchControl.rightAnchor.constraint(equalTo: rightAnchor, constant: -12).isActive = true
20    }
21
22    override func layoutSubviews() {
23        super.layoutSubviews()
24        self.textLabel?.frame.size.height = 60
25        if sectionType?.containsSwitch == true {
26            pickerView.isHidden = switchControl.isOn
27            pickerView.frame = CGRect(x: 0, y: 60, width: self.frame.width, height: 216)
28        }
29    }

swift
1extension SettingsCell: UIPickerViewDataSource, UIPickerViewDelegate {
2    func numberOfComponents(in pickerView: UIPickerView) -> Int {
3        return 1
4    }
5
6    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
7        return pickerValues.count
8    }
9
10    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
11        return pickerValues[row]
12    }
13}

投稿2020/02/23 03:43

hoshi-takanori

総合スコア7901

nishimu

2020/02/23 05:12 編集

hoshi-takanori 様ご回答ありがとうございます。 1点お聞きしたいことがあります。 1.ご回答いただいた1番上のコードはViewControllerのclass内に記述すれば良いでしょうか？今までextentionに記述してきたので確認のためにお聞きしたかったです。（ペーペーなので私の言ってることが間違っているかもしれないです）見よう見まねで写しているだけになってしまいますが、この機会を大切にし、一つ一つ覚えていきたいと考えております。申し訳ありませんがお力を貸してください

hoshi-takanori

2020/02/23 05:35

1番上というのは class ViewController: UIViewController { で始まるやつですよね。それは ViewController クラスに記述してください。2番目は SettingsCell クラスの前と中、3番目は ViewController クラスの後ろ、って感じですね。分かりにくくてすみません。

nishimu

2020/02/23 06:01 編集

失礼します。 ViewControllerクラスの tableView.register(SettingsCell.self, forCellReuseIdentifier: reuseIdentifier) にCannot invoke 'register' with an argument list of type '(@escaping (HomeSettingsCell, Bool) -> (), forCellReuseIdentifier: String)'とエラー表記がされました。ググってみるとxibのidentifierを埋めればいいと書いてあるのですが、xibファイルを作っていないですし、ちゃんとprivate let reuseIdentifier = "SettingsCell"　としてあるのに何故なのかと疑問に思っています。どうデバッグしたら良いでしょうか？何度もすみません tableView.register(SettingsCell.self, forCellReuseIdentifier: reuseIdentifier)をコメントアウトしてrunすると以下のようなコンパイルエラーになりました 2020-02-23 14:46:11.445654+0900 MathDuel[4022:270593] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'unable to dequeue a cell with identifier SettingsCell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard'

hoshi-takanori

2020/02/23 06:26

修正後のソースを貼り付けておきます。

nishimu

2020/02/23 07:01

失礼します。修正後のソースのおかげでデバッグに成功しました。ビルドも成功です。貴重なお時間を回答にあてていただいてありがとうございました。

行動規範の内容に同意します

ベストアンサー

修正後のソース一式です。（文字数制限のため、新しい回答にしました。）

↓ViewController.swift

swift
1import UIKit
2
3private let reuseIdentifier = "SettingsCell"
4
5class ViewController: UIViewController {
6
7    // MARK: - Properties
8
9    var tableView: UITableView!
10    var userInfoHeader: UserInfoHeader!
11
12    var switchStates: [CommunicationOptions: Bool] = [.notifications: true, .email: true, .reportCrashes: true]
13
14    // MARK: - Init
15
16    override func viewDidLoad() {
17        super.viewDidLoad()
18        configureUI()
19    }
20
21    // MARK: - Helper Functions
22
23    func configureTableView() {
24        tableView = UITableView()
25        tableView.delegate = self
26        tableView.dataSource = self
27        tableView.rowHeight = 60
28
29        tableView.register(SettingsCell.self, forCellReuseIdentifier: reuseIdentifier)
30        view.addSubview(tableView)
31        tableView.frame = view.frame
32
33        let frame = CGRect(x: 0, y: 88, width: view.frame.width, height: 100)
34        userInfoHeader = UserInfoHeader(frame: frame)
35        tableView.tableHeaderView = userInfoHeader
36        tableView.tableFooterView = UIView()
37    }
38
39    func configureUI() {
40        configureTableView()
41
42        navigationController?.navigationBar.prefersLargeTitles = true
43        navigationController?.navigationBar.isTranslucent = false
44        navigationController?.navigationBar.barStyle = .black
45        navigationController?.navigationBar.barTintColor = UIColor(red: 55/255, green: 120/255, blue: 250/255, alpha: 1)
46        navigationItem.title = "Settings"
47    }
48
49}
50
51extension ViewController: UITableViewDelegate, UITableViewDataSource {
52
53    func numberOfSections(in tableView: UITableView) -> Int {
54        return SettingsSection.allCases.count
55    }
56
57    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
58
59        guard let section = SettingsSection(rawValue: section) else { return 0 }
60
61        switch section {
62        case .Social: return SocialOptions.allCases.count
63        case .Communications: return CommunicationOptions.allCases.count
64        }
65    }
66
67    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
68        let view = UIView()
69        view.backgroundColor = UIColor(red: 55/255, green: 120/255, blue: 250/255, alpha: 1)
70
71        print("Section is (section)")
72
73        let title = UILabel()
74        title.font = UIFont.boldSystemFont(ofSize: 16)
75        title.textColor = .white
76        title.text = SettingsSection(rawValue: section)?.description
77        view.addSubview(title)
78        title.translatesAutoresizingMaskIntoConstraints = false
79        title.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
80        title.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 16).isActive = true
81
82        return view
83    }
84
85    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
86        return 40
87    }
88
89    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
90        if let section = SettingsSection(rawValue: indexPath.section),
91            section == .Communications,
92            let communications = CommunicationOptions(rawValue: indexPath.row),
93            switchStates[communications] == false {
94            return tableView.rowHeight + 216
95        }
96        return tableView.rowHeight
97    }
98
99    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
100        let cell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier, for: indexPath) as! SettingsCell
101        guard let section = SettingsSection(rawValue: indexPath.section) else { return UITableViewCell() }
102
103        switch section {
104        case .Social:
105            let social = SocialOptions(rawValue: indexPath.row)
106            cell.sectionType = social
107        case .Communications:
108            let communications = CommunicationOptions(rawValue: indexPath.row)
109            cell.sectionType = communications
110            if communications?.containsSwitch == true {
111                cell.switchControl.isOn = switchStates[communications!] == true
112                cell.delegate = self
113            }
114        }
115
116        return cell
117    }
118
119    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
120        guard let section = SettingsSection(rawValue: indexPath.section) else { return }
121
122        switch section {
123        case .Social:
124            print(SocialOptions(rawValue: indexPath.row)?.description)
125        case .Communications:
126            print(CommunicationOptions(rawValue: indexPath.row)?.description)
127        }
128    }
129}
130
131extension ViewController: SettingsCellDelegate {
132    func settingsCell(_ settingsCell: SettingsCell, switchValue: Bool) {
133        guard let communications = settingsCell.sectionType as? CommunicationOptions else { return }
134        switchStates[communications] = switchValue
135        print(switchStates)
136
137        if let indexPath = tableView.indexPath(for: settingsCell) {
138            tableView.beginUpdates()
139            tableView.reloadRows(at: [indexPath], with: .automatic)
140            tableView.endUpdates()
141        }
142    }
143}

↓SettingSection.swift

swift
1protocol SectionType: CustomStringConvertible {
2    var containsSwitch: Bool { get }
3}
4
5enum SettingsSection: Int, CaseIterable, CustomStringConvertible {
6    case Social 
7    case Communications
8
9    var description: String {
10        switch self {
11        case .Social: return "Social"
12        case .Communications: return "Communications"
13        }
14    }
15}
16
17enum SocialOptions: Int, CaseIterable, SectionType {
18    case editProfile
19    case logout
20
21    var containsSwitch: Bool { return false }
22
23    var description: String {
24        switch self {
25        case .editProfile: return "Edit Profile"
26        case .logout: return "Log Out"
27        }
28    }
29}
30
31enum CommunicationOptions: Int, CaseIterable, SectionType {
32    case notifications
33    case email
34    case reportCrashes
35
36    var containsSwitch: Bool {
37        switch self {
38        case .notifications: return true
39        case .email: return true
40        case .reportCrashes: return true
41        }
42    }
43
44    var description: String {
45        switch self {
46        case .notifications: return "Notifications"
47        case .email: return "Email"
48        case .reportCrashes: return "Report Crashes"
49        }
50    }
51}

↓SettingsCell.swift

swift
1import UIKit
2
3protocol SettingsCellDelegate: AnyObject {
4    func settingsCell(_ settingsCell: SettingsCell, switchValue: Bool)
5}
6
7class SettingsCell: UITableViewCell {
8
9    // MARK: - Properties
10
11    var pickerValues = ["Item #1", "Item #2", "Item #3", "Item #4", "Item #5"]
12
13    weak var delegate: SettingsCellDelegate?
14
15    var sectionType: SectionType? {
16        didSet {
17            guard let sectionType = sectionType else { return }
18            textLabel?.text = sectionType.description
19            switchControl.isHidden = !sectionType.containsSwitch
20        }
21    }
22
23    lazy var switchControl: UISwitch = {
24        let switchControl = UISwitch()
25        switchControl.isOn = true
26        switchControl.onTintColor = UIColor(red: 55/255, green: 120/255, blue: 250/255, alpha: 1)
27        switchControl.translatesAutoresizingMaskIntoConstraints = false
28        switchControl.addTarget(self, action: #selector(handleSwitchAction), for: .valueChanged)
29        return  switchControl
30    }()
31
32    lazy var pickerView: UIPickerView = {
33        let pickerView = UIPickerView()
34        pickerView.dataSource = self
35        pickerView.delegate = self
36        addSubview(pickerView)
37        return pickerView
38    }()
39
40    // MARK: - Init
41
42    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
43        super.init(style: style, reuseIdentifier: reuseIdentifier)
44
45        addSubview(switchControl)
46        switchControl.topAnchor.constraint(equalTo: topAnchor, constant: 14).isActive = true
47        switchControl.rightAnchor.constraint(equalTo: rightAnchor, constant: -12).isActive = true
48    }
49
50    required init?(coder aDecoder: NSCoder) {
51        fatalError("init(coder:) has not been implemented")
52    }
53
54    override func layoutSubviews() {
55        super.layoutSubviews()
56        self.textLabel?.frame.size.height = 60
57        if sectionType?.containsSwitch == true {
58            pickerView.isHidden = switchControl.isOn
59            pickerView.frame = CGRect(x: 0, y: 60, width: self.frame.width, height: 216)
60        } else {
61            pickerView.isHidden = true
62        }
63    }
64
65    // MARK: - Selectors
66
67    @objc func handleSwitchAction(sender: UISwitch) {
68        if sender.isOn {
69            print("Turned on")
70        } else {
71            print("Turned off")
72        }
73        delegate?.settingsCell(self, switchValue: sender.isOn)
74    }
75
76}
77
78extension SettingsCell: UIPickerViewDataSource, UIPickerViewDelegate {
79    func numberOfComponents(in pickerView: UIPickerView) -> Int {
80        return 1
81    }
82
83    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
84        return pickerValues.count
85    }
86
87    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
88        return pickerValues[row]
89    }
90}