How do I arrange the Profile Image View to pin next to the Username at the top in the arranged Stack View?

Question

So I have a stack view and the profile image needs to go next to the the username and stay there. How do I do that in this arranged stack view without conflicts because I have tried to anchor it to the top. Like this but no results:

Image of what I am trying to achieve

But currently it keeps doing this: What is currently happening

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

    contentView.addSubview(profileImageView)
    contentView.addSubview(profileNameLabel)
    contentView.addSubview(userHandel)

    profileImageView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
    let innerPostStackView = UIStackView(arrangedSubviews: [profileNameLabel, userHandel, postTextLabel])
    innerPostStackView.axis = .vertical

    let postStackView = UIStackView(arrangedSubviews: [profileImageView, innerPostStackView])
    postStackView.translatesAutoresizingMaskIntoConstraints =  false
    postStackView.alignment =  .center
    postStackView.spacing = 10
    contentView.addSubview(postStackView)

    NSLayoutConstraint.activate([
        
        postStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
        postStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -15),
        postStackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
        postTextLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -15)
    ])

This is what I Have tried with the stack views. I cannot get it to work the way I want it to look.

Answer 1

This how your cell looks like:

class MyCell: UITableViewCell {

let profileNameLabel: UILabel = {
    let label = UILabel()
    label.numberOfLines = 0
    label.textColor = .black
    label.backgroundColor = .clear
    label.font = .systemFont(ofSize: 20, weight: .bold)
    label.text = "Minions"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let userHandel: UILabel = {
    let label = UILabel()
    label.numberOfLines = 0
    label.textColor = .systemBlue
    label.backgroundColor = .clear
    label.font = .systemFont(ofSize: 14, weight: .semibold)
    label.text = "@Minions"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let postTextLabel: UILabel = {
    let label = UILabel()
    label.numberOfLines = 0
    label.textColor = .black
    label.backgroundColor = .clear
    label.text = "Every Mac comes with a one-year limited warranty(opens in a new window) and up to 90 days of complimentary technical support(opens in a new window). AppleCare+ for Mac extends your coverage from your AppleCare+ purchase date and adds unlimited incidents of accidental damage protection, each subject to a service fee of $99 for screen damage or external enclosure damage, or $299 for other accidental damage, plus applicable tax. In addition, you’ll get 24/7 priority access to Apple experts via chat or phone. For complete details, see the terms(opens in a new window)."
    return label
}()

let costant: CGFloat = 60

let profileImageView: UIImageView = {
    let iv = UIImageView()
    iv.backgroundColor = .darkGray.withAlphaComponent(0.2)
    iv.contentMode = .scaleAspectFill
    iv.clipsToBounds = true
    iv.translatesAutoresizingMaskIntoConstraints = false
    return iv
}()

let containerView: UIView = {
    let v = UIView()
    v.backgroundColor = .clear
    return v
}()

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    backgroundColor = .white
    let image = UIImage(named: "minions")?.withRenderingMode(.alwaysOriginal)
    profileImageView.image = image
    profileImageView.widthAnchor.constraint(equalToConstant: costant).isActive = true // set here profileImageView wudth
    profileImageView.layer.cornerRadius = costant / 2
    
    contentView.backgroundColor = .white
    
    containerView.addSubview(profileNameLabel)
    profileNameLabel.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
    profileNameLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
    profileNameLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
    profileNameLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
    
    containerView.addSubview(userHandel)
    userHandel.topAnchor.constraint(equalTo: profileNameLabel.bottomAnchor).isActive = true
    userHandel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
    userHandel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
    userHandel.heightAnchor.constraint(equalToConstant: 20).isActive = true
    
    let totalUpStack = UIStackView(arrangedSubviews: [profileImageView, containerView])
    totalUpStack.axis = .horizontal
    totalUpStack.spacing = 6
    totalUpStack.distribution = .fill
    totalUpStack.translatesAutoresizingMaskIntoConstraints = false
    totalUpStack.heightAnchor.constraint(equalToConstant: costant).isActive = true
    
    let completeStack = UIStackView(arrangedSubviews: [totalUpStack, postTextLabel])
    completeStack.axis = .vertical
    completeStack.spacing = 6
    completeStack.distribution = .fill
    completeStack.translatesAutoresizingMaskIntoConstraints = false
    
    contentView.addSubview(completeStack)
    completeStack.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
    completeStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10).isActive = true
    completeStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
    completeStack.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10).isActive = true
}

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

This is the result: