ScrollView自动布局和代码约束

一、autolayout自动布局

1、UIScorllView约束


ScrollView自动布局和代码约束_第1张图片
固定宽高
ScrollView自动布局和代码约束_第2张图片
水平竖直居中


2、ScorllView内部添加View

ScrollView自动布局和代码约束_第3张图片
scrollview中只能有一个子控件


3、View的约束

(1)上下左右约束为0

ScrollView自动布局和代码约束_第4张图片

(2)设置高度(contentsize)

ScrollView自动布局和代码约束_第5张图片

(3)水平滚动设置竖直居中,竖直滚动设置水平居中

ScrollView自动布局和代码约束_第6张图片


 二、这两天在用Swift研究一个app,直接从页面说起,上方是一个轮播图,下方是一个collectionView,很显然,如果使用TableView后期涉及到数据传递的问题就头大了,所以我最后决定用scrollView,经过垂死挣扎,终于研究出了一点小结果,总结了一些简单的纯代码约束规则分享给大家.

里面用到的第三方约束框架是SnapKit


ScrollView自动布局和代码约束_第7张图片

一、将scrollView设置为控制器的根视图

将scrollView以子视图的方式添加到View上,需要对scrollView的四个边界进行约束,约束到View上,一定一定要四个边界约束

对scrollView的四个边界进行约束

二、给scrollView添加子控件,重点来了。。。

(1)首先我们得知道,用代码给scrollView添加约束时,是不能设置固定contentSize(滚动范围)的,contentSize是根据子控件的大小自动计算的;

(2)子控件必须设置大小,也就是(width,height),一定要一定要写死!!!!!自动计算contentSize,你必须要让人家计算机知道所有子控件加在一起的width,height.

(3)我们的需求是让页面上下滚动,一定要让计算机检测到这种结构

ScrollView自动布局和代码约束_第8张图片
top和bottom约束必须有


ScrollView自动布局和代码约束_第9张图片


 ^_^          一定不要忘记上面正确的规则



至于一些规则,我们来看:

(1)我懂你,你在想只需约束它左右边界就可以知道子控件的宽了,同时高也同理都约束好了,完美,子控件大小都知道了,例如这样:

ScrollView自动布局和代码约束_第10张图片
对于scrollView,还是错误的示范

但是你运行出来是这个样子,看到滚动条没,他已经知道你子控件的加起来的长度,并且计算出了contentSize,但是就是不显示内容

ScrollView自动布局和代码约束_第11张图片
可滚动,不显示控件

所以为了显示内容,你必须直接了当的约束width,height,就是这样,尽量避免冲突的将子控件的宽和高写死!!!


(2)别指望约束边界自动计算,在这里两边约束是有自己的目的的. 例如:回看我们的正确版本,位于最下面的子控件的约束,(make.bottom),它存在的目的是使计算机知道这种结构,从而计算出contentSize

ScrollView自动布局和代码约束_第12张图片
上下滚动要求

如果设置了固定的高就不去设置底部约束,如果这样会显示内容但不会滚动

正确版本代码中并没有同时设置左右边界约束,因为我们并不希望页面会左右滚动,而希望页面上下滚动,因此,如果我们希望页面所有方向都可以滚动就需要毫不吝啬的把约束全部加上并直接设置宽高,例如这种结构


ScrollView自动布局和代码约束_第13张图片
上下左右滚动要求

你可能感兴趣的:(ScrollView自动布局和代码约束)