如何添加前导填充添加到视图内的 UIStackView

这是我的设置: 我有一个领先，顶部，试验边设置为0的 UIScrollView。在这里，我添加了一个带有以下约束的 UIStackView:

stackView.centerYAnchor.constraintEqualToAnchor(selectedContactsScrollView.centerYAnchor).active = true
stackView.leadingAnchor.constraintEqualToAnchor(selectedContactsScrollView.leadingAnchor).active = true

在堆栈视图中，我添加了一些视图。
我的问题是，由于这些约束，添加到堆栈视图中的第一个视图也将具有前沿 = 0。

有哪些方法可以为第一个视图添加一些填充？不调整滚动视图约束。

126691 次浏览
小开

看起来解决方法很简单:

stackView.leadingAnchor.constraintEqualToAnchor(selectedContactsScrollView.leadingAnchor).active = true

我只是写道:

stackView.leadingAnchor.constraintEqualToAnchor(selectedContactsScrollView.leadingAnchor, constant: 15).active = true
小开
最佳答案

您提供的解决方案并没有为您的 UIStackView 中的视图添加一个填充(正如您在问题中所希望的那样) ，但是它为 UIStackView 添加了一个引导。

一个解决方案可以是在原来的 UIStackView 中添加另一个 UIStackView，并为这个新的 UIStackView 提供引导。然后，将视图添加到这个新的 UIStackView。

提示，你完全可以使用 Interface Builder 来完成，换句话说，不需要为它编写代码。

小开

当 isLayoutMarginsRelativeArrangement属性为 true 时，堆栈视图将相对于其布局边距布局其已排列的视图。

stackView.layoutMargins = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
stackView.isLayoutMarginsRelativeArrangement = true

但它会影响堆栈视图内部的所有已排列视图。如果只希望为一个排列好的视图使用此填充，则需要使用嵌套的 UIStackView

小开

我的工作是添加到堆栈视图另一个 UIView，它只是一个间隔(至少对 stackView.distribution = 有效。填写) :

let spacerView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 10))
stackView.addArrangedSubview(spacerView)
stackView.addArrangedSubview(viewThatNeedsSpaceBeforeIt)
stackView.addArrangedSubview(NextView)...
小开

我发现约束在堆栈视图中不起作用，或者它们看起来有点奇怪。

(例如，如果我在图像堆叠视图上添加前导/后导约束，这也会导致 Collectionview，但不会添加后导; 而且肯定会发生冲突)。

stackview inside stackview

若要为堆栈视图中的所有视图设置布局边距，请选择:

Stack View > Size Inspector > Layout Margins > Fixed

注意: "Fixed"选项以前称为 "Explicit"，如屏幕截图所示。

然后加上你的填充物:

storyboard

小开

如果您只需要前导填充，那么您可以将堆栈视图的对齐设置为“拖尾”，然后您就可以在其所包含的每个子视图上指定唯一的前导约束。

另外，您还可以将堆栈视图的对齐方式设置为“居中”，然后可以使用“引导”和/或“拖尾”约束为每个项目的两边赋予各自的填充。

小开

迅速3: 你只需要设置偏移量:

firstView.leadingAnchor.constraint(equalTo: parentView.leadingAnchor, constant: 200).isActive = true

请确保在 parentView.addArrangdSubView(firstView)之后设置此约束

小开

我们所做的是添加透明组件(例如，UIButton/UIView)作为 UIStackView 的第一个和最后一个子元素。然后设置限制这些 Invisible Children Inc 的宽度来调整填充。

小开

这个问题已经有了很好的答案, 但有一个建议是，使用 spacing属性来设置视图之间的间距。对于第一个和最后一个视图，可以有两个选项，要么按照@tolpp 的建议设置插入，要么添加附加到父视图(stackview)的约束，并使用常量来添加填充。

小开

解决方案是在堆栈视图中有一个常规视图，以保存您想要添加约束的任何视图，然后您可以为相对于堆栈视图中的视图的项添加约束。这样，您的原始视图可以在堆栈视图中具有前导和尾随约束。

这可以通过 Interface Builder 和程序来完成。

小开

只需在堆栈视图的开头添加一个空视图(也限制其宽度和/或高度) :

stackView.insertArrangedSubview(UIView().constrain(width: 0, height: 0), at: 0)

及/或在结束时:

stackView.addArrangedSubview(UIView().constrain(width: 0, height: 0))

我创建了这个简单的 UIView 扩展来添加约束:

extension UIView {
func constrain(width: CGFloat, height: CGFloat) -> Self {
NSLayoutConstraint.activate([
widthAnchor.constraint(equalToConstant: width),
heightAnchor.constraint(equalToConstant: height)
])


return self
}
}
小开

将你的堆栈视图对齐设置为“居中”。之后你可以给每个子视图不同的前导和尾随。


提交答案