iOS_Dev_TipsiosiOS Developer

在autolayout下使用UIScrollView的问题[修正

2015-11-01  本文已影响617人  码痞

上周发布的这篇文章中存在问题,故本周进行了大规模的修正,如造成不便……抱歉!感谢大家的批评指正

在实际工程中需要在view中添加UIScrollView来展示视图,在使用中出现了一些问题,明明已经设定好UIScrollView中View的宽、高左侧、顶部距,但系统依然报约束错误。


其实关于UIScrollView的布局系统是这样的

首先来科普一下xib中ScrollView布局的基础知识
我们需要设置的布局约束可以分为三个部分

实际操作一下


准备工作

放置ScrollView,创造出一个好的xib工作环境

约束名 约束条件
左侧 与屏幕边框距离0
右侧 与屏幕边框距离0
顶部 与TopView距离0
底部 与BottomView距离0
exp1.png

这样一来我们就可以拉大View的尺寸了,即可以拉大我们摆放视图的工作区,之前我们已经设置好了三个基本视图的位置,所以这里不管我们怎么调整View的尺寸都不会影响到最后视图的呈现,我们可以把View拉的很大来确保有足够的空间来放置视图,在拉动后选中视图用command+option+'=' 组合键来还原布局效果


像这样把操作空间拉大拉宽来方便后面的操作


在使用时,要在ScrollView左右和View之间要留出一点距离,像下面这样,不要问我为什么,后面会解释清楚的。


放置ScrollView里的视图

那么我们来放入第一个视图,如下图所示,把视图(UIView)放入ScrollView中,拖动设置好大小,注意在顶上留下一点点距离!

那么左右的距离和顶部的距离有什么用呢?这是为了方便一个快捷操作,

按住control,从要设置约束的视图开始拖动,到另一个视图上,就可以快捷设置约束了

按住control从视图中开始拖动


按住control从视图中开始拖动

到边上空白位置放开,选择Leading Space to View设置左边框到屏幕边框的距离约束,右边操作相同,选择Trailing Space to View


到空白位置放开

视图顶部与ScrollView顶部建立约束,

设置视图自身高度约束

这样一来视图的位置约束就搭建好了,我们来整理一下
(注意,拖线设置的布局的约束值是当前位置的数值,需要手动改为0)

约束名 约束条件
视图左侧与屏幕左边框距离 0
视图右侧与屏幕右边框距离 0
顶部 与ScrollView内部顶端距离0
高度 设定值

后面的视图添加方式基本类似,唯一不同的是顶部的约束应该和上一个视图相关,即

当我们把所有的视图都添加完成后,就要进行一些收尾工作了。

此时我们还需要在最后一个视图上添加底边约束和右侧约束,这个约束并不是用来设定视图尺寸和位置的,上面说过,这个约束的作用是用来让xib确定ScrollView的contentSize。

如果在做完以后发现模拟器中ScrollView不能滑动,可能就是因为这里设置的contentSize比ScrollView的Size还小,值设大一点就可以了

scrollView.contentSize.width = 视图宽度+右侧约束(0)= 视图宽度
scrollView.contentSize.height = 所有视图高度和+底边约束(0)=所有视图高度和

然后我们需要把ScrollView左右侧为方便操作预留的白色部分补回去,即选中ScrollView然后修改对应约束

再将第一个视图的顶部预留部分补回去,方法和上一步一样,这里就不做累述了。

完成效果图

欢迎评论指正!

上一篇 下一篇

猜你喜欢

热点阅读