如何ScrollView在XIB或者Storyboard中设置约束并实现翻页滚动效果

使用XIB对视图进行约束非常简单,也很方便,节省了很多代码量,这是众所周知的事情!但是UIScrollView的约束在XIB里面比较复杂,而且有时候对它进行约束会经常出错,当然,这是对你没有在SV(以下UIScrollView简称)上放置别的视图来说,假如你要对SV进行操作,并在上面放置很多view,并进行约束,那便是比较复杂,以下我就举个列子来说明对SC上放置多个view,并对其进行约束(完全用约束实现不用代码)来实现翻页滚动的效果。
首先,你得创建一个工程,然后点击选择其中一项,如下图:
选择该选项
然后点击Main.storyboard进入到可视化界面,选择view,并往里拖入SV视图,结果如下图:
选中SV
按照下图所示对SV进行约束设置:
请按照图中所示进行操作上中下距离都设置0
至此,如果说你单单只是添加一个SV上去,不做别的任何一个操作,那便到此即可,其余的操作你可以拖动控件到代码区进行操作!!!
接下来的操作便是实现用xib对SV上进行多个view的约束,且实现翻页滚动的效果!
第一步:拖动三个view(以下简称AV,BV,CV三个视图)放置在SV上,如下图:
按顺序摆放
第二步:因为是要实现翻页效果,在这里是设置一个屏幕一页,所以设置SV的两个属性,还要先修改三个view的frame,如下四个图所示:
第一个是只显示横滚动条,第二个是实现翻页滚动,第三个是横向滚动带有弹性效果
第三步(重点):关键点来了,记住SV的contentsize的大小是根据它上面的子视图的大小来固定的,所以,关键点在于把子视图的整体frame搞定就搞定SV的contentsize的大小,这样就能解决SV的约束的问题了,话不多说,上图:

  1. 先做AV的约束(按顺序来):

    第一张和第二张图做的约束是因为,AV这个视图需要得到它的宽高,这样就能固定下来AV的宽高,是根据view(即SV的SuperView)来确定的。
    第三张和第四张图做的约束是因为,SV这个滚动视图的左边界和上边界还有下边界需要和AV的上左下边界进行约束,这样就能让SV知道contentsize的上左下知道位置。
  2. 再做BV的约束:

    BV是因为夹在中间,所以它只要设置对AV视图的相对位置,首先是和AV视图的右边界的距离,还有和AV上边对齐,还要和AV视图等高等宽,这样就能确定BV的位置了
  3. 最后做CV的约束:

    图一和图二的约束意思和BV对AV做得的约束的意思是一样的,图三和图四的约束目的是为了让SV的右边界知道它所在的位置是紧贴CV的右边界!

    注意:这样做完,约束是做完了,但是还有一个问题,不知道你发现没有,就是说你运行起来的时候,发现SV并不会滚动,原因是因为CV对SV的约束的constants值是-1200,应该改为0,如下图:

    至此整个UIScrollView的约束已经做完,运行起来也很流畅,嘿嘿,亲,懂了么,学会了么?
    要点:UIScrollView的约束主要问题在于contentSize的大小,它是根据UIScrollView的子视图的整体大小来确定的,只要知道掌握这个,你就学会UIScrollView的约束的精髓了,之后无论什么要求都能完美解决了!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值