UITableViewCell에 추가한 SwiftUI 버튼이 반응하지 않음

11436 단어 SwiftSwiftUI
iOS14 기기에서 UITableView의 내용만을 SwiftUI에서 뷰를 만들 때 버튼이 반응하지 않는 문제가있었습니다. (iOS13에서는 버튼의 반응이 있었으므로 OS의 버전에 따라 거동이 달라 보입니다.)

아래와 같이 버튼만 배치되어 있는 간단한 화면을 작성합니다.


import UIKit
import SwiftUI

class ViewController: UIViewController {

    @IBOutlet private weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }

}

extension ViewController: UITableViewDelegate, UITableViewDataSource {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "Cell")
        let view = ButtonView()
        let hostingController = UIHostingController(rootView: view)
        cell.addSubview(hostingController.view)

        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        hostingController.view.heightAnchor.constraint(equalToConstant: 320).isActive = true
        hostingController.view.bottomAnchor.constraint(equalTo: cell.bottomAnchor, constant: 16).isActive = true
        hostingController.view.topAnchor.constraint(equalTo: cell.topAnchor, constant: 16).isActive = true
        hostingController.view.leftAnchor.constraint(equalTo: cell.leftAnchor, constant: 16).isActive = true
        hostingController.view.rightAnchor.constraint(equalTo: cell.rightAnchor, constant: -16).isActive = true
        hostingController.view.centerYAnchor.constraint(equalTo: cell.centerYAnchor).isActive = true
        cell.selectionStyle = .none
        return cell
    }


}


●ButtonView

struct ButtonView: View {
    var body: some View {
        HStack {
            Spacer()
            VStack(alignment: .leading) {
                Spacer()
                Button(action: {
                    print("タップ")
                }) {
                    Text("ボタン")
                        .foregroundColor(Color(.blue))
                        .font(.system(size: 14))
                        .padding([.leading, .trailing], 20)
                        .overlay(
                            RoundedRectangle(cornerRadius: 14)
                                .strokeBorder(Color(.blue), lineWidth: 1)
                        )
                }
                Spacer()
            }
            Spacer()
        }
    }
}

「Debug View Hierarchy」로 계층을 보면 다음과 같이 되어 있었습니다.



버튼 위에 contentView가 타고 버리고 있습니다.
이것은 cell.addSubview로 하는 것이 문제였고, 올바르게는 cell.contentView.addSubview로 해야 했습니다.

OS에 따라 거동이 다른 것 같습니다만, 확실히 보면 알기 어렵기 때문에 비망록으로서 남겨 둡니다.

좋은 웹페이지 즐겨찾기