Xcode中利用scrollView设置界面上下滚动

Xcode中利用scrollView设置视图上下滚动

先看一下运行结果:

Xcode中利用scrollView设置界面上下滚动

首先
我们打开Xcode创建一个SingleViewApp项目,点击Main.storyboard中默认的主视图,在右下侧控件里面找到ScrollView把它拖入ViewControler中,如下图:
Xcode中利用scrollView设置界面上下滚动
看到下图的红圈圈了没?
Xcode中利用scrollView设置界面上下滚动
你可以把它当作给视图画范围的,方框里面的表示ScrollView各个边到其父类的最近边的距离,可以把View理解为床放进房间里,这里我把它设置为0,也就是把ScrollView充满View,结果如下图:Xcode中利用scrollView设置界面上下滚动
AND THEN
我们再找到一个View控件(或者是imageView等)把它拖入ScrollView中作为其子类,如下图:
Xcode中利用scrollView设置界面上下滚动
导入后,发现有红(下图)。。。????????情况不对,赶快撤退???不要慌,不要急
Xcode中利用scrollView设置界面上下滚动
这里的红箭头是什么意思呢?点进去发现提醒:Has ambiguous scrollable content height(有不明确的可滚动的内容高度) 也就是提醒我们刚刚加进去的View没有给定明确的长宽即约束Xcode中利用scrollView设置界面上下滚动
在设定View边框之前我们先看一下Scroll的高度范围,如下图,在右边可以看到Height为647,那么如何为View设置约束才能有上下滚动效果呢,这里我理解的就是View的约束高度差要大于ScrollView的高度差(但是在给出的本例中我试验差不多View的约束的高度差500多就能实现滚动效果):
Xcode中利用scrollView设置界面上下滚动

下面我们同样点击小方框,这里我们把View约束的下界设置的大一些,设置为800,(View本身的大小设置为Width:375 Height:200)Xcode中利用scrollView设置界面上下滚动
约束高度差越大向下滚动的范围越多,可以这么理解,按回车键保存约束条件,结果如下:
Xcode中利用scrollView设置界面上下滚动
我的可能是设置的有问题,View的Height也变成800了,不用急,这里我们点击View->Constraints->height在右侧的属性里面改一下参数为200即可,如下图:Xcode中利用scrollView设置界面上下滚动
同时,为了更好分清楚View的滚动,我们在其属性中为其更改一下颜色,如下图
Xcode中利用scrollView设置界面上下滚动
最后点击▶️
结果如下图:Xcode中利用scrollView设置界面上下滚动