一、autolayout自动布局
1、UIScorllView约束
![](https://img.haomeiwen.com/i2130786/62d2b51a95aab11e.png)
![](https://img.haomeiwen.com/i2130786/16494e1f66e456e4.png)
2、ScorllView内部添加View
![](https://img.haomeiwen.com/i2130786/589626994449e30b.png)
3、View的约束
(1)上下左右约束为0
![](https://img.haomeiwen.com/i2130786/794af29e2cef5c2a.png)
(2)设置高度(contentsize)
![](https://img.haomeiwen.com/i2130786/7c4c84e2c596d455.png)
(3)水平滚动设置竖直居中,竖直滚动设置水平居中
![](https://img.haomeiwen.com/i2130786/685c0b131a2f2fb3.png)
二、这两天在用Swift研究一个app,直接从页面说起,上方是一个轮播图,下方是一个collectionView,很显然,如果使用TableView后期涉及到数据传递的问题就头大了,所以我最后决定用scrollView,经过垂死挣扎,终于研究出了一点小结果,总结了一些简单的纯代码约束规则分享给大家.
里面用到的第三方约束框架是SnapKit
![](https://img.haomeiwen.com/i2130786/6975a4d572fffead.gif)
一、将scrollView设置为控制器的根视图
将scrollView以子视图的方式添加到View上,需要对scrollView的四个边界进行约束,约束到View上,一定一定要四个边界约束
![](https://img.haomeiwen.com/i2130786/48e7a8f295144cfe.png)
二、给scrollView添加子控件,重点来了。。。
(1)首先我们得知道,用代码给scrollView添加约束时,是不能设置固定contentSize(滚动范围)的,contentSize是根据子控件的大小自动计算的;
(2)子控件必须设置大小,也就是(width,height),一定要一定要写死!!!!!自动计算contentSize,你必须要让人家计算机知道所有子控件加在一起的width,height.
(3)我们的需求是让页面上下滚动,一定要让计算机检测到这种结构
![](https://img.haomeiwen.com/i2130786/b9242c21b4712a3a.png)
^_^ 一定不要忘记上面正确的规则
至于一些规则,我们来看:
(1)我懂你,你在想只需约束它左右边界就可以知道子控件的宽了,同时高也同理都约束好了,完美,子控件大小都知道了,例如这样:
![](https://img.haomeiwen.com/i2130786/5258bb3e198f702d.png)
但是你运行出来是这个样子,看到滚动条没,他已经知道你子控件的加起来的长度,并且计算出了contentSize,但是就是不显示内容
![](https://img.haomeiwen.com/i2130786/ac51737e1a4f264f.gif)
所以为了显示内容,你必须直接了当的约束width,height,就是这样,尽量避免冲突的将子控件的宽和高写死!!!
(2)别指望约束边界自动计算,在这里两边约束是有自己的目的的. 例如:回看我们的正确版本,位于最下面的子控件的约束,(make.bottom),它存在的目的是使计算机知道这种结构,从而计算出contentSize
![](https://img.haomeiwen.com/i2130786/b9242c21b4712a3a.png)
如果设置了固定的高就不去设置底部约束,如果这样会显示内容但不会滚动
正确版本代码中并没有同时设置左右边界约束,因为我们并不希望页面会左右滚动,而希望页面上下滚动,因此,如果我们希望页面所有方向都可以滚动就需要毫不吝啬的把约束全部加上并直接设置宽高,例如这种结构
![](https://img.haomeiwen.com/i2130786/3912e1f301e2b45e.png)
网友评论