美文网首页XIB 自动布局
UIScrollView与AutoLayout

UIScrollView与AutoLayout

作者: 5db962eb784e | 来源:发表于2017-03-09 20:34 被阅读42次

    总结一下,最近遇到的UIScrollView与AutoLayout在使用中的一些问题。

    UIScrollView之前直接使用的情况比较少,所以对它的原理不是很清楚。这里其他的UIScrollView基础不说了,只说说它的精髓contentSize。

    1. contentSize默认情况下width,height都为0.

    2. contentSize为0并不会影响它的显示.

    3. contentSize小于UIScrollView的frame的size,UIScrollView是不会滑动的.

    4. 只需要更新contentSize的大小(保证比自身的frame的size大),就会自动出现滚动条,并不需要调用其他的方法(setNeedsLayout等).


    下面说说,在Storyboard中,使用UIScrollView,常见做法。

    1. 在View中添加一个UIScrollView.

    2. 设置UIScrollView的上下左右边距,都设置为0.

    3. 添加一个contentView“盖”在UIScrollView上面,并且设置它的上下左右边距为0,View的宽与ScrollView的宽相同,高也相同。

    4. 然后就可以把自己要添加的View 在添加到contentView上面。

    这里有人要问了,为什么要contentView,我直接把view“贴”在scrollView上面不行吗?

    我们来看看直接贴到scrollView上面,会出现什么问题。

    如上图,我们想添加一个view,高度固定120,上边距10,左右边距各为10。往scrollView上面一贴,直接报错。

    错误原因:

    为什么呢?

    因为scrollView的contentSize会根据它的子视图进行计算,而这里我们的view左右边距又依赖于scrollView,根本算不出来。所以报错了。

    上面的这个原因你可能不信,不过我可以证明给你看。我们把view的宽度固定到200,然后再给一下边距10(这样scrollView就可以计算出contentSize),我们也可以算出,scrollView的contentSize,宽为10(左边距)+ 200(宽度) + 10 (右边距),高为10(上边距)+ 120(高度)+ 10(下边距)。

    然后我们运行的结果如下:

    跟我们的预期结果吻合。



    按照上面的步骤设置完成之后,是不是就可以高枕无忧了?

    我原来是这样想,后来才发现并不是。

    我们首先来归一下类,自定义的View在contentView上面的布局的形式有几种。

    1. 高度固定,且总高度没有超过contentView的

    这种最简单,直接往上面码就行了。

    2. 高度都固定,但是总高度超过了contentView

    例如下面的,最后一个红色的View都超过了contentView,我们还是先直接码,但是最后发现,并不能拖动。

    怎么办?

    很简单,设置contentSize,使contentSize的高度大于你的View的总高度就可以滑动了。

    - (void)viewDidAppear:(BOOL)animated{

    [super viewDidAppear:animated];

    _scrollView.contentSize=CGSizeMake(375,2000); //2000是随便设置,保证高度

    }

    好像是可以滑动了,但是细心一点可以发现,这里其实有一个bug,我们希望contentView总是能够把我们的view完全的“包住”,但是这里,并没有,仔细看上图,黄色的是scrollView,蓝色的是contentView,它并没有将我们的view包住。这里就需要动态的更改一下contentView的高度。

    我们直接修改contentView的frame,企图增加它的高度,但是不出意外是失败了。这里我们就不演示了。为什么了,因为我们前面设置它的高度约束,contentView的高度=scrollView的高度。

    所以这里我们就需要更改一下contentView的高度约束,然后可以动态的调整它。


    然后在运行时更改它

    完成。

    3. 一部分View高度固定,一部分不固定

    //TODO: 这个下次再说。

    相关文章

      网友评论

        本文标题:UIScrollView与AutoLayout

        本文链接:https://www.haomeiwen.com/subject/eqmwgttx.html