在UIScrollView中使用Autolayout布局(2)

在UIScrollView中使用Autolayout布局(2)

分类: iPhone开发2014-12-10 14:49 5358人阅读 评论(5) 收藏 举报

在《在UIScrollView中使用Autolayout布局(1)》中,我们介绍了一个简单的例子,在UIScrollView中加入了2个使用Autolayout布局的控件。

现实的情况当然不止有这么简单。

我们使用UIScrollView,通常是需要在上面放超过一个屏幕size的控件。

如果按照(1)的步骤,添加许多Label、TextField或者其他控件,那情况又会怎么样呢?

你会发现红色的布局错误又会出现,Autolayout布局引擎会警告因为条件不足,因此不能够计算出UIScrollView的contentSize宽度或高度。

这是因为我们违反了第一条原则:UIScrollView 的contentSize依赖于subviews

大量的subviews使用了Top约束和Leading约束。这些约束都是相对于superview的。而superview是什么?其实就是UIScrollView。

这让布局引擎很矛盾,如何计算contentSize呢?要计算contentSize必须清楚每个subviews的frame,而subviews的frame居然又要依赖scrollView?

因此计算contentSize的条件不足。

你可以不理会这个布局错误而运行程序。但contentSize无法计算的结果,会导致运行时UIScrollView无法滚动。

因此当你发现UIScrollView无法滚动时,往往是因为我们违反了第一条原则,导致contentSize计算错误。

正确的步骤如下:

1、        拖入一个UIScrollView。

2、        设置UIScrollView的约束。例如Pin上、下、左、右边距都为0,将导致UIScrollView占据整个视图。

3、        拖入一个UIView,我们不妨将它命名为contentView。约束contentView的宽和高,使他能满足你的布局需要,能够摆放下所有你想摆放下的控件(一般来说都会超过屏幕的大小)。例如:width 等于ViewController’s  view 的width,height等于800。

4、        然后重要的来了,设置UIView的Pin约束,上下左右都为0。Why?明明设置了宽和高了呀,UIScrollView还不能计算出contentSize吗?相信我,如果你不做这一步,我保证你的UIScrollView还是不能滚动。这4个Pin约束实际上是用于告诉UIScrollView:我会把你的内容“撑到”多大。也就是说,contentSize必须根据UIView的4条边来确定,而不是根据别的什么方法来确定。这样,UIScrollView就把contentSize的4条边和UIView的4条边关联起来了。如果UIView的4条变发生变化,则不用你说,UIScrollView会自动调整contentSize。

5、        剩下的事情就无所谓了。随便在这个UIView上布局你的控件吧,它们都能正确布局。例如我们在UIView左上角放了一个Label(约束:top、leading),右下角放了一个Label(约束:bottom、trailing)。当然,这些约束都只是和contentView相关,没有和UIScrollView相关。不然又会导致布局冲突。

时间: 2024-10-29 19:12:01

在UIScrollView中使用Autolayout布局(2)的相关文章

在UIScrollView中使用Autolayout布局

之前翻译过一篇<如何在AutoLayout 中使用UIScrollView (多个ContentView)>(以下简称<如何>).在这篇文章中很详细地解释了在UIScrollView中使用自动布局的种种限制和注意事项. 我本来以为这已经解释得很清楚了.但是仍然有读者说文中示例虽然可行,但在其他界面上却无法做出同样的效果. 考虑到也许是文中例子过于复杂,使得有的读者看虽然看得懂,照着文中步骤也能做出效果,但由于没有真正理解文中的原意,一旦离开例子实现自己的UI就犯难了. 我们另外举一

IOS中AutoLayout布局与Transform的冲突问题

原文链接见这里: http://stackoverflow.com/questions/12943107/how-do-i-adjust-the-anchor-point-of-a-calayer-when-auto-layout-is-being-used/14105757#14105757 下来讨论的是在AutoLayout布局下,View的Transform被改变时,会触发layout从而引起布局混乱的问题.这些适配问题在IOS8中可能已经不存在,或者至少被弱化了. 问题: AutoLay

积累篇:使用 AutoLayout 布局 UIScrollView 的自控件

使用AutoLayout布局使得冗长繁琐的代码布局变得简单明了,用更少的代码实现更多的功能也是苹果孜孜不倦的目标. 在AutoLayout的使用之中,UIScrollView绝对是刺头,很多朋友宁愿使用代码布局 UIScrollView. 过目不忘带你教育UIScrollView ~ _~

【iOS开发-113】在storyboard上用AutoLayout,纯代码实现AutoLayout布局方法以及简单动画

(1)在storyboard中使用AutoLayout.这个AutoLayout和autoResizing是冲突的,只能选其一. --不同级的控件的相互约束是添加在高层级上. --同级别的控件的相互约束是添加在它们的父控件上. --不同分支控件的相互约束是添加在它们向上追溯到的第一个共同父控件. 这3条规则在代码创建时有用.利用storyboard时系统自动帮我们添加好了. (2)用代码实现AutoLayout.步骤就是先创建布局约束对象,然后把这个对象添加到需要约束的控件中. --需要先禁止需

android中的五大布局和过程流向

1.首先说明android中的五大布局: 1.绝对布局:AbsoluteLayout(按照绝对坐标来布局组件) 2.相对布局:RelativeLayout(相对其它组件的布局方式) 3.线性布局:LinearLayout(按照垂直或者水平方向布局的组件,通                        过"android:orientation"属性可以设置线性布局的方向. 属性值有垂直(vertical)和水平(horizontal)两种. android:orientation:可

表格布局扩展/DW设计界面中快速整体布局页面的操作

DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

IOS UIScrollView中的内容不显示

下午的时候发现一个xib页面在4s中显示不全,于是开始添加滚动条,话说也是第一次添加,各种不熟练,结果添加完发现内容不显示,然后各种找资料各种测试,最终发现我把UIScrollview中作为content的View的透明度设为了0. 为什么要设为0呢?因为往content中添加控件的时候添加进去就一下看不见了,以为是被遮挡了,于是就把这个conten的透明度设为了0,其实不是遮挡,是因为在ScrollView中Conten只设置边距约束的话,他的大小就变为了0,设了大小之后就忘记透明度的事了.

第五篇:在SOUI中使用XML布局窗口

窗口布局的概念 每一个UI都是由大量的界面元素构成的,在Windows编程,这些界面元素的最小单位通常称之为控件. 布局就是这些控件在主界面上的大小及相对位置. 传统的布局一般使用一个4个绝对坐标来定义一个控件在主窗口的位置.对于窗口是固定大小的界面来说,这种方式是最简单有效的. 然而问题在于在Windows系统上编程,基本上很少有程序的窗口是固定大小的,用户希望它的窗口能够随时调整大小.调整大小后界面里的控件还能够按照一定的规则进行重排. 我自己最讨厌的就是在WM_SIZE里重排控件位置. 随

Android中的LinearLayout布局

LinearLayout : 线性布局 在一般情况下,当有很多控件需要在一个界面列出来时,我们就可以使用线性布局(LinearLayout)了,  线性布局是按照垂直方向(vertical)或水平方向(horizontal)的顺序依次排序子元素,每一个子元素都位于前一个元素之后,下面我们就简单的了解一下吧 在XML布局文件中会遇到如下一些单位 px:是屏幕的像素点   dp:一个基于density的抽象单位,屏幕的物理尺寸   sp:同dp相似,但会根据用户的字体大小进行缩放 XML代码如下:改