XIB中ScrollView设置

XIB中绘制ScrollView相比于其他的空间的绘制,会比较难控制一点.
一个难点是scrollView的SubView的约束难以琢磨
还有一个是如何在XIB设置scrollView的ContentSize
经常一个设置不注意,显示就千差万别.
现在就开始描述正确设置ScrollView具体步骤吧:
1.添加ScrollView.设置其约束如下:


XIB中ScrollView设置_第1张图片
C87022F1-5502-4AA1-823C-05102DDCE401.png

2.添加StackView在ScrollView.设置其约束如下:

XIB中ScrollView设置_第2张图片
625494EA-B671-4838-B6EE-50DC267B1A99.png

3.由于ScrollView的ContentSize在XIB中是根据其SubView计算的,所以还要对stackView进行如下设置:


XIB中ScrollView设置_第3张图片
4E6DFE0A-CA83-46D1-9DB6-EC38DABD35F3.png

把equal withd 与equal height都点上

4.这里有一个关键点,这里的withd 与height都是设置ContentSize的,比如我想设置横向滑动全屏图片的scrollView,纵向不滑动,那么这里应该这样设置:

XIB中ScrollView设置_第4张图片
2E0456F0-F91B-48A2-8BF3-D64171959D73.png

multplier设置为4:1 即contentSize.x为屏幕的4背,height的multplier不变为1:1

5.在stackView中填充4张imageView,设置stackView的distribution为fill equally,讲第一张图片添加一个纵向的约束(如果需要下拉,需添加横向约束,如果都需要,则不需要添加约束):

XIB中ScrollView设置_第5张图片
CDF02BAD-D11B-4A13-AB97-701B24426A40.png

6.最后添加图片,run...成功设置好约束:

XIB中ScrollView设置_第6张图片
5DE4A8D5-FBBE-4891-A8DB-5C7594811774.png

你可能感兴趣的:(XIB中ScrollView设置)