在Scrollview中使用AutoLayout
AutoLayout 与 UIScrollView的相遇是一个不可避免的场景,像UITableView、UIWebView这些都是继承于UIScrollView的,关于它们的autolayout布局大体一致,但还是会有略微不同,而我们这篇讨论的主要是其contentSize问题,所以就直接讲UIScrollView就OK了。
如上图,我们将view分为3个部分,上面一部分主要用于展示海报或者一些封面图片,中间部分用来展示一些基本的信息,比如商品页面的价格,销量,分类等比较重要的信息,下面用于展示一些额外的信息,比如推荐给用户的一些其它商品或者门店等信息。
我们先按之前讲的来添加一些contraints,看一下UIScrollView里面添加Constraints有什么区别没有。 先依次添加约束:
.为上面的橙色view与UIImageview添加高度与上下左右的边距约束。
.然后再添加中间蓝色view及其内容的高度与上下左右边距的约束。
.再添加UISegment的高度与上下左右边距的约束。
.再添加底部的UITableView的上下左右边距约束。
我们来看一下IB会怎么处理目前的约束:
Scroll View ,Need constraints for height
Scrollable Content Size Ambiguity, Has ambiguous scrollable content height
Missing Constraints, Need constraints for : width
Scrollable Content Size Ambiguity,Has ambigous content size
全是Scrollview的问题,而且意思基本上就是说IB无法确定ScrollView的宽度与高度,我们知道UIScrollView最重要的就是其contentSize的宽高了,如果这个无法确定,那scrollview就无法知晓可以滚动查看的区域。其实这仅仅是表象,IB不会因为contentSize的可见区域不确定而抱怨,因为它会有一个默认的可见区域就是其bounds,其实IB真正抱怨的是其内部的subViews的布局对于它的依赖,比如我们看最上面的橙色View相对于上、左、右的约束都相对于scrollview的。scrollview内部的subViews的约束全依赖于scrollview,这样子的话,问题就来了,Scrollview和UILabel、UIButton等这些控件一样都会根据内容调整其contentSize(autolayout布局模式中,UILabel这种控件都会根据内容对自身宽高进行调整),如果Scrollview要根据其subviews来调整自身的contentsize,而其subviews又要根据scrollview的contentsize调整自身的布局,是不是就矛盾了,就成了相互依赖了。
所以IB要求UIScrollview(当然包括继承于它的UITableview、UIWebview这些控件)的contentSize必须在布局时能够确定。
由于Scrollview的contentSize由其subviews确定,其subviews的布局依赖于其父视图Scrollview的边界。这个矛盾,要不解决前者问题,要不解决后者,即要么不让UIScrollView的contentSize由其subviews确定,要么就让ScrollView的subviews不依赖其contentSize(即Scrollview的边界)。很显然,我们只能选择后者,因为前者你无法改变,其实从宏观上来看,改变了一个就相当于改变了两个,其实二者并没有什么特别区别,都是同一个问题导致的。
既然我们想好了策略,就来试一下,如何才能让Scrollview的subviews不依赖于其边界呢? 我们首先不考虑subviews的复杂布局情况,我们先把subviews嵌入到一个我们自己添加的ContainerView中,从而把我们的布局任务简化成Scrollview与ContainerView二者的约束关系,所有之前的subviews我们都放在ContainerView中,则subviews的约束就会仅仅依赖于ContainerView了,这些subviews不再与scrollview有直接关系。
我们虽然简化了布局任务,但是还是无法绕过Scrollview的ContentSize的边界确定问题,我们前面已经知道了Scrollview的子视图不能依赖于ScrollView的边界,那我们就让其子视图不依赖于其边界即可。 国外有一个网友在遇到上面的问题的时候就咨询了Apple的工程师,结果他们画了40分钟才给出了解决方案,这说明Scrollview在autolayout中的使用真的不是那么简单。Apple的工程师给出的解决方案就是让我们的ContainerView建立一个与UIScrollview的父视图即我们的main view建立一个Equal Width,Equal Height约束,这样子ContainerView的宽高就不再依赖于ScrollView的边界了,但是ContainerView还是Scrollview的子视图,Scrollview的边界还是没有确定,我们还要为ContainerView添加与ScrollView的边界约束,用以帮忙ScrollView确定边界。
OK,我们建立了ContainerView与mainview的equal width与 equal height后,效果果然就是我们想要的。 关于Autolayout与Scrollview相遇的故事,我们就先讲到这里,关于布局的场景总是像国际象棋一样,有数不尽的步骤与结果,连Machine都可以为之苦恼,所以这里只是通过这么一个示例,让大家对autolayout的布局理念有一个更深入的认识,不要过多的去抓鱼,而要学会如何抓鱼,抓鱼的诀窍是什么,学习一门技术,大家都会有各自的体会与理解,从根本上去掌握技术的原理,以此来应对千变万化的场景才能事半功倍。
本文示例代码:本文Demo
为了更好的理解autolayout的原理,推荐阅读:
Apple工程师如何讲解AutoLayout的?
讲解视频地址:Cocoa AutoLaout Video,找名称为Cocoa Autolayout的那一个视频。
在Scrollview中使用AutoLayout的更多相关文章
- ScrollView中嵌套recycleView 出现的不显示,显示不全,终极解决方案
最近公司项目中用到了ScrollView去嵌套recycleView, 最开始我天真的把recycleView直接放入scrollView中,结果可想而知,什么都不显示,瞬间懵逼,我心想应该是和嵌套L ...
- 解决在ScrollView中套用ListView显示不正常
最近在设计Android程序时,因为需要在ScrollView中添加一个ListView列表来显示一些信息.刚开始并没有想太多,但添加进去后才发现ListView不论怎样定义都只能显示一行,显示效果很 ...
- scrollView中可以自由滚动的listview
直接在scrollView中写listview等可滚动控件会出现子控件高度计算的问题,为了解决这个问题,找到的方案是重写listview中的onmeasure方法: @Override public ...
- scrollview 中嵌套多个listview的最好解决办法
在scrollview中嵌套多个listview的显示问题. 只需要调用如下的方法传入listview和adapter数据即可. /** * 动态设置ListView组建的高度 */ public s ...
- Android ScrollView中的组件设置android:layout_height="fill_parent"不起作用的解决办法
例子,在ScrollView下加入的组件,无论如何也不能自动扩展到屏幕高度. 布局文件. [html] <?xml version="1.0" encoding=" ...
- ScrollView中嵌套ListView显示
想要ScrollView中嵌套显示ListView 需要自定义ListView 并重写onMeasure方法 重新计算 heightMeasureSpec的高度 int newHeight = Me ...
- 在代码中使用Autolayout – intrinsicContentSize和Content Hugging Priority
我们继续来看在代码中使用Autolayout的话题.先说intrinsicContentSize,也就是控件的内置大小.比如UILabel,UIButton等控件,他们都有自己的内置大小.控件的内置大 ...
- 实现ScrollView中包含ListView,动态设置ListView的高度
ScrollView 中包含 ListView 的问题 : ScrollView和ListView会冲突,会导致ListView显示不全 <?xml version="1.0" ...
- ScrollView中嵌入ListView,GridView冲突的解决(让ListView全显示出来)
ScrollView中嵌入原生ListView或GridView,会出现ListView,GridView显示不全的问题. 解决方法:重新构造一个ListView或GridView,重写OnMeasu ...
随机推荐
- IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例
案例需求:客户端发送AJAX请求服务器端获取用户信息的数据. 案例实现: 在服务器端要将Java对象转换成JSON字符串,如果使用拼接JSON字符串的方式非常繁琐,并且非常容易出错,所以一般会借助第三 ...
- java之代理 静态代理和动态代理
一.静态代理 1. 代理有很多种,有虚拟代理,保护代理,智能引用代理,和远程代理; 开发中最常用的是只能引用代理 2. 代理的模式有两种,分别是: 静态代理 代理对象,被代理对象在 ...
- WC-第二次作业
WordCount 第二次作业 码云地址:https://gitee.com/lgcj1218/WordCount/tree/master 一.解题思路 本次作业采用的c#语言 按功能分为了三个类 , ...
- [题解](组合数学/gcd)luogu_P3166数三角形
首先转化为ans=所有的组合方式 - 在同一水平/竖直线上 - 在同一斜线上 主要考虑在同一斜线上的情况 首先想到枚举斜率然后在坐标系内平移,以(0,0)为起点,每条线上的点数应该是gcd(x,y)比 ...
- input 内容发生改变时触发事件
oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失 ...
- [软件工程基础]2017.11.05 第九次 Scrum 会议
具体事项 项目交接燃尽图 每人工作内容 成员 已完成的工作 计划完成的工作 工作中遇到的困难 游心 #10 搭建可用的开发测试环境:#9 阅读分析 PhyLab 后端代码与文档:#8 掌握 Larav ...
- C.One Piece
链接:https://ac.nowcoder.com/acm/contest/908/C 题意: Luffy once saw a particularly delicious food, but h ...
- ms sqlserver 清除数据库日志脚本
USE [master] GO ALTER DATABASE F360DW SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE F360DW SET ...
- vuex填坑记录
vuex是需要等待页面加载完成后才会更新的,如果页面点击刷新有用到vuex的地方,那么vuex会保持旧的数据,等刷新完成后vuex的数据才会重置,所以要在页面加载后再调用vuex的数据才是正确的,如果 ...
- Android使用AchartEngine绘制曲线图
1.在布局文件中加入LinearLayout布局,如下: <LinearLayout android:id="@+id/chart" android:orientation= ...