【问题标题】:How can a stackview dynamically change the spacing between the elements nested inside of itstackview如何动态更改嵌套在其中的元素之间的间距
【发布时间】:2019-10-18 19:18:03
【问题描述】:

几个月来,我一直在努力研究堆栈视图以及它们是如何工作的。出于这个原因,我创建了一个项目,它有 4 个按钮嵌套在具有恒定宽度和高度的堆栈视图内。现在根据 iPhone 屏幕尺寸,我希望 stackview 内的按钮保持它们的宽度和大小,但它们之间的间距会变小或变大。如果我使用鼠标手动调整堆栈视图的大小,这将完美地完成。但是,当我添加应该具有相同效果的顶部和底部约束时,堆栈视图内的按钮会缩小或奇怪地拉伸,即使它们都具有恒定的高度且优先级设置为 1000。

您可以自己尝试一下,方法是创建一个堆栈视图,其中包含一些按钮,然后将它们的宽度和高度设置为常数。然后添加顶部和底部约束并在比您创建它的屏幕尺寸更小的屏幕上预览它。

在 iPhone XS 上预览,如果屏幕更小,按钮之间的间隙应动态更改为更大或更小:

在 iPhone 8 上预览:

它应该是什么样子:

谁能向我解释为什么会发生这种情况以及我如何才能达到我想要的结果?

【问题讨论】:

  • 你想达到什么目的?

标签: swift xcode autolayout uistackview


【解决方案1】:

您应该只向UIStackView 添加高度约束,而不是添加底部约束,查看以下示例

let buttons = [UIButton(), UIButton(), UIButton(), UIButton()]
for (index, button) in buttons.enumerated() {
    button.backgroundColor = .red
    button.setTitle("Category Button \(index)", for: .normal)
    button.setTitleColor(.black, for: .normal)
}
let stackView = UIStackView(arrangedSubviews: buttons)
stackView.axis = .vertical
stackView.distribution = .equalSpacing
stackView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackView)

let salGuide = self.view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalTo: salGuide.topAnchor, constant: 16.0),
    stackView.centerXAnchor.constraint(equalTo: salGuide.centerXAnchor, constant: 0),
    stackView.widthAnchor.constraint(equalTo: salGuide.widthAnchor, multiplier: 0.6),
    stackView.heightAnchor.constraint(equalTo: salGuide.heightAnchor, multiplier: 0.6)
])

请注意,multiplier: 0.6 将可用宽度和高度的 60% 提供给 UIStackView,要使用恒定宽度/高度,只需将参数名称从 multiplier 更改为 constant 并提供适当的参数值。

iPhone SE

iPhone Xs Max

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-20
    • 1970-01-01
    • 2011-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多