以编程方式更改UIStackView中1个子视图的大小

Question

我目前正在制作一个计算器，并希望将我的0按钮的大小更改为2个子视图的大小 - 这是整个视图的一半大小。我希望它看起来像苹果计算器应用程序，其中0比所有其他按钮更大。 我布置视图的方式是使用垂直UIStackView并添加水平UIStackView，就像下面的图片一样。

因此，我希望最后一个水平堆栈有3个排列的子视图但是使0按钮填充超出的空间，因此,和=按钮与所有其他按钮的大小相同。

谢谢。

Answer 1

以编程方式，您可以使用constraint(equalTo:multiplier:)，官方文档：https://developer.apple.com/documentation/uikit/nslayoutdimension/1500951-constraint设置乘数

因此，我们可以约束具有相同宽度的最后两个按钮，并使第一个按钮比其他两个按钮长两倍。

    override func viewDidLoad() {
        super.viewDidLoad()


        view.backgroundColor = .white

        let btn1 = UIButton()
        let btn2 = UIButton()
        let btn3 = UIButton()

        btn1.backgroundColor = .red
        btn2.backgroundColor = .yellow
        btn3.backgroundColor = .blue

        let hStack = UIStackView(arrangedSubviews: [btn1, btn2, btn3])
        hStack.axis = .horizontal
        hStack.spacing = 1

        view.addSubview(hStack)
        hStack.translatesAutoresizingMaskIntoConstraints = false
        hStack.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        hStack.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        hStack.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

        // Here would be what you need:
        btn2.widthAnchor.constraint(equalTo: btn3.widthAnchor).isActive = true
        btn1.widthAnchor.constraint(equalTo: btn2.widthAnchor, multiplier: 2).isActive = true
    }

Answer 2

您可以对前4个水平堆栈视图使用stackview.distribution = .fillEquallly，并对最后一个水平堆栈视图使用stackview.distribution = .fillPropotionally。

然后使用0按钮的约束设置为最后水平stackview宽度的50％。