UITableViewCell behaves differently in iOS 11

Question

I have done a UITableViewCell programmatically and it worked just fine with iOS 10. But after updating with iOS 11 and XCode 9, it behaves differently. The layout looks scrambled as below.

But if I tap on the cell then it rearranges and looks fine as below.

Here the code for UITableViewCell

import UIKit
import SnapKit

class AboutCell: UITableViewCell {

    let roleLabel : UILabel = {
        var tablelabel = UILabel()
        tablelabel.font = UIFont (name: "Avenir Next Medium", size: 22)
        tablelabel.textAlignment = .center
        tablelabel.clipsToBounds = true
        tablelabel.translatesAutoresizingMaskIntoConstraints = false
        return tablelabel
    }()
    let nameLabel : UILabel = {
        let tablelabel = UILabel()
        tablelabel.font = UIFont (name: "Avenir Next Medium", size: 16)
        tablelabel.textAlignment = .center
        tablelabel.clipsToBounds = true
        tablelabel.translatesAutoresizingMaskIntoConstraints = false
        return tablelabel
    }()
    let webUrlLabel : UILabel = {
        let tablelabel = UILabel()
        tablelabel.font = UIFont (name: "Avenir Next Medium", size: 16)
        tablelabel.textAlignment = .center
        tablelabel.clipsToBounds = true
        tablelabel.translatesAutoresizingMaskIntoConstraints = false
        return tablelabel
    }()


    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        setupViews()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        roleLabel.frame = CGRect(x: 0, y: 10, width: self.contentView.bounds.size.width-20, height: 25)
        nameLabel.frame = CGRect(x: 0, y: roleLabel.frame.origin.y+25, width: self.bounds.size.width-20, height: 25)
        webUrlLabel.frame = CGRect(x: 0, y: nameLabel.frame.origin.y+25, width: self.bounds.size.width-20, height: 25)

    }

    func setupViews(){
        contentView.addSubview(roleLabel)
        contentView.addSubview(nameLabel)
        contentView.addSubview(webUrlLabel)
    }

    func setValuesForCell(contributor : Contributors){
        roleLabel.text = contributor.contributorRole
        nameLabel.text = contributor.contributorName
        webUrlLabel.text = contributor.contributorWeb
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

}

and the extension I wrote for TableView delegate and datasource

extension AboutController : UITableViewDelegate, UITableViewDataSource{
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell : AboutCell = tableView.dequeueReusableCell(withIdentifier: self.cellid, for: indexPath) as! AboutCell
        cell.selectionStyle = .default
        let contributor : Contributors = contributorList[indexPath.row]
        cell.setValuesForCell(contributor: contributor)

        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print(indexPath.row)

        tableView.deselectRow(at: indexPath, animated: true)

    }
}

and the ViewDidLoad method

override func viewDidLoad() {
        super.viewDidLoad()
        tableView.estimatedRowHeight = 100.0
        tableView.rowHeight = 100
        tableView.register(AboutCell.self, forCellReuseIdentifier: self.cellid)

        view.addSubview(tableView)
        tableView.snp.makeConstraints { (make) in
            make.top.right.bottom.left.equalToSuperview()
        }

        let mayu = Contributors(contibutorRole: "Developer", contributorName: "J Mayooresan", contributorWeb: "http://jaymayu.com")
        let janie = Contributors(contibutorRole: "Voice Artist", contributorName: "M Jananie", contributorWeb: "http://jaymayu.com")
        let arjun = Contributors(contibutorRole: "Aathichudi Content", contributorName: "Arjunkumar", contributorWeb: "http://laymansite.com")
        let artist = Contributors(contibutorRole: "Auvaiyar Art", contributorName: "Alvin", contributorWeb: "https://www.fiverr.com/alvincadiz18")

        contributorList = [mayu, arjun, janie, artist]

        tableView.delegate = self
        tableView.dataSource = self


        self.tableView.reloadData()


    }

Answer 1

Since you're laying out your tableView using autolayout, you also need to ensure translatesAutoresizingMaskIntoConstraints is set to false.

SnapKit should be setting the tableView's translatesAutoresizingMaskIntoConstraints to false for you already.

Since you're laying out the cells manually (using frames in layoutSubviews). Setting the cells subview's translatesAutoresizingMaskIntoConstraints to false is likely not needed.

See Apple Docs here for translatesAutoresizingMaskIntoConstraints