如何以 UIImageView 作为其子级来制作水平 UIStackView 换行高度内容？

Question

I have the following horizontal UIStackView

1. Yellow background
2. Leading, top and trailing same as safe area
3. Alignment = Top
4. Distribution = Fill Proportionally

---

UILabel as children

If I add UILabel as its children, it will automatically wrap height content as below

---

UIImage as children

I replace UILabel with 3 identical UIImageView .

Every UIImageView has the following properties

1. Content mode = Aspect Fit

It looks as following

I was wondering, how can I make the horizontal UIStackView wrap to its height content?

I expect the UIStackView 's will wrap the UIImageView 's content height. As an outcome, we will not observe any yellow background of UIStackView .

May I know, how can I achieve so?

So far, I have tried to play around with

1. Content hugging priority of both UIStackView and UIImageView
2. Content compression resistance priority for both UIStackView and UIImageView

Still not able to achieve my desired outcome.

---

The following is the original image source, which is 606x404

Answer 1

You cannot get this result with only Storyboard setup -- you will need some code.

Based on your image showing your desired output, you want each "row" to:

• have 3 images
• show them at original aspect-ratio
• small spacing between images (such as 4-pts)
• fit so the widths and heights maintain the ratios

First comment - forget Distribution = Fill Proportionally on the stack views.

For this layout, the stack view should be:

• Axis: Horizontal
• Alignment: Fill
• Distribution: Fill
• Spacing: 4

So, what we need to do is constrain each imageView's aspect ratio based on its image's aspect ratio (height / width).

Here is a full example... it uses these 6 images:

We'll also embed the horizontal stack view(s) in a vertical stack view, using the same settings (expect Axis: Vertical ).

class AdjustStackViewController: UIViewController {
    
    var vStack = UIStackView()
    
    var picNames: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // six images, named "p1" - "p6"
        for i in 1...6 {
            picNames.append("p\(i)")
        }
        
        // vertical stack view
        vStack.axis = .vertical
        vStack.spacing = 4
        
        // use auto-layout
        vStack.translatesAutoresizingMaskIntoConstraints = false
        
        // add it to the view
        view.addSubview(vStack)
        
        // respect safe-area
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            // constrain vStack
            //  Top + 20
            //  Leading and Trailing 0
            vStack.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            vStack.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            vStack.trailingAnchor.constraint(equalTo: g.trailingAnchor),
        ])
        
        fillStacks()
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        // re-fill images in new (shuffled) order
        fillStacks()
    }
    
    func fillStacks() -> Void {
        
        // remove existing horizontal stack views (if needed)
        vStack.arrangedSubviews.forEach { v in
            v.removeFromSuperview()
        }
        
        let shuffledImages = picNames.shuffled()

        // two horizontal stack views each with 3 images
        var picNum: Int = 0
        for _ in 1...2 {
            let hStack = UIStackView()
            hStack.spacing = 4
            vStack.addArrangedSubview(hStack)
            for _ in 1...3 {
                // make sure we can load the images
                guard let img = UIImage(named: shuffledImages[picNum]) else {
                    fatalError("Could not load images!")
                }
                // create Image View
                let imgView = UIImageView()
                // set the image
                imgView.image = img
                // proportional constraint based on image dimensions
                imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width).isActive = true
                // add to hStack
                hStack.addArrangedSubview(imgView)
                // increment pic number
                picNum += 1
            }
        }

    }
    
}

Here's how it looks:

When you run this, each time you tap the view it will shuffle the order of the images, so you can see how the layout adapts.