一、前言
最开始使用UIScrollVIew
都是用纯代码实现布局的,后来为了提高开发效率使用IB
的AutoLayout
自动布局,由于UIScrollView
与一般视图的自动布局约束方式有些不同,如果不了解其中的原理或者不经常使用AutoLayout
实现自动布局,突然要用AutoLayout
来实现UIScrollView
的布局,很可能就会感觉很困难,为了加深记忆和以后开发的便利特地写了这篇文章。
二、具体步骤
- 将
scrollView
拖进视图控制器的View
,并设置上下左右约束为0; - 将一个
View
拖进srollView
作为所有subviews
的父容器视图contentView
;
scollView
的自动布局涉及到它内部的frameLayoutGuide
与contentLayoutGuide
属性
@available(iOS 11.0, *)
open var frameLayoutGuide: UILayoutGuide { get }
Use this layout guide when you want to create Auto Layout constraints related to the content area of a scroll view.
当您想要创建明确涉及滚动视图本身的框架矩形而不是其内容矩形的自动布局约束时,请使用此布局指南。
@available(iOS 11.0, *)
open var contentLayoutGuide: UILayoutGuide { get }
frameLayoutGuide与contentLayoutGuide
Use this layout guide when you want to create Auto Layout constraints that explicitly involve the frame rectangle of the scroll view itself, as opposed to its content rectangle.
当您想要创建与滚动视图的内容区域相关的自动布局约束时,请使用此布局指南。
从苹果的官方文档的说明中,我们可以看出frameLayoutGuide
主要是用来设置与scrollView
的frame
有关的约束,比如内容区的宽或高是与frame
的对应值相等,x
横坐标或者y
纵坐标与frame
的对应值相等的,而contentLayoutGuide
主要是用来设置与滚动的内容区域有关的约束,例如:内容区是纵向滚动的,那么内容区的top
和bottom
是与contentLayoutGuide
相等的,水平方向是与它中间对齐的。
- 设置
contentView
与scrollView
的frameLayoutGuide
的左、右两个方向的约束为0;
因为contentView
与scrollView
等宽且横轴方向位置固定为0。
- 设置
contentView
与scrollView
的contentLayoutGuide
的上、下两个方向的约束为0,水平方向中间对齐;
因为contenView
即scrollView
的内容区且纵向滚动,所以纵轴方向与内容区的相对位置固定,与内容区水平方向对齐。
- 约束好内容区即
contentView
的高度;
上一步设置完约束还是会报错,因为内容区即contenView
的高度还未确定,如果内容区的高度是固定的,可以设置contentView
的高度约束为固定值;如果内容区高度根据不同的内容而变化,那就不需要设置contentView
的高度约束,只要根据需要将控件添加到contentView
,然后从上到下设置好各个控件纵向的约束。
三、结语
本篇文章介绍的只是UIScollView
纵向滚动自动布局的实现,但是我相信大家看完这篇文章后应该可以举一反三,自己实现UIScollView
横向滚动自动布局的设置。
网友评论