前言
在iOS 6.0
之后,引入了自动化布局约束,大大减轻了开发者关于界面布局的负担。但在对UIScrollView
控件进行自动化布局时,常常会出现一些约束错误,主要原因是有些开发者不太清楚UIScrollView
如何通过约束来计算contentSize
的属性值,本文将对其原理以及使用方法进行简要叙述。
一、基本原理
UIScrollView
通过其内容视图的约束来计算自己contentSize
的属性值。例如,如果UIScrollView
拥有一个内容视图,并为该内容视图设置了关于top
、bottom
、leading
、trailing
、height
和width
的约束,则:
contentSize.height = top + height + bottom
contentSize.width = leading + width + trailing
二、单内容视图使用示例
-
拖入
UIScrollView
控件,并为其添加top
、bottom
、leading
、trailing
约束; -
为
Scroll View
添加一个UIView
子控件,并为其添加top
、bottom
、leading
、trailing
约束,该子控件即为Scroll View
的内容视图;
-
上述约束添加完成后,将出现如下所示的错误,根据『原理』部分解释,我们知道
Scroll View
无法仅仅凭借上述四个间距类约束来计算得到自己的contentSize
属性值,还需要为内容视图添加height
和width
约束;
-
为内容视图添加固定的
height
和width
约束。
三、多内容视图使用示例
同上,拖入
UIScrollView
控件,并为其添加top
、bottom
、leading
、trailing
约束;-
为
Scroll View
添加三个UIView
子控件,并为它们分别添加top
、leading
、trailing
和height
约束;
为位于最底部的内容视图添加
bottom
约束,则ScrollView.contentSize.height = ContentView1.top + ContentView1.height + ContentView2.top + ContentView2.height + ContentView3.top + ContentView3.height + ContentView3.bottom
;-
为其中任意一个内容视图相对于主
View
添加Equal Widths
约束,则ScrollView.contentSize.width = ContentView1.leading + ContentView1.width + ContentView1.trailing
;
注意:
上述示例能够使得Scroll View
在垂直方向滚动,请思考如何设置约束才能使得它在水平方向上滚动呢?
四、推荐使用UIStackView
作为内容视图
iOS 9.0
提供的UIStackview
简化了布局操作,本人推荐将UIStackView
作为UIScrollView
内容视图使用,这样可以减少很多的约束设置,同时达到多内容视图的使用目的。以垂直方向滚动为例,我们仅需要设置UIStackView
的top
、bottom
、leading
、trailing
和width
约束,以及设置UIStackView
的所有子控件的height
约束就可以简单实现。
结束语
除了上述几中方法外,还有很多关于UIScrollView
内容视图的约束设置方法。但万变不离其宗,我们只需要记住UIScrollView
的contentSize
属性值的计算原理,就可以解决几乎所有关于UIScrollView
的约束错误问题。