Xcode11 - 在 XIB 中设置 UIScrollerView 的约束

4,645 阅读3分钟

此处介绍的是 Xcode 11 才有特性,只能在 iOS 11 之后的设备上才可以使用

在Xcode11中对UIScrollView在Xib中的布局,苹果引入了Content Layout guide和Frame Layout Guide。我们拖动一个UIScrollView到Xib中,默认就会有 Content Layout guide和Frame Layout Guide两个选项嵌入。

这时我们可以选择两种方式来进行布局:

  • 将右边检查器中Content Layout Guides的勾勾去掉,这样Content Layout guide和Frame Layout Guide在UIScrollView中就会自动消失,这时候布局就跟以前的Xcode版本一样
  • 保留Content Layout guide和Frame Layout Guide,分别对它们进行设置,完成UIScrollView的内容布局,本文则讲解这种方式的布局步骤

进行实现

最终实现目的 要将这样的UIScrollView成功布局,我们要完成两个部分:

  • 完成UIScrollView自身相对于父视图的布局设置,这个是Frame Layout Guide的部分
  • 完成UIScrollView滚动内容的布局设置,这个是Content Layout guide的部分

一、在视图控制器中拖入一个UIScrollView并设置约束

拖入一个UIScrollView到ViewController中,并分别设置它相对于父视图的上下左右都设置约束,这时候会有报错,暂时不用处理。

二、拖入一个UIView到UIScrollView中,并设置它的约束

拖入一个UIView到UIScrollView中,作为内容显示视图,Autolayout 将使用这个View的宽高来计算UIScrollView的滚动范围,并分别设置它相对于 Content Layout guide 的约束为0,具体步骤为:左键选中View,右键拖动它到Content Layout guide上,按住shift键,将上下左右都给选中,默认的一般不是0,点击 Edit 都改为 0。

三、设置内容滚动范围

上面的步骤设置之后,我们会发现红线仍然存在,这是因为AutoLayout仍然不知道内容的滚动范围是多大,我们接下来设置滚动范围,具体步骤为:左键选中添加的 View,右键拖动到 Frame Layout Guide,如果选中之后,不是同等宽度,需要对添加的 同等宽度进行编辑,设置 Multiplier 为 1,最后为 添加的 View 设置 Height ,到这里 UIScrollerView 的 content 和 frame 就设置完成了,可以正常使用了。

使用过程中修改 高度

在使用过程中,如果需要修改高度,可以选中最初添加到 scrollerView ,然后编辑对应高度的值,就可以了。

使用这种方式创建的 ScrollerView 如果在运行时报错,只需要找到对应的创建位置,修改版本号就可以了,但是这个操作之后,只能在 iOS 11 之后的设备上才可以使用。

**.xib:KD1-Y1-flN: error: Content and frame layout guides before iOS 11.0 [6]

如果是已经采坑了,请按照如下步骤填坑

选择对应的 ScrollerView ,去掉 Content Layout guide和 Frame Layout Guide ,根据效果调整 高度就可以了,话说这也不算太坑。