How do I arrange the stack view to show the profile image next to the username?

A lot of information missing to give a precise answer.

• Please explain what are and where are defined profileImageView, profileNameLabel, userHandel. In your picture are thet the icon, the name and @name ?
• Where do you define the size of the stackView that will contain them ?
• Finally, why don't you do it in storyboard with Interface Builder ? it would be much simpler.

Note: When you paste code, please use Paste and Match Style to avoid all extra blank lines that make code hard to follow. And use also Code formatter tool.

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)
    ])

I hope this helps-- The whole code for the table cell I am making:

import UIKit



class PostsTableViewCell: UITableViewCell {



    static let reuseIdentifier: String =  "PostsTableViewCell"

    

    private let profileImageView: UIImageView = {

        let imageView = UIImageView()

        imageView.translatesAutoresizingMaskIntoConstraints = false

        imageView.contentMode = .scaleAspectFill

       

        imageView.layer.masksToBounds = true

        imageView.layer.cornerRadius = 10

        imageView.clipsToBounds = true

        

        let config = UIImage.SymbolConfiguration(pointSize: 35)

        imageView.image = UIImage(systemName: "person.crop.circle.fill", withConfiguration: config)

        

        //imageView.backgroundColor = .white

        return imageView

    }()

    

    private let profileNameLabel: UILabel = {

        let label = UILabel()

        

        label.text =  "Testing User"

        label.font = .systemFont(ofSize: 16, weight: .bold)

        label.translatesAutoresizingMaskIntoConstraints = false

        return label

    }()

    

    

    private let userHandel: UILabel = {

        let label =  UILabel()

        label.text =  "@Test"

        label.font = .systemFont(ofSize: 12, weight: .light)

        label.textColor = .systemBlue

        label.translatesAutoresizingMaskIntoConstraints =  false

        

        return label

    }()

    

    

    private let postTextLabel: UILabel = {

        let label = UILabel()

        label.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

        label.numberOfLines = 0

        label.font = .systemFont(ofSize: 14, weight: .regular)

        return label

        

    }()

    

    

    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)

            

            

         

        

        ])

        

        

    }

    



    

    required init(coder: NSCoder) {

        fatalError("Post failed to load")

    }

}

I tried to the paste and match thing But I Don't how that works. I just used the code block after pasting it.

Best, Imran

WIth a size of 35, you get a small image. You should at least use 72.

With size 35, the person image is small:

With a size of 72 and if you define image size accordingly, you get something like:

So, you have to add constraints for ImageView width and height (.constant = 100 for instance)

In addition, you would have 2 stackViews:

• a vertical stackView, with name and @name
• a horizontal stackView, with Image and the vertical stack
• plus the text of the message below in the cell.