如何在Xcode5中使用AutoLayout制作ScrollView

在Xcode 5使用故事板如何使一个完全可操作的垂直滚动滚动视图,AutoLayout ON?
考虑到子视图有层次结构:

1.UIView 2.UIScrollView 3.UIView (lets call this UIDetailView to make things easier) 

请从代码到约束的具体情况,以使任何视图变小。

这篇博客文章详细介绍了如何使用带有Autolayout ON的UIScrollView,使用纯自动布局方法。 请注意,博客文章中的所有约束都是通过Storyboard定义的。

文章中的方法假设了以下层次结构:

 1. View (main view of my UIViewController) 2. Scroll View (UIScrollView) 3. Container View (UIView) 4. Content View (eg UIImageView) 

我猜容器视图将是你的UIDetailView,而内容视图将是UIDetailView中的任何UIView。

https://happyteamlabs.com/blog/ios-how-to-use-uiscrollview-with-auto-layout-pure-auto-layout/

故事板中带有Autolay的UIScrollView正常工作

我见过很多人推荐“容器视图”的方法,AKA的蛮力,以解决他们不明白的问题。 这是非最优的,因为你现在已经失去了滚动视图的一个很大的优势,让它认为内容是整个滚动视图,而不是立即附加到滚动视图的子视图。

下面是我在下面的例子中做的

 --UIScrollView |-> UITextView |-> UILabel |-> UIOtherStuff 

UIScrollView放置到Storyboard中的UIView中时,只需将UIScrollView四边固定到UIView 。 现在将您的内容添加到UIScrollView ,确保您为每个维度提供了至less两个约束。 关于Autolayout的好处在于它能够计算出scrollview的contentSize或者UILabels需要基于内容的大小。 AKA intrinsicContentSize。 所以,如果给你一个警告“scrollView的模糊内容大小”,你知道你没有给出足够的限制。 例如,您可能在视图之间给出了顶部,底部,左侧,右侧的间隔距离,但是您约束的子视图也需要一个高度,因为像这个UIScrollView这样的无限垂直平面可以假设您的视图从零到无限高。

换句话说,Autolayout by Example的苹果指南为成功做了一个简单的3点计划:

  1. 创build滚动视图。
  2. 将UI元素放在里面。
  3. 创build完全定义滚动视图内容的宽度和高度的约束。

“Min melding til”的顶级TextView也随着你input更多的线条而增长,并且整个ScrollView增长以包含它。 虽然我重写UITextView类来返回修改高度约束,滚动视图本身无需编码正常工作。

最后一件事,很多与Autolayout相关的post尝试魔法修复 – 所有的咒语translatesAutoresizingMaskIntoConstraints = NO自动化MaskIntoConstraints translatesAutoresizingMaskIntoConstraints = NO 。 这只在视图是以编程方式创build的情况下才是必需的。

带有Autolay的UIScrollView示例

该文档清楚地说明了如何做到这一点:自动布局中的UIScrollView将始终调整自己以适应内容(UIDetailView)。

所以你必须像这样设置你的观点:

  • UIView:有约束的位置。
  • UIScrollView:约束绑定到UIView。
  • UIDetailView:设置大小(内在的内容大小),最大的抗压缩,设置顶部,底部,领先和尾部约束到UIScrollView手动0。

我有一个类似的问题,我发现相对简单的解决scheme类似于使用纯粹的Autolay的Interface Builder中的DJ S的没有任何代码。

如果要查看这个工作,首先要删除View Controller中的任何约束。

这是样本布局:

  • 查看(我的UIViewController的主视图)

    • 滚动视图(UIScrollView)

      • 容器视图(UIView)

        • 内容视图(例如UIImageView)

A.滚动视图的宽度/高度应该小于容器视图的宽度/高度

B.容器视图应该有一些确定的宽度/高度(可以是明确的宽度/高度)

C.做控制 – 拖放容器视图到滚动视图,只添加:

  1. 领先的空间到集装箱
  2. 尾随空间到容器

D.检查这两个约束条件,并将“恒定”值设为0

E.运行应用程序和

由于新的iPhone 6和6+屏幕尺寸,我不得不对DJ S的解决scheme做一些调整。

目标

UITextView放置在UIScrollView ,并且从左/右屏幕边缘还有15点的空间。

查看

 1. Main View (main view of my UIViewController) 2. Scroll View (UIScrollView) 3. Container View (UIView) 4. Text View (UITextView) 

对于空间,我从UIScrollView – > Main View添加了15个水平的拖尾/前导空格。 为了使UITextView的宽度相对于屏幕宽度,我从UITextView – > Main View添加了一个Equal Widths约束,并将其值设置为-30 (2 * 15pt水平空间)。 现在, UITextView的宽度将dynamic调整任何屏幕大小。

UIScrollView应该有Scrolling EnabledUITextView不应该。