IOS UIScrollView的自动布局

写在开始的话:如果感觉博文解决了你的问题,想转载本文,请尊重劳动成果,注明转载来源,谢谢!

这两天刚研究完成IOS的自动布局,然后想在UIScrollView里面也设置自动布局,完成上下滑动。刚开始感觉UIScrollView的自动布局也跟其他的一样简单,但只有经过尝试才知道并不像想象中的简单。

1.我们需要做什么。

我们需要自己完成一个类似于collection view 的功能。完成的效果图如下:


上面的标题栏整体是一个view,下面的工作区是scrollview。自动布局后横屏效果如下:

3.view 结构


最外层的view是根视图,第一个view(包含两个button,和imageview的)是标题栏。第二个view(包含scrollview的)是scrollview的滑动区,就是上图的工作区。
之所以这么设计就是将复杂的布局简单化,这样原先标题栏好几个视图和scrollview的自动布局就变成一个view和scrollview的自动布局。整体框架图如下:



首先先对区域1和区域2的父view进行自动布局,他们的自动布局比较简单,写出上下左右的间距即可。
下面我们主要讲解下区域2的布局。我们平时 对 scrollview进行布局,我们知道scroll view除了自身的布局需要考虑(x, y, width, height)外,还有一个contentSize属性也必须要在布局的过程中进行确定,contentSize是UIScrollView用于确定它所 要展示的内容尺寸的大小,而这个contentSize在布局中实际上是又scroll view的子view :content view的宽和高实现的,注意: 我们不能将content view的宽和高的约束设定为由scroll view决定 (如和scroll view等宽、等高),否则,Xcode会有警告:scroll view的content size不确定!

在这种情况下,我们必须要对content view的布局约束引入scroll view之外其他参照物,我们拖进来一个辅助的view作为参照物or锚点,示意图如下:


在storyboard中这3个视图的结构如下:



通过这个参考view,确定content view的宽度和高度,尽管content view的尺寸可以不依赖于scroll view,但我们还不得不设定content view 和其父view的关系:具体而言就是要确定content view和scroll view的top, bottom, leading和trailing contstraints,这个地方可能比较具有迷惑性,原因是苹果对于这四个约束的使用在scroll view中做了变化:它不再是确定content view尺寸的依据,而是帮助scroll view中content view四周的边界(or你可以理解为留白),进而确定scroll view的contentSize属性。

contentView具体的约束如下:
 
scrllview的约束可以指定充满父view,anchor view左边、右边、上边紧挨父视图。这会xcode会让你指定anchor view的高度,否则会有黄色的提示信息。这样再指定anchor view的高度就可以了。这会你应该有疑问,anchor view不是用来确定滑动区域content view的大小的吗?如果把anchor view的大小写死,contentView也不就不能改变大小了吗?我们需要在代码里面动态的更改anchor view的大小,在我们的代码里面也就是高度,因为宽度是屏幕宽度,不用更改。anchor view的高度约束如下图所示:




这里我随便付的值,然后在代码里面动态调整高度,修改的代码如下:
    //计算contentView的高度
    int rowNums = (appDelegate.workerList.count+COLUMN_COUNT-1)/COLUMN_COUNT;
    int totalHeight = VIEW_HEIGHT * rowNums + (rowNums+1)*MIDDLE_GAP+100;
    
    //找到anchor view的高度约束修改高度
    NSArray *arrs = scrollAnchorView.constraints;
    for (NSLayoutConstraint *attr in arrs) {
        if(attr.firstAttribute == NSLayoutAttributeHeight){
            attr.constant = totalHeight;
        }
    }

    //更新父视图约束条件
    [scrollAnchorView.superview.superview updateConstraints];
上面的代码放在你需要动态确定contentview高度的地方。
修改好之后,就可以看到刚开始的效果了。demo里面的其他代码就不讲解了,需要的可以直接下载,下载地址:

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值