我们可以访问 UIStackView 的子视图大小吗？

Question

My question is pretty simple but I haven't found any answer yet.

I am making a sort of table using two vertical stacks inside a horizontal stack. Both vStacks have different objects (Button in my case, with border for each one) but in the same quantity (so that they are horizontally paired like in a classic table). I have set both of my vStack's distribution to .fillProportionally , and therefore each button have different size depending on their titleLabel length.

However, I would like to make each of my button have the same size of its paired button (the one next to him horizontally, in the other vStack) so that my cells borders would be aligned (using the biggest button's size as a reference in each pair).

I think it involves to find a way to access one stack's subview's size and then constraint the other stack subview to be equally sized. Or, because usually there is only one big button messing with the distribution and offsetting button pairs' border, accessing the way one stack displays its subviews and forcing the other stack to adopt the same way. Either way, I don't know how to do it yet.

I'd be glad if you could help me or lead me to the answer !

(I don't think I need to put code to explain my problem as it's a relatively abstract issue but if you need it I can share it)

EDIT :

Left : What I want, right : What I get

Each cell is a button (useless here but in my app it will have a functionality) with border , I want to set "description" button's height equal as "text" button. I hope it's clearer now :) I tried to invert the layout (two horizontal stacks in one vertical stack) but the issue is still here, with width instead of height this time.

EDIT 2 :

Following your advice, here is some code :

import UIKit


class ViewController: UIViewController {

@IBOutlet weak var bottomButton: UIButton!


@IBOutlet weak var vstack: UIStackView!

@objc func buttonAction(sender: UIButton) {
    sender.isEnabled = true
    print(sender.frame)
}

override func viewDidLoad() {
    super.viewDidLoad()
    
    
    let button = newButton(text: "name")
    let button2 = newButton(text: "John Smith")
    let button3 = newButton(text: "Description")
    let button4 = newButton(text: "text text text text text text text text text text text \n text text text text text \n text text text text text")
    
    let hStack = UIStackView()
    hStack.axis = .horizontal
    hStack.distribution = .fillEqually
    
    let hStack2 = UIStackView()
    hStack2.axis = .horizontal
    hStack2.distribution = .fillEqually
    
    hStack.addArrangedSubview(button)
    hStack.addArrangedSubview(button2)

    hStack2.addArrangedSubview(button3)
    hStack2.addArrangedSubview(button4)

    vstack.addArrangedSubview(hStack)
    vstack.addArrangedSubview(hStack2)
    
}
}

 
func newButton(text: String) -> UIButton {

    let button = UIButton(type: .system)
    button.isEnabled = true
    button.setTitle(text, for: .disabled)
    button.setTitle(text, for: .normal)
    button.setTitleColor(.black, for: .disabled)
    button.layer.borderWidth = 1
    button.titleLabel?.numberOfLines = 0
    button.titleLabel?.textAlignment = NSTextAlignment.center

    return button
}

`

Using horizontal stacks in a vertical stack and Fill Equally partially solves the problem, because it only works when my text is under a certain length, otherwise it clips (see following image), which is why I was using fillProportionally.

Answer 1

OK - part of the problem is that you are modifying the titleLabel properties -- specifically, setting its .numberOfLines = 0 . Auto-layout does not take that into account, without a little help.

You'll want to use a button subclass, such as this:

class MultiLineButton: UIButton {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    func commonInit() -> Void {
        titleLabel?.numberOfLines = 0
        titleLabel?.textAlignment = .center
        // if you want to give your buttons some "padding" around the title
        //contentEdgeInsets = UIEdgeInsets(top: 8.0, left: 8.0, bottom: 8.0, right: 8.0)
    }

    override var intrinsicContentSize: CGSize {
        guard let tl = titleLabel else {
            return .zero
        }
        let size = tl.intrinsicContentSize
        return CGSize(width: size.width + contentEdgeInsets.left + contentEdgeInsets.right, height: size.height + contentEdgeInsets.top + contentEdgeInsets.bottom)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        guard let tl = titleLabel else { return }
        tl.preferredMaxLayoutWidth = tl.frame.size.width
    }

}

Using that class, here is an example view controller where we add a vertical stack view, and 2 horizontal "row" stack views:

class PruViewController: UIViewController {

    func newButton(text: String) -> MultiLineButton {
        let b = MultiLineButton()
        b.titleLabel?.font = .systemFont(ofSize: 15.0)
        b.setTitle(text, for: [])
        b.setTitleColor(.blue, for: .normal)
        b.setTitleColor(.lightGray, for: .highlighted)
        b.setTitleColor(.black, for: .disabled)
        b.layer.borderWidth = 1
        b.layer.borderColor = UIColor.black.cgColor
        return b
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button = newButton(text: "name")
        let button2 = newButton(text: "John Smith")
        let button3 = newButton(text: "Description")
        let button4 = newButton(text: "text text text text text text text text text text text \n text text text text text \n text text text text text")
        
        let vStack = UIStackView()
        vStack.axis = .vertical
        vStack.distribution = .fill
        
        let hStack = UIStackView()
        hStack.axis = .horizontal
        hStack.distribution = .fillEqually
        
        let hStack2 = UIStackView()
        hStack2.axis = .horizontal
        hStack2.distribution = .fillEqually
        
        hStack.addArrangedSubview(button)
        hStack.addArrangedSubview(button2)
        
        hStack2.addArrangedSubview(button3)
        hStack2.addArrangedSubview(button4)
        
        vStack.addArrangedSubview(hStack)
        vStack.addArrangedSubview(hStack2)
        
        vStack.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(vStack)
        
        // respect safe area
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            vStack.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            vStack.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            vStack.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
        ])
        
    }
}

The result:

And, you'll notice in my MultiLineButton class a comment about adding "padding" around the button title labels... here's how it looks with that line un-commented: