学 Autolayout,当涉及到 ScrollView 时,很多人面对满屏幕红色错误不知所措,为什么明明以前没问题的约束到了这儿就成了错误。
比如下面这种情况:
一个蓝色的 UIView,设其长宽约束分别为 210,200。上、左和右间距为 55。如此设置这个 View 的位置就被确定了。没有错误,没有警告。
可同样的方法,到 UIScrollView 却有触目惊心的红色错误:
可以看到 Storyboard 错误提示:ScrollView has ambiguous scrollable content height。这是怎么一回事呢?
我们知道,UIScrollView 有一个 contentSize 属性,其定义了 ScrollView 可滚动内容的大小。在以前用纯代码写的时候,我们会直接对这个属性赋值,定义其大小。但在 Autolayout 下,UIScrollView 的 contentSize 是由其内容的约束来定义的。因此,我们在 ScrollView 里面设置的约束,不仅起到布局内容的作用,同时也起到了定义 ScrollView 可滚动范围的作用。
针对上面的例子具体来说,ScrollView 知道它里面有个 View,其高度是 200,距离顶上为 55,但仅通过这两个约束没办法知道它的 contentSize 的高度是多少,我们缺少一个定义 View 到 ScrollView 底部距离的约束。
我们添加这样的一个约束,值为 55。注意这里看着有点怪,这个约束看着很长,但其实它的值并不大。
通过这个约束,ScrollView 现在可以得到其 contentSize 的高度了,即从顶端开始到 View 的间距 55,View 的高度 200,View 到底端间距 55。contentSize 的高也就是这些值的合:310。
另外要提的是,在这里我们给了 View 一个很明确的高度约束(200)。缺少这个约束,ScrollView 是无法得到 contentSize 的。但对于某些控件,例如 UILabel,UIImageView,它们的尺寸是可以通过其内容决定的。
这种情况下,我们只需要上下左右的约束即可。但有时,他们的内容是运行时决定的,比如 UIImageView,如果它的图片是运行时动态从服务器下载的,那么我们就会放一个空的 UIImageView,不包含所显示的图片。可惜,这么做,错误又来了。
由于未定义显示的图片,因此该 ImageView 的尺寸无法确定,所以 storyboard 傻傻地又抛出了错误。
那么除了随便放上一张图片以外,还有没有其他更正常的办法?
我们可以用一个临时的占位尺寸来告诉 storyboard,在你这里就按照这个尺寸走。这个占位尺寸仅在 storyboard 设计阶段有效,不会影响到运行时的尺寸。
通过修改 Intrinsic Size 为 Placeholder,现在错误没了。
Autolayout 的使用是个熟能生巧的过程,相信每个人在一开始试着使用时,都会遇到满屏警告的情况。通过多实践,这种情况会慢慢得到改善最终避免出现。当你啪啪啪设置好约束,然后按一下 alt+cmd+= 后看着控件完全按照你想的样式去布局,也是蛮爽的。