当动态标签足够小时,在滚动视图中垂直居中UIView,但是一旦它们没有,就将它对齐到顶部

Question

我有一个视图,里面有3个动态标签,我试图找到一种方法在滚动视图中垂直居中,但当它的动态标签太大而无法放在页面上时,请从顶部开始.Xcode目前正在做的是这样的:

我想要做的是这样的:

关于如何实现这一点的任何想法？谢谢.

Answer 1

您可以通过在堆栈视图中嵌入标签并在UIView中嵌入堆栈视图来实现此目的.标签文本将垂直展开堆栈视图,这将垂直展开内容视图,这将控制滚动视图.contentSize.

黑色是滚动视图; 蓝色是内容视图; 堆栈视图仅显示为薄灰色轮廓; 标签是黄色,绿色和青色.背景颜色只是让你更容易看到它是什么.

一堆步骤,但应该清楚:

• 添加scrollView,正常设置约束
• 添加UIView到scrollView - 将其命名为"contentView"
• 将0contentView的top/leading/trailing/bottom的约束设置为scrollView
• 设置contentView的宽度和高度等于scrollView的宽度和高度
• 将stackView添加到contentView
• 将stackView设置为 Vertical / Fill / Fill / Spacing: 20
• set stackView constraints top:8,bottom:8,leading:40,trailing:40 to contentView
• 将stackView centerY约束设置为contentView
• 向stackView添加三个标签
• 设置字体和文本,设置行数= 0表示中心和底部标签
• 将stackView的顶部和底部约束更改为 >= 8
• 将contentView高度约束更改为优先级:250
• 我认为这就是一切......

设置高度contentView的优先级为250将允许它根据标签中的文本垂直展开.

将顶部和底部stackView约束设置为> = 8将"推"内容视图的顶部和底部,但如果没有足够的文本超出垂直边界,则允许额外的空间.

结果:

这是一个故事板,其中包含一切可供参考:https://gist.github.com/DonMag/6469dbae5f70725d32d10c0a67f4c42d

Answer 2

为了补充 DonMag 的答案，您实际上可以仅使用UIScrollView和来完成完全相同的事情UIStackView。这适用于 iOS 11 及更高版本，因为它使用上的contentLayoutGuide和属性。frameLayoutGuideUIScrollView

当我提到滚动视图的内容视图时，它只是指滚动视图内的可滚动内容布局区域。它指的是内容布局指南，而不是堆栈视图。

步骤如下，用伪代码编写（只需添加等效约束）：

1. scrollView.contentLayoutGuide.height >= scrollView.frameLayoutGuide.height- 这将滚动视图内容设置为至少与滚动视图本身一样高。如果单独这样做，我们还无法将内容居中。
2. stackView.centerY == scrollView.contentLayoutGuide.centerY- 这将强制堆栈视图与滚动视图内容视图垂直居中。但是等等，如果堆栈视图太短怎么办？请记住，在步骤 1 中，我们强制内容大小至少与滚动视图本身一样高。这意味着，如果堆栈视图不够高而无法引起滚动，它实际上会在与滚动视图一样高的内容视图中居中，从而产生所需的效果。
3. stackView.top/bottom <= (inside) scrollView.contentLayoutGuide.top/bottom- 这只是设置堆栈视图的边缘，以便顶部和底部位于滚动视图的内容视图内。
4. （可选）stackView.top/bottom == (inside) scrollView.contentLayoutGuide.top/bottom优先defaultLow- 这会强制滚动视图的内容视图在视图调试器抱怨的情况下具有固有高度。

这对于垂直约束来说应该足够了。添加必要的水平约束，一切都应该顺利进行！