ios - 堆栈 View - 但有 "proportional"间隙

Question

想象一下有四个项目的堆栈 View ，填充了一些东西。 (比如说，填满屏幕)。

请注意，有三个间隙，ABC。

(注意——每个黄色 block 的高度都是固定的。)

(只有间隙会发生变化，具体取决于堆栈 View 可用的整体高度。)

假设 UISV 能够绘制所有内容，比如还剩下 300 个。这三个差距将各为 100。

在例子中，还剩下9，所以A B 和C 各为3。

但是。

很多时候，您希望差距本身享有比例关系。

因此 - 你的设计师可能会说类似的话

If the screen is too tall, expand the spaces at A, B and C. However. Always expand B let's say 4x as fast as the gaps at A and B."

所以，如果剩下“12”，那就是 2,8,2。而当剩下 18 时，那就是 3,12,3。

这个概念在堆栈 View 中可用吗？否则，你会怎么做？

(请注意，最近添加到堆栈 View 中，您确实可以单独指定间隙。因此，可以“手动”执行此操作，但这将是一团糟，您将与求解器 a很多。)

Answer 1

您可以通过以下解决方法来实现。代替间距，为每个空间添加一个新的 UIView() ，这将是一个可拉伸(stretch)的空间。然后只需在这些“空间”的高度之间添加约束，这些约束将根据您想要的乘数将它们的高度约束在一起，例如:

space1.heightAnchor.constraint(equalTo: space2.heightAnchor, multiplier: 2).isActive = true

为了让它工作，我认为您必须添加一个约束，以在有可用空间的情况下尝试拉伸(stretch)这些空间:

let stretchingConstraint = space1.heightAnchor.constraint(equalToConstant: 1000)
// lowest priority to make sure it wont override any of the rest of constraints and compression resistances
stretchingConstraint.priority = UILayoutPriority(rawValue: 1)
stretchingConstraint.isActive = true

“正常”的内容 View 必须具有固有的大小或明确的限制来设置它们的高度才能正常工作。

这是一个例子:

class MyViewController: UIViewController {

    fileprivate let stack = UIStackView()

    fileprivate let views = [UIView(), UIView(), UIView(), UIView()]
    fileprivate let spaces = [UIView(), UIView(), UIView()]

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = .white

        self.view.addSubview(stack)

        // let stack fill the whole view
        stack.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            stack.topAnchor.constraint(equalTo: self.view.topAnchor),
            stack.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            stack.leftAnchor.constraint(equalTo: self.view.leftAnchor),
            stack.rightAnchor.constraint(equalTo: self.view.rightAnchor),
            ])

        stack.alignment = .fill
        // distribution must be .fill
        stack.distribution = .fill
        stack.spacing = 0
        stack.axis = .vertical

        for (index, view) in views.enumerated() {
            stack.addArrangedSubview(view)
            view.translatesAutoresizingMaskIntoConstraints = false
            // give it explicit height (or use intrinsic height)
            view.heightAnchor.constraint(equalToConstant: 50).isActive = true

            view.backgroundColor = .orange

            // intertwin it with spaces
            if index < spaces.count {
                stack.addArrangedSubview(spaces[index])
                spaces[index].translatesAutoresizingMaskIntoConstraints = false
            }
        }
        // constraints for 1 4 1 proportions
        NSLayoutConstraint.activate([
            spaces[1].heightAnchor.constraint(equalTo: spaces[0].heightAnchor, multiplier: 4),
            spaces[2].heightAnchor.constraint(equalTo: spaces[0].heightAnchor, multiplier: 1),
            ])

        let stretchConstraint = spaces[0].heightAnchor.constraint(equalToConstant: 1000)
        stretchConstraint.priority = UILayoutPriority(rawValue: 1)
        stretchConstraint.isActive = true
    }
}