UIScrollview 与 Autolayout 的那点事

原文  http://www.cocoachina.com/ios/20151221/14757.html

前言

自从写了 介绍Masonry 那篇文章以后 就一直有人对UIScrollView的那个例子不是很理解

UIView *container = [UIView new];
[scrollView addSubview:container];
[container mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(scrollView);
    make.width.equalTo(scrollView);
}];
  • 为什么要用一个container包含其他subview?
  • 为什么指定了edges 还要指定width? 不是多此一举吗?

那么今天我就按照我的理解来说明一下这个问题

梳理

直入主题 要解释之前的问题 最重要的一个概念就是

UIScrollView依靠与其subviews之间的约束来确定ContentSize的大小

换成代码 是这个样子

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(v1.mas_left);
    make.right.equalTo(v1.mas_right);
    make.top.equalTo(v1.mas_top);
    make.bottom.equalTo(v1.mas_bottom);
}];

这是因为UIScrollView是个非常特殊的view UIScrollView与其subview之间 相对位置的约束 并不会直接用于frame的计算 而是会转化为对ContentSize的计算

换句话说 当UIScrollView知道了 上下左右 的约束分别指向subview什么位置之后 只要subview的位置固定下来了 ContentSize的大小就确定下来了

下面来个简单的例子 强烈建议 配合demo来理解下面的例子(demo的链接在文尾)

请点击-> 在线演示 (为了方便理解 我将ContentSize用红线框了出来 另外为了查看ContentSize 我把UIScrollView的clipTobounds关闭了 可以通过左上角的开关来切换实际的效果)

示例1

[v1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(scrollView);
    make.width.equalTo(scrollView);
    make.height.equalTo(scrollView).multipliedBy(1.5);
}];

效果

这里我建立了一个宽等于scrollview 高等于scrollview高度1.5倍的view 然后scrollview成功的计算出了ContentSize

关键就在于

make.edges.equalTo(scrollView);

这句话其实等同与之前我提到的

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(v1.mas_left);
    make.right.equalTo(v1.mas_right);
    make.top.equalTo(v1.mas_top);
    make.bottom.equalTo(v1.mas_bottom);
}];

scrollview因为上面的约束 会以v1的大小来计算ContentSize

示例2

如果尝试改变v1的大小 会怎么样呢?

[v1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(scrollView);

    make.size.equalTo(scrollView).sizeOffset(CGSizeMake(80, 80));
}];

效果

能看到 当我仅改变v1的大小 而不变其他的东西的情况下 scrollview的ContentSize也是随着v1的大小变化而变化的

示例3

接下来示例就会稍微复杂点 如果同时有两个view 会如何呢?

[v1 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.left.top.right.equalTo(scrollView).insets(UIEdgeInsetsMake(10, 10, 0, 10));

    make.width.equalTo(scrollView).multipliedBy(1.1);
    make.bottom.equalTo(v2.mas_top).offset(-50);
    make.height.equalTo(@200);
}];
[v2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(scrollView);

    make.left.right.equalTo(v1).insets(UIEdgeInsetsMake(0, 50, 0, 50));
    make.height.equalTo(@250);
}];

效果

这个例子中 scrollview的四个方向的约束并没有放在同一个subview上 而是分别指向了两个view 所以scrollview的ContentSize会根据两个view之间的约束来确定

示例4

如果将四个方向的约束分别放到四个不同的view上面 会怎么样呢?

CGSize size = CGSizeMake(200, 200);
[v1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(scrollView.mas_top);

    make.size.mas_equalTo(size);
}];
[v2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.equalTo(scrollView.mas_left);

    make.size.mas_equalTo(size);
    make.right.equalTo(v1.mas_left);
    make.top.equalTo(v1.mas_bottom);
}];
[v3 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.equalTo(scrollView.mas_right);

    make.size.mas_equalTo(size);
    make.left.equalTo(v1.mas_right);
    make.top.equalTo(v1.mas_bottom);
}];
[v4 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(scrollView.mas_bottom);

    make.size.mas_equalTo(size);
    make.left.equalTo(v1.mas_left);
    make.top.equalTo(v2.mas_bottom);
}];

效果

将四个方向的约束分别指向四个view的中心点 我们也能得到正确的ContentSize

如果你看懂了示例4的代码与效果 相信你对这个问题的所有疑惑都应该已经解除了

那么再回到最开始那个问题

make.edges.equalTo(scrollView);
make.width.equalTo(scrollView);

一般情况下我们使用UIScrollView来进行autolayout布局 都是为了实现类似Android中的线性布局(有很多杂的非重复性的subview 如果使用UITableView和UICollectionView太麻烦) 这时直接使用UIScrollView就会很灵活

那么

如果我们需要竖向的滑动 就把width设为和scrollview相同

如果需要横向的滑动 就把height设为和scrollview相同

就是这么简单

小结

