如何在 AutoLayout 中使用 UIScrollView (多个ContentView)

分类： iPhone开发2014-10-09 13:21 816人阅读 评论(1) 收藏 举报

http://codehappily.wordpress.com/2013/11/14/ios-how-to-use-uiscrollview-with-autolayout-pure-autolayout-approach-multiple-smaller-views/

本帖演示如何在AutoLayout 下使用 UIScrollView 。在ScrollView  中还会包含多个子视图。在本例中，我用 3 个不同背景色的view 作为 ScrollView 的 ContentView。

代码下载: https://github.com/djsison/iOS-ScrollView-AutoLayout-MultipleContents

如果你想了解只有一个 view 的 ScrollView，可以看
iOS: How to use UIScrollView with Auto Layout (PureAuto Layout) – Single Content View

本文将使用到纯AutoLayout 方式进行布局，请参考下面的连接：

https://developer.apple.com/library/ios/technotes/tn2154/_index.html

首先，我在故事板中定义如下视图层次：

• View (UIViewController 的 view)

·      Scroll View (UIScrollView)– 暗灰色

·      Container View (UIView) – 轻灰色

·      Content1 (UIView) – 红色

·      Content2 (UIView) – 绿色

·      Content3 (UIView) – 蓝色

最终在故事板中显示为如下布局:

在设置布局规则之前，注意以下几点:

• Scroll view 没有固定的高度和宽度。
• Scroll View 的 宽度和高度由其内容所决定（即 Scroll View 的 contentSize 所决定） 。
• 内容的大小必须不依赖于 Scroll View 的尺寸。例如，Content1，Content2，Content3 不能包含任何与 Container View 相关的 top，bottom，left 和 right 的布局约束。只能包含固定宽度和高度的约束（每个约束至少在得在其中之一上定义）。如果任何一个 content view 都不包含这些约束，则它们的大小将依赖于 Scroll View（因为它们被绑定到 Scroll View 的边距），但 Scroll View 又依赖于内容的尺寸，这就导致矛盾冲突。
•  ScrollView 必须至少有一个内容绑定它的四条边，例如 top，left，right，bottom。这样 ScrollView 才能知道它的内容的边界在哪里，即 Scroll View 的 ContentSize。

现在，让我们开始布局。

• Scroll View (UIScrollView):  相对于 superview ， leading, trailing, top, bottom 四个方向都为 20。
  你也可以将 20 改为 0，这样将占据 View Controller 的整个 view 大小。
• Container View (UIView): 相对于 Scroll View，leading, trailing, top, bottom 四个间距都取值 0。
  一般来说，这是固定不变的，除非你想做一个在边上留白的效果。
  在截图里， leading, trailing, top, 和 bottom 间距都设为 0。Container View 的尺寸将有 3 个 Content views 的大小决定，从而再影响 ScrollView 的大小（ScrollView 的实际大小将在运行时计算，在故事板上设置它的大小没有任何作用）。
• Content1: 固定宽为 100，高 240，leading 和 trailing 边距 20，top 边距 8，bottom 边距 8（ Content1 和 Content2 之间的间距）。
  注意 leading 和 trailing 约束，以及 width 约束。如果 content1 是位于另外一个固定大小的 view 中，则 Xcode 会提示有约束冲突。但 content1 除 bottom 外， top，left，right 边距都是相对于 ScrollView 的。
• Content2: leading 和 trailing 为 20 , bottom 为 8 (Content2 和 Content3 之间的垂直间距), 高度 100。
  我们没有添加宽度限制。这样，只有 content1 能影响 ScrollView 的 contentSize。
• Content3: leading 和 trailing 为 20，button 20（content3 和 superView 即 ContainerView 之间的垂直间距）。宽度固定为 100。现在，我们也有一个 view 跟 ScrollView 的底边是相关的了。

用  iPhone 3.5 inch 模拟器运行程序，观察运行结果。

怎么不能滚动？
别急，这是因为 contentView 对于ScrollView 来说还不够大的缘故。

我们可以修改任何一个 contentView 的 Size。这里，我只修改了 Content1 的宽度：

-(void)viewDidLoad {

     [super viewDidLoad];

    self.content1WidthConstraint.constant = 500;

 }

运行程序，水平滚动条出现。注意，别忘了为相应的约束创建 IBOulet。

然后，尝试修改content2 的高度。

-(void)viewDidLoad {

     [super viewDidLoad];

    self.content2HeightConstraint.constant = 200;

}

运行程序，垂直滚动条也出现了。