转载

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

前言

自从写了介绍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); }];

效果

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

这里我建立了一个宽等于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)); }];

效果

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

能看到当我仅改变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); }];

效果

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

这个例子中 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); }];

效果

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

将四个方向的约束分别指向四个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其实是这个问题上的最佳实践

正文到此结束

所属分类：编程技术

本文标签： UI 文章 ip http db src tab 源码微博 Android 代码
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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

示例1

示例2

示例3

示例4

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流