XIB中UIScrollView的自动布局

XIB中UIScrollView的自动布局

使用场景我们在使用XIB或者StoryBoard的时候 经常会使用到UIScrollView ,但是如果想使用XIb 进行UIScrollView自动布局(AutoLayout)复杂 ,因为scrollview本身contentSize、contentInsets等复杂的特性导致

让我们来看下 在XIB中UIScrollView的自动布局的几种方法

效果

这里我们以竖屏为例

1 . 第一步 --> ScrollView

新创建一个项目 ,拖动一个UIScrollView到StoryBoard中 并给ScrollView添加约束

1-拖动一个ScrollView

1-给ScrollView添加相对于SuperView的约束

2 . 第二步 -->Contain View

在拖动一个View(将其命名为Contain VIew)到ScrollView上,然后添加上下左右的约束

注意:这个 ScrollView就是根据这个Contain View 来确定ContentSize的大小的

2-添加Contain View约束

特别提醒添加完 Contain View的约束后~Xcode 会报错 暂时先别管

根据横竖屏 设置Contain View的额外约束

我们需要先确定 我们ScrollView是横屏滚动还是竖屏滚动

如果 横竖屏都需要滚动的话 就不需要添加下面的约束

a .横屏滚动

3-根据横竖屏 添加Contain View的额外约束条件

3 . 设置Contain View的高度(如果是横屏的就要设置宽度)

通过设置Contain View的宽度来确定 ScrollView 的高度

如果想动态设置ScrollView的高度,我们可以将这个高度的约束 拉出去~然后该成属性

然后在修改

4-ContainView的高度约束

4.如果是确定的宽度 可以在updateViewConstraints方法中修改,也可以在别的地方修改

//更新约束- (void)updateViewConstraints{    [superupdateViewConstraints];//设置ContentSize为3个屏幕的宽度self.ViewHeight.constant=CGRectGetHeight([UIScreenmainScreen].bounds)*3;}

3.第三步 -->添加Contain View内的UI控件

现在就可以 竖直滚动了 只是ScrollView里面没有元素而已 有的就是 一个 Contain View的宽高的 空间

所以我们现在要做的就是 向一个View(Contain View)中添加 内容

3-为需要添加的三个视图 添加约束

然而的上面的约束 并没有 设置 三个View的高度

我们可以 添加通过代码 手动设置 这几个视图的高度

添加视图高度的约束

通过代码设置 这几个视图的高度

//更新约束- (void)updateViewConstraints{    [superupdateViewConstraints];//设置ContentSize为3个屏幕的宽度self.ViewHeight.constant=CGRectGetHeight([UIScreenmainScreen].bounds)*3;//第二个视图top距离SuperView的距离 也就是第一个视图的高度self.secondViewTop.constant=CGRectGetHeight([UIScreenmainScreen].bounds);//第三个视图top 距离SuperView的距离 也就是第二个视图的高度self.threeViewTop.constant=CGRectGetHeight([UIScreenmainScreen].bounds)*2;//第三个视图的高度= ContentSize.height(self.ViewHeight.constant)-(self.threeViewTop.constant)}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容