iOS13-Xcode11-UIScrollView的新功能-在storyboard上即可设置ContentSize-更高效的布局

3,306 阅读2分钟

在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:

当然以上只是ScrollView的简单演示,现实开发中ScrollView里的内容一般是StackView,其实大同小异,大家可以融会贯通一下。