skip to Main Content

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.

2

Answers


  1. I’m not sure if it will help you. You can ignore UIStackView and use auto-layout like this:

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        contentView.addSubview(profileImageView)
        contentView.addSubview(profileNameLabel)
        contentView.addSubview(userHandel)
        contentView.addSubview(postTextLabel)
        
        // activate autolayout constraints:
        NSLayoutConstraint.activate([
            // profileImageView:
            profileImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
            profileImageView.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 16),
            profileImageView.heightAnchor.constraint(equalToConstant: 52),
            profileImageView.widthAnchor.constraint(equalToConstant: 52),
            
            // profileNameLabel:
            profileNameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
            profileNameLabel.leftAnchor.constraint(equalTo: profileImageView.rightAnchor, constant: 8),
            profileNameLabel.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -16),
            
            // userHandel:
            userHandel.topAnchor.constraint(equalTo: profileNameLabel.bottomAnchor, constant: 8),
            userHandel.leftAnchor.constraint(equalTo: profileNameLabel.leftAnchor),
            userHandel.rightAnchor.constraint(equalTo: profileNameLabel.rightAnchor),
            
            // postTextLabel:
            postTextLabel.topAnchor.constraint(equalTo: userHandel.bottomAnchor, constant: 8),
            postTextLabel.leftAnchor.constraint(equalTo: userHandel.leftAnchor),
            postTextLabel.rightAnchor.constraint(equalTo: userHandel.rightAnchor),
            postTextLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
        ])
    }
    
    Login or Signup to reply.
  2. 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:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search