- 使用场景 我们在使用XIB或者StoryBoard的时候 经常会使用到UIScrollView ,但是如果想使用XIb 进行UIScrollView自动布局(AutoLayout)复杂 ,因为scrollview本身contentSize、contentInsets等复杂的特性导致
- 让我们来看下 在XIB中UIScrollView的自动布局的几种方法
效果
- 这里我们以竖屏为例
** 1 . 第一步 --> ScrollView**
- 新创建一个项目 ,拖动一个UIScrollView到StoryBoard中 并给ScrollView添加约束
** 2 . 第二步 -->Contain View**
-
在拖动一个View(将其命名为Contain VIew)到ScrollView上,然后添加上下左右的约束
注意 :这个 ScrollView就是根据这个Contain View 来确定ContentSize的大小的
特别提醒 :添加完 Contain View的约束后~Xcode 会报错 暂时先别管 -
根据横竖屏 设置Contain View的额外约束
- 我们需要先确定 我们ScrollView是
横屏
滚动还是竖屏
滚动 - 如果 横竖屏都需要滚动的话 就不需要添加下面的约束
a .横屏滚动
- 我们需要先确定 我们ScrollView是
3 . 设置Contain View的高度(如果是横屏的就要设置宽度)
- 通过设置Contain View的宽度来确定 ScrollView 的高度
- 如果想动态设置ScrollView的高度,我们可以将这个高度的约束 拉出去~然后该成属性
然后在修改
4.如果是确定的宽度 可以在updateViewConstraints方法中修改,也可以在别的地方修改
//更新约束
- (void)updateViewConstraints
{
[super updateViewConstraints];
//设置ContentSize为3个屏幕的宽度
self.ViewHeight.constant= CGRectGetHeight([UIScreen mainScreen].bounds)*3;
}
**3.第三步 -->添加Contain View内的UI控件 **
- 现在就可以 竖直滚动了 只是ScrollView里面没有元素而已 有的就是 一个 Contain View的宽高的 空间
- 所以我们现在要做的就是 向一个View(Contain View)中添加 内容
- 然而的上面的约束 并没有 设置 三个View的高度
- 我们可以 添加通过代码 手动设置 这几个视图的高度
- 通过代码设置 这几个视图的高度
//更新约束
- (void)updateViewConstraints
{
[super updateViewConstraints];
//设置ContentSize为3个屏幕的宽度
self.ViewHeight.constant= CGRectGetHeight([UIScreen mainScreen].bounds)*3;
//第二个视图top距离SuperView的距离 也就是第一个视图的高度
self.secondViewTop.constant=CGRectGetHeight([UIScreen mainScreen].bounds);
//第三个视图top 距离SuperView的距离 也就是第二个视图的高度
self.threeViewTop.constant=CGRectGetHeight([UIScreen mainScreen].bounds)*2;
//第三个视图的高度= ContentSize.height(self.ViewHeight.constant)-(self.threeViewTop.constant)
}
参考文章
如何对scrollview进行自动布局
参考Demo: GitHubDemo