显示多个 UITableViewCell 问题

Question

我是自动布局编程的新手，我在 UITableView 中显示 2 个不同的单元格时遇到问题，如下所示：

我要显示个人资料图片和用户名的第一个单元格，然后是菜单选项。但是作为屏幕截图，第二部分 菜单选项 显示在第一部分（用户个人资料图片和用户名）后面。

如何解决这个问题？

UserTableViewCell:

class UserTableViewCell: UITableViewCell {

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        layoutUI()
        backgroundColor = .CustomGreen()
        selectionStyle = .none
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    lazy var containerView: UIView = {
        let containerView = UIView()
        containerView.backgroundColor = .clear
        containerView.translatesAutoresizingMaskIntoConstraints = false
        return containerView
    }()

    lazy var userPhoto: UIImageView = {
        let userPhoto = UIImageView()
        userPhoto.translatesAutoresizingMaskIntoConstraints = false
        userPhoto.layer.cornerRadius = userPhoto.frame.size.width / 2
        userPhoto.clipsToBounds = true
        return userPhoto
    }()

    lazy var username: UILabel = {
        let username = UILabel()
        username.textColor = .white
        username.text = "Ahmed Abd Elaziz"
        username.translatesAutoresizingMaskIntoConstraints = false
        return username
    }()

    func setupContainerViewConstraints() {
        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: topAnchor),
            containerView.bottomAnchor.constraint(equalTo: bottomAnchor),
            containerView.leadingAnchor.constraint(equalTo: leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: trailingAnchor)
        ])
    }

    func setupUserPhotoConstraints() {
        NSLayoutConstraint.activate([
            userPhoto.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
            userPhoto.widthAnchor.constraint(equalToConstant: frame.width / 3),
            userPhoto.heightAnchor.constraint(equalToConstant: frame.width / 3)
        ])
    }

    func setupUsernameConstraints() {
        NSLayoutConstraint.activate([
            username.topAnchor.constraint(lessThanOrEqualTo: userPhoto.bottomAnchor, constant: 16),
            username.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
        ])
    }

    func addSubviews() {
        addSubview(containerView)
        containerView.addSubview(userPhoto)
        containerView.addSubview(username)
    }

    func layoutUI() {
        addSubviews()
        setupContainerViewConstraints()
        setupUserPhotoConstraints()
        setupUsernameConstraints()
    }

}

SideMenuOptionTableViewCell:

class SideMenuOptionTableViewCell: UITableViewCell {

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        layoutUI()
        backgroundColor = .CustomGreen()
        selectionStyle = .none
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    lazy var containerView: UIView = {
        let containerView = UIView()
        containerView.backgroundColor = .clear
        containerView.translatesAutoresizingMaskIntoConstraints = false
        return containerView
    }()

    lazy var viewTitle: UILabel = {
        let viewTitle = UILabel()
        viewTitle.font = UIFont(name: "AvenirNext-Regular", size: 20)
        viewTitle.textColor = .white
        viewTitle.numberOfLines = 0
        viewTitle.translatesAutoresizingMaskIntoConstraints = false
        return viewTitle
    }()

    func setupContainerViewConstraints() {
        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: topAnchor),
            containerView.bottomAnchor.constraint(equalTo: bottomAnchor),
            containerView.leadingAnchor.constraint(equalTo: leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: trailingAnchor)
        ])
    }

    func setupFoodTitle() {
        NSLayoutConstraint.activate([
            viewTitle.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
            viewTitle.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16)
        ])
    }

    func addSubview() {
        addSubview(containerView)
        containerView.addSubview(viewTitle)
    }

    func layoutUI() {
        addSubview()
        setupContainerViewConstraints()
        setupFoodTitle()
    }

}

SideMenuTableViewController:

class SideMenuTableViewController: UITableViewController {

    let viewControllers = ["Controller One", "Logout"]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(UserTableViewCell.self, forCellReuseIdentifier: "UserTableViewCell")
        tableView.register(SideMenuOptionTableViewCell.self, forCellReuseIdentifier: "SideMenuOptionTableViewCell")
        tableView.reloadData()
        tableView.backgroundColor = .CustomGreen()
        tableView.separatorStyle = .none
        tableView.rowHeight = UITableView.automaticDimension
//        tableView.estimatedRowHeight = 100
    }

    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return section == 0 ? 1 : viewControllers.count
    }


    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.section == 0 {
            let cell = tableView.dequeueReusableCell(withIdentifier: "UserTableViewCell", for: indexPath) as! UserTableViewCell
            cell.userPhoto.image = UIImage(named: "ahmed")
            return cell
        } else {
            let cell = tableView.dequeueReusableCell(withIdentifier: "SideMenuOptionTableViewCell", for: indexPath) as! SideMenuOptionTableViewCell
            cell.viewTitle.text = viewControllers[indexPath.row]
            return cell
        }

    }

}

Answer 1

这里的问题是您根据单元格的高度添加约束，并且单元格中的所有视图都在调整。由于视图的 space 太小，它们与下一个单元格的视图重叠。您可以通过增加单元格内容视图的大小来解决此问题。

在 UserTableViewCell 的初始化中添加这一行

let minHeight = 70
let minHeightConstraint = contentView.heightAnchor.constraint(greaterThanOrEqualToConstant: minHeight)
minHeightConstraint.priority = UILayoutPriority(rawValue: 999)
minHeightConstraint.isActive = true

显示多个 UITableViewCell 问题

Multiple UITableViewCell problem in displaying

swift

uitableview

uitableviewautomaticdimension