ScrollView 与 Autolayout

学 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+= 后看着控件完全按照你想的样式去布局,也是蛮爽的。

时间: 2024-10-27 12:35:11

ScrollView 与 Autolayout的相关文章

storyBoard方式ScrollView的AutoLayout

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

ScrollView 与 Autolayout --- 【转载】

学 Autolayout,当涉及到 ScrollView 时,很多人面对满屏幕红色错误不知所措,为什么明明以前没问题的约束到了这儿就成了错误. 比如下面这种情况: 一个蓝色的 UIView,设其长宽约束分别为 210,200.上.左和右间距为 55.如此设置这个 View 的位置就被确定了.没有错误,没有警告. 可同样的方法,到 UIScrollView 却有触目惊心的红色错误: 可以看到 Storyboard 错误提示:ScrollView has ambiguous scrollable c

iOS开发——使用基于Autolayout的ScrollView

问题描述: 在使用Autolayout布局方式对ScrollView进行布局时,如果你想做一个可以垂直方向滚动的九宫格类似这样:   拿一行来说,一定不要想当然的尝试去给一行图标进行均匀排列的操作(指定padding,图片尺寸自适应),你的针对ScrollView右边和下边的约束是无效的.约束了结果也是没用的,然后图片的内在尺寸约束会占据主导,把ScrollView水平方向也顶出屏幕,使得ScrollView水平方向变得也可以滚动.   解决方法: 解决办法是不能在ScrollView中使用Au

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

原文地址:http://grayluo.github.io/WeiFocusIo/autolayout/2015/01/27/autolayout3/ AutoLayout 与 UIScrollView的相遇是一个不可避免的场景,像UITableView.UIWebView这些都是继承于UIScrollView的,关于它们的autolayout布局大体一致,但还是会有略微不同,而我们这篇讨论的主要是其contentSize问题,所以就直接讲UIScrollView就OK了. 如上图,我们将vie

Autolayout基础讲解

Interface Builder 介绍 在 storyboard 界面的右下角,有这么一排图标 鼠标放上去停留一小段时间,就会告诉你它们的作用,从左至右依次是: Align:用来设置对齐相关的约束: Pin:设置相对大小和位置: Resolve Auto Layout Issues:解决 autolayout 问题: Resizing Behavior:设置重置大小会如何影响其他对象: Align(对齐) 下面这些是两个视图层次中同一级的 View 的对齐. Leading Edges:头对齐

AutoLayout经常用到的一些布局(含StackView)

前言:个人比较喜欢在xib和sb上去用Autolayout,也有不少人会去用VFL,和Masonry来做适配,当然也有一些新手使用屏幕尺寸的比例去做. 当然对比起来,个人还是喜欢在界面上去用Autolayout,去拉约束来做.感觉效率比较高,但团队开发的话可能自己加的约束对于别人来说看起来就没那么容易了,但会自动布局的看别人加的约束也比较容易能看懂. 一.兼容模式 这里首先要说一下,做适配的前提.xcode6之后需要去开启LanchScreen.xb或LanchSreen.storebord,如

iOS之XIB拖拽scrollView

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

关于ScrollView无法滚动的解决方案

今天做了一个ScrollView的小例子(我的环境Xcode5 IOS7),结果发现无法滚动,即使设置了scrollView的contentSize还是不行,于是研究了一番,最终找到了解决方案: 在ios6之前,因为Xcode没有Autolayout的机制,所以直接使用scrollView,设置它的contentSize即可正常滚动 在ios6之后,因为Xcode引入了Autolayout的机制,所以我们设置的contentSize被修改为适合屏幕大小的值,也就是说自适应啦,因此无法滚动,解决方

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

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