UIStackView: add arranged views with the same width

Question

I have UIStackView and want add to this view some arranged views... sometimes one, sometimes two, three... etc. UIStackView has full width. I want arranged views to have the same width with alignment left, so that they do not fill full width of UIStackView.

This is what I have:

This is what I want:

Is it possible to do it somehow or do I need to change width of UIStackVIew depending on how many arranged I added?

My code:

        // creating views
    stackView = {
        let v = UIStackView()
        v.axis = .horizontal
        v.alignment = .center
        v.distribution = .fillEqually
        v.spacing = 5
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()
 if let img = chosenImage {
            let imageView: UIImageView = {
                let l = UIImageView()
                l.translatesAutoresizingMaskIntoConstraints = false
                l.image = img
                return l
            }()
            self.stackView?.addArrangedSubview(imageView)
            imageView.addConstraint(NSLayoutConstraint(item: imageView, attribute: .width, relatedBy: .equal, toItem: imageView, attribute: .height, multiplier: 1, constant: 1))
            imageView.setNeedsUpdateConstraints()
        } else {
            print("Something went wrong")
        }

Fattal

How do you specify what width the views should be? Is it a fixed value? – Laminitis

@UpholderOfTruth I've added the code sample to my question. – Fattal

That's not going to work. You have set the stack view so that it's arranged views fill it equally with a 5pt spacing. Then for the image you have set the height equal to the width + 1pt. So the width will be determined by dividing up the width of the stack view and then the height adjusted accordingly. I think the best approach has already been added with the extra clear view and content hugging and resistance. – Laminitis

Answer 1

You can add an empty clear view to your StackView at the end and set the hugging and resistance priority for this View. It should resize to available space so hugging priority of "fill view" has to be higher and resistance for "fill view" should be low, on your real items set resistance to higher values

Alboran

how to set the hugging and resistance priority? could you please explain? – Fattal

I've added photo to my answer – Draftee

Answer 2

on storyboard, Select stackview, Attributes inspector -> Stackview -> Distribution, select Fill Equally.

Emotionality