(转)AutoLayout深入浅出三[相遇Scrollview]

原文地址:http://grayluo.github.io/WeiFocusIo/autolayout/2015/01/27/autolayout3/

AutoLayout 与 UIScrollView的相遇是一个不可避免的场景,像UITableView、UIWebView这些都是继承于UIScrollView的,关于它们的autolayout布局大体一致,但还是会有略微不同,而我们这篇讨论的主要是其contentSize问题,所以就直接讲UIScrollView就OK了。

如上图,我们将view分为3个部分,上面一部分主要用于展示海报或者一些封面图片,中间部分用来展示一些基本的信息,比如商品页面的价格,销量,分类等比较重要的信息,下面用于展示一些额外的信息,比如推荐给用户的一些其它商品或者门店等信息。

我们先按之前讲的来添加一些contraints,看一下UIScrollView里面添加Constraints有什么区别没有。 先依次添加约束:

1.为上面的橙色view与UIImageview添加高度与上下左右的边距约束。
2.然后再添加中间蓝色view及其内容的高度与上下左右边距的约束。
3.再添加UISegment的高度与上下左右边距的约束。
4.再添加底部的UITableView的上下左右边距约束。

好了,我们来看一下IB会怎么处理目前的约束:

My God ! 好多问题呀 @[email protected]
不要被问题给吓倒了,我们一起来看一下问题。 问题提示的是:

  • 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的那一个视频。

讲稿:Cocoa autolayout PDF

参考:
本文主要用于一个知识的归纳总结,过程中可能会引用到其它地方的文字或代码,如有侵权请及时联系我,在此对写作过程中参考了的文章作者表示感谢!

  • http://natashatherobot.com/ios-autolayout-scrollview/
时间: 2024-07-31 13:34:56

(转)AutoLayout深入浅出三[相遇Scrollview]的相关文章

iOS: How To Make AutoLayout Work On A ScrollView

iOS: How To Make AutoLayout Work On A ScrollView Posted on June 11th, 2014 Ok, I’ll admit. I’ve been seriously struggling with AutoLayout ever since it’s been introduced. I understand the concept, and I LOVE the idea of it, but when I actually do it,

通过AutoLayout显示三个等宽视图

需求---------->   需要通过AutoLayout使三个视图在所有设备永远是等宽的 1 >我们知道固定一控件在窗口上,至少需要四个约束,那么就是每个控件都需要被约束到 想法 --->可以在固定控件自适应的基础上,使其具有相同的宽度 2 >以Lable为例 1/在storyBoard上托上三个Lable,并设置颜色加以区分 2/下面我们就对三个Lable进行约束 高 距离父视图上面 距离父视图底部 距离父视图左侧 然后要让他们等宽,先于紫色视图 再是红色视图 第一个约束完是

AutoLayout深入浅出五[UITableView动态高度]

本文转载至 http://grayluo.github.io//WeiFocusIo/autolayout/2015/02/01/autolayout5/ 我们经常会遇到UITableViewCell的高度要跟随内容而调整,在未引入AutoLayout之前,我们使用以下方法计算Label高度,然后heightForRowAtIndexPath中返回计算的高度,这种做法,真的很土很局限很不好,如果UILabel使用了CoreText或者UIKit进行了富文本不同字体的排版,它更是没办法,我还得分段

AutoLayout的三种设置方式之——NSLayoutConstraint代码篇

AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术,该技术有三种设置方式,等下我来为大家一一叙述一下. 在说三种设置方式前,我们先简单的说一下autolayout能够设置哪些行为. 1.视图的大小(即视图的绝对大小). 2.视图的位置(视图相对于父视图或者兄弟视图的位置). 3.视图的对齐方式(相对于父视图或者相对于兄弟视图). 可以看到autolayout相比autoresizing技术来说要灵活的多,该技术有很多布局的约束设置.这次主要讲的用代码来设置

(转)AutoLayout深入浅出一[前传]

原文地址:http://grayluo.github.io/WeiFocusIo/autolayout/2015/01/24/autolayout1/ 我想大部分的iOS开发者都面临着iOS设备分辨率碎片化而带来的一系列适配问题,以前的Rect布局方式显得越来越古板,越来越无法高效的完成我们布局的想法,不论是使用xib还是code进行布局都要无休止的使用分辨率进行调整,所有的布局完全相对于分辨率,新手一般会把布局写的比较死,而老手会把布局使用分辨率作为基点,但面对复杂的布局,总是感觉应该变革,为

(转)AutoLayout深入浅出二[基本使用]

原文地址:http://grayluo.github.io/WeiFocusIo/autolayout/2015/01/24/autolayout2/ 在上一篇中我们一起讨论了Autolayout出生之前的iOS布局方式,并讲了以前的布局方式的缺陷,从而引入了AutoLayout,这篇文章我们就直接上正餐了. 接到上一篇的示例,我们使用Autolayout来完成autoresizingMask无法完成的使命,我们先在File inspector中激活autolayout,我们在Size Insp

纯代码Autolayout的三种方法

Autolayout讲解较多的就是xib和storyboard用法,本文主要记录纯代码的Autolayout使用方法: 方法1.苹果原生的方法,这种方法虽然简单但是太过繁杂,可用性很差 //宽度=superView高度 [superView addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toIte

寒哥细谈之AutoLayout全解

文/南栀倾寒(简书作者)原文链接:http://www.jianshu.com/p/683fbcbfb705著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 看到群中好多朋友还停留在Frame布局的痛苦时代 ,以及有些开发者接手别人的就项目发现布局一团乱 . 而且没有启动图的时候并不是真正真正适配iPhone 6(S) iPhone6(S) Plus等设备 . 寒哥准备尽可能详细的讲一讲我所掌握的AutoLayout . AutoLayout很难? 我觉得AutoLayout的难的

IOS--基础知识--AutoLayout资料收集

从入门到精通 AutoLayout深入浅出一[前传] AutoLayout深入浅出二[基本使用] AutoLayout深入浅出三\[相遇Scrollview\] 重要 AutoLayout深入浅出四[不仅是UIWebView与UITableView的纠缠] AutoLayout深入浅出五[UITableView动态高度] 动态计算UITableViewCell高度详解 使用Autolayout实现UITableView的Cell动态布局和高度动态改变 其他补充 Auto Layout 入门及使用