在 UIScrollView 的底部查看，带有 AutoLayout [英] View at the bottom in a UIScrollView, with AutoLayout

问题描述

我正在使用自动布局在滚动视图中设置内容.滚动视图中的对象从上到下固定在前一个对象上，因此它们在彼此之下.我在这些对象下方添加了一个页脚视图.

I'm setting up content in a scroll view with autolayout. The objects in the scrollview are pinned top-to-bottom to the previous one, so that they are under one another. I have a footer view that is added at the end, below these objects.

这里有个问题:当内容很少时，contentView 会小于屏幕高度，所以页脚视图会出现在屏幕中间的某个位置(这是正常行为).但我想阻止这种情况，并使视图停留在底部的某个地方.

Here's the catch: when there's few content, the contentView will be smaller than the screen height, so the footer view will appear somewhere in the middle of the screen (which is the normal behavior). But I'd like to prevent that, and make the view stay somewhere at the bottom.

换句话说，我想设置一个双重约束，例如:

In other words, I would like to setup a double constraint like:

Put this view below all the objects in the scrollview 
AND
keep this view at a distance of max [some number] of the bottom of the screen

以始终满足两个约束的方式:

In a way that both constraints are always satisfied:

• 如果内容的高度大于屏幕，则视图显示在底部，向下滚动后
• 如果高度较小，则视图被固定"到屏幕底部，在内容底部和视图顶部之间留出相对较大的空间

如何使用 AutoLayout 实现这一点?

How can I achieve that with AutoLayout?

推荐答案

仅使用 Auto-Layout 相当容易...无需代码.

Fairly easy to do with Auto-Layout only... no code required.

关键是使用内容视图"来保存元素，并在底部"元素和页脚"视图之间使用 大于或等于 约束.

The key is to use a "content view" to hold the elements, and a greater-than-or-equal constraint between your "bottom" element and your "footer" view.

在这张图片中，黄色是主视图，绿色是滚动视图，蓝色是内容视图，标签是灰色的，页脚视图是粉红色的.

In this image, yellow is the main view, green is the scroll view, blue is the content view, the labels are gray and the footer view is pink.

• 从一个全新的视图控制器开始
• 添加一个滚动视图，普通约束(我一直使用20，所以我们可以看到框架)
• 将 UIView 添加到 scrollView - 这将是我们的内容视图"
• 将 contentView Top/Bottom/Leading/Trailing 全部等于 0 约束到 scrollView
• 将 contentView 的 Width 和 Height 都限制为 scrollView 的值
• 添加您的元素 - 我在这里使用了 3 个标签
• 像往常一样约束标签...我用过:
  • LabelA - 20 的顶部/前导/尾随，与 60
  的 LabelB 的垂直间距
  • LabelB - 20 处的前导/尾随，与 60
  的 LabelC 的垂直间距
  • LabelC - 20
  的前导/尾随
  • Start with a fresh view controller
  • add a scroll view, normal constraints (I used 20 all the way around, so we can see the frame)
  • add a UIView to the scrollView - this will be our "content view"
  • constrain contentView Top/Bottom/Leading/Trailing all equal to 0 to the scrollView
  • constrain both the Width and Height of the contentView equal to the scrollView
  • add your elements - here I used 3 labels
  • constrain the labels as usual... I used:
    • LabelA - Top/Leading/Trailing all at 20, vertical spacing to LabelB of 60
    • LabelB - Leading/Trailing at 20, vertical spacing to LabelC of 60
    • LabelC - Leading/Trailing at 20

    现在，当您扩展/收缩 LabelC 的高度时，footerView 将保持至少 40-pts 的垂直空间.当 LabelC 大到足以将 footerView 推到底部下方时，scrollView 将变为可滚动的.

    Now, as you expand/contract the height of LabelC, the footerView will keep at least 40-pts of vertical space. When LabelC gets big enough to "push" footerView below the bottom, scrollView will become scrollable.

    结果:

    这篇关于在 UIScrollView 的底部查看，带有 AutoLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！