在Xcode11之前,ScrollView的布局是比较繁琐且不易理解的,主要是因为ScrollView的特殊性(需指定contentSize)造成的。
比如之前一般都要用代码来指定:
imageView = UIImageView(image: UIImage(named: imageName))
scrollView.contentSize = imageView.bounds.size
scrollView.addSubview(imageView)
Xcode11之后呢,虽然官方加入了SwiftUI新框架让我们更加容易的制作UI,但尚处起步阶段,故在storyboard(IB)方面也做了一些小更新,双管齐下,保证我们iOS开发者不会因开发UI和布局太难而止步。
在Xcode11中拖入UIScrollView控件时默认多了两个东西:
Content Layout Guide --对应上面代码中的contentSize,表示ScrollView中内容的大小
Frame Layout Guide --表示ScrollView本身的大小
如果是用旧版本Xcode做的项目,想使用这两个功能的话,可以用新版Xcode打开项目,选中ScrollView控件,并在右边面板这里把Content Layout Guide的勾打上:
初始布局:
1.先拖动ScrollView占满整个屏幕,设相对于superview的四边距约束为0
(新版Xcode中,如果不先把控件占满屏幕,而是直接设约束的话,就算设为0,也会变成当前的距离,之后还得去右边面板中重设约束---这是一个不太好的设计)
2.里面放一个ImageView
3.ImageView里放一个比屏幕宽的图片(这里是1440x900的),ContentMode设为Aspect Fill,并设定imageView的宽高约束,设为和图片一样,1440x900。
选中ImageView,control拖动到Content Layout Guide上,按住Command键复选四个约束
(这一步相当于上面代码的scrollView.contentSize = imageView.bounds.size
)
上一步也可以这样:
(这样的话可以在一开始的时候指定内边距ContentInset,彼时需注意数值的正负)
至此,红色箭头消失,基本上就算完工了:
同时我们还可以在Storyboard上选中ImageView,双指滚动图片以实时预览效果:
如果只想让ScrollView里面的内容左右滚动的话:
选中ImageView,control拖动到Frame Layout Guide上,选中Equal Heights(之后记得把之前设的高度约束删掉):
但虽然选了Equal Heights,但Xcode仍旧会按照当前比例来设Multiplier,故还需选中这个约束,在右边面板把Multiplier强制改为1: