带有AutoLayout的UIScrollView底部的视图 [英] 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:

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

如何通过自动版式实现?

How can I achieve that with AutoLayout?

推荐答案

仅使用自动版式就非常容易...无需代码.

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

关键是使用内容视图"保存元素，并在底部"元素和页脚"视图之间使用greater-than-or-equal约束.

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-这将是我们的内容视图"
• 约束contentView顶部/底部/前导/尾随都等于0到scrollView
• 将contentView的宽度和高度限制为等于scrollView
• 添加您的元素-在这里我使用了3个标签
• 像往常一样约束标签...我使用了:
  • 标签A-在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点垂直空间.当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.

    结果:

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