How should I set constraints to the subviews of my tableHeaderView? – Ios swift

First of all, I wouldn’t use a stackView as a tableHeaderView because you need your tableHeaderView to be the same width as the tableView. Embed your stackView in a view and use that view as the header. Ensure that header remains the width of the tableView regardless of the stackView content.

Also, it looks like you are trying to mix autolayout with frame-based layout and that’s gonna get you into trouble. I’m not sure why you were setting frames on some of your subviews.

Pay attention to how you define stackView.alignment and stackView.distribution. I’m not sure what your goal is so it’s hard to give you much advice there. Bit I assume you want your subviews centered and to have their own unique width.

You defined a lot of your subviews in your stackView builder and that got you into trouble. Ensure that you have one builder for each subview. It helps keep your code clean.

Lastly, you can use autolayout to define the width equal to the width of the tableView. There are a lot of solutions on the web that make you compute the frames for your header manually and that’s just a pain.

I changed some names around added some colors but I think this will help you:

extension UIColor {
    static let headerImage = UIColor.systemPurple
    static let header = UIColor.systemPink
    static let titleField = UIColor.white
    static let descriptionField = UIColor.systemYellow
    static let headerStack = UIColor.systemOrange
    static let tableView = UIColor.systemMint
}

class ViewController: UIViewController {

    lazy var headerImage: UIImageView = {
        let headerImage = UIImageView(image: UIImage(systemName: "checkmark"))
        headerImage.translatesAutoresizingMaskIntoConstraints = false
        headerImage.backgroundColor = .headerImage
        return headerImage
    }()

    lazy var headerView: UIView = {
        let header = UIView()
        header.backgroundColor = .header
        header.translatesAutoresizingMaskIntoConstraints = false
        return header
    }()

    lazy var titleField: UITextView = {
        let titleField = UITextView(frame: .zero)
        titleField.translatesAutoresizingMaskIntoConstraints = false
        titleField.backgroundColor = .titleField
        return titleField
    }()

    lazy var descriptionField: UITextView = {
        let descriptionField = UITextView(frame: .zero)
        descriptionField.translatesAutoresizingMaskIntoConstraints = false
        descriptionField.backgroundColor = .descriptionField
        return descriptionField
    }()

    lazy var headerStack: UIStackView = {
        let stack = UIStackView(frame: .zero)
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .vertical
        stack.distribution = .fillProportionally
        stack.alignment = .center
        stack.spacing = 10
        stack.backgroundColor = .headerStack
        return stack
    }()

    lazy var tableView: UITableView = {
        let tableView = UITableView(frame: .zero, style: .insetGrouped)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(SkillSummaryCell.self, forCellReuseIdentifier: "SkillSummaryCell")
        tableView.backgroundColor = .tableView
        tableView.delegate = self
        tableView.dataSource = self
        return tableView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        addViews()
        arrangeViews()
        tableView.layoutIfNeeded()
    }

    func addViews() {
        view.addSubview(tableView)

        headerStack.addArrangedSubview(headerImage)
        headerStack.addArrangedSubview(titleField)
        headerStack.addArrangedSubview(descriptionField)

        headerView.addSubview(headerStack)

        tableView.tableHeaderView = headerView
    }

    func arrangeViews() {
        tableView.snp.makeConstraints{ (make) in
            make.edges.equalTo(view.safeAreaLayoutGuide)
        }

        descriptionField.snp.makeConstraints{ (make) in
            make.height.equalTo(100)
            make.width.equalTo(300)
        }

        titleField.snp.makeConstraints{ (make) in
            make.height.equalTo(100)
            make.width.equalTo(300)
        }

        headerStack.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.bottom.equalToSuperview()
            make.centerX.equalToSuperview()
        }

        headerView.snp.makeConstraints { make in
            make.width.equalTo(tableView)
        }

        headerImage.snp.makeConstraints{ (make) in
            make.width.equalTo(tableView).dividedBy(2)
            make.height.equalTo(headerImage.snp.width)
        }
    }
}