源码和Demo请点 这里

前不久@nixzhu也写了一篇关于 UIScrollView的文章 然后我在微博上回复说 “ 使用一个单一的containerView占满全部,然后把所有的subview添加到containerView中 ”不过nixzh 表示他是极力避免这样的 但是后在这个问题上 我是 极力推荐 这样使用的

就如同示例1和示例2一样 如果你需要添加subview 你只要简单的添加到v1上 并添加与v1的约束 就可以获得正确的ContentSize了

如果不这样做 就类似示例3和示例4 这些边界约束都需要一个一个的设置 这其实是没有必要的

使用单一的containerView其实是这个问题上的最佳实践

时间: 2024-10-26 20:24:56

UIScrollview 与 Autolayout 的那点事的相关文章

示例详解:UIScrollview 与 Autolayout 的那点事

前言 自从写了介绍Masonry那篇文章以后 就一直有人对UIScrollView的那个例子不是很理解 UIView *container = [UIView new]; [scrollView addSubview:container]; [container mas_makeConstraints:^(MASConstraintMaker *make) {     make.edges.equalTo(scrollView);     make.width.equalTo(scrollVie

Storyboard、xib中的UIScrollView使用autolayout,使其能够滚动

Storyboard.xib中的UIScrollView使用autolayout,使其能够滚动 在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说一下我的理解,在故事板或xib中,ScrollView是根据其下面的一个View的大小来确定ContentSize的大小. 看一下效果 1. 创建一个项目,拖拽一个ScrollView到故事板中,如下图 2

UIScrollView使用autolayout 垂直滚动

转自:http://dadage456.blog.163.com/blog/static/30310744201491141752716 1.创建一个空白的UIViewController 2.将UIScrollView添加到UIView控件中,并设置UIScrollView针对父视图UIView的constraints(Leading/trailling/top/bottom = 0) 3.最主要的来了,添加UIView控件到UIScrollView中.. (1)并改名为ContentView

iOS— UIScrollView和 UIPageControl之间的那些事

本代码主要实现在固定的位置滑动图片可以切换. 目录图如下: ViewController.h #import <UIKit/UIKit.h> // 通过宏定义定义宽和高 #define WIDTH self.view.frame.size.width #define HEIGHT self.view.frame.size.height @interface ViewController : UIViewController<UIScrollViewDelegate> @proper

在UIScrollView中使用Autolayout布局

之前翻译过一篇<如何在AutoLayout 中使用UIScrollView (多个ContentView)>(以下简称<如何>).在这篇文章中很详细地解释了在UIScrollView中使用自动布局的种种限制和注意事项. 我本来以为这已经解释得很清楚了.但是仍然有读者说文中示例虽然可行,但在其他界面上却无法做出同样的效果. 考虑到也许是文中例子过于复杂,使得有的读者看虽然看得懂,照着文中步骤也能做出效果,但由于没有真正理解文中的原意,一旦离开例子实现自己的UI就犯难了. 我们另外举一

Storyboard中使用UIscrollView添加约束的开发总结

第一次在项目中用storyboard做界面,一般的界面直接添加约束非常爽快 然后有个界面有scrollview,添加了约束还总是出错 刚开始使用了 wCompact,hRegular,滑动出现问题,有些界面滑动不了或者可以左右滑动 已经在viewDidLoad里面添加了scrollView的contentsize 约束什么的都没有问题,百思不得其解 后来上网查了一下资料 还是scrollView的contentsize的问题 scrollView的contentsize只能在viewDidApp

Masonry之UIScrollView 自动布局

由于项目开始比较急,又是一个人,再加上apple自动布局比较麻烦,衡量以后就用了frame来布局画面.现在稍微闲了一些,就开始对之前的代码做一些优化.其中有一个小功能是这样的,一个可以横向滑动的scrollView,画面加载的时候从服务器取背景图以及文字说明和跳转链接,同时图片做缓存,下一次重新加载的时候如果加载失败,就加载上一次的内容.那么这个地方就涉及了画面,图片缓存两个部分.本文先从画面开始说起. 第一次使用自动布局来写scrollView,就遇到了坑.后来在一个博客中找到了答案.链接如下

iOS autoLayout总结

本文转自 http://ruikq.github.io/ios/autolayout/uiscrollview/2015/01/27/iOS-autolayout%E6%80%BB%E7%BB%93.html autolayout, and uiscrollview 以前学习iOS的时候没怎么接触过autoLayout,自从iPhone6个6+出来之后一直在为以前的app做适配,所以使用了大量的autoLayout做适配,一开始很不习惯,但是越用越觉得好用,接触到现在遇到很多问题,在这里总结一下

iOS UIKit 框架 346 篇文档分类整理 - 预告

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 当前正在进行的是 "iOS Foundation 框架 224 篇相关文档分类整理",量很大,但会根据实际开发中的使用频繁程序