美文网首页
UIScrollView 与 SnapKit 的使用

UIScrollView 与 SnapKit 的使用

作者: 风儿吹啊吹 | 来源:发表于2020-04-09 23:50 被阅读0次

要点:

UIScrollView是依靠与其子视图(subview)之间的约束来确定ContentSize的大小,如果不设置好子view的宽高度约束的话,就会造成UISCrollView显示异常。

对于UIScrollView的subview来说,它的leading/trailing/top/bottom的space是相对于UIScrollView的contentSize而不是bounds来确定的,换句话说:UIScrollView与其subview之间相对位置的约束并不会直接用于frame的计算,而是会转化为对ContentSize的计算。(摘自
:https://blog.csdn.net/longshihua/java/article/details/78441466)

错误用法

没有指定greenView的 宽高, 无法显示scrollView

    let scrollView = UIScrollView()
    scrollView.delegate = self
    scrollView.backgroundColor = .blue
    view.addSubview(scrollView)
    scrollView.snp.makeConstraints { (make) in
        make.edges.equalToSuperview()
    }

    let greenView = UIView()
    greenView.backgroundColor = .green
    scrollView.addSubview(greenView)
    greenView.snp.makeConstraints { (make) in
        make.leading.trailing.equalToSuperview()
        make.top.equalToSuperview()
        make.bottom.equalToSuperview()
    }

2、对subviews指定宽高,让最底部的view设置对scrollView的约束,可显示,但是会有布局异常。

  let scrollView = UIScrollView()
    scrollView.delegate = self
    scrollView.backgroundColor = .blue
    view.addSubview(scrollView)
    scrollView.snp.makeConstraints { (make) in
        make.edges.equalToSuperview()
    }

    let greenView = UIView()
    greenView.backgroundColor = .green
    scrollView.addSubview(greenView)
    greenView.snp.makeConstraints { (make) in
        make.top.leading.equalToSuperview()
        make.width.equalTo(300)
        make.height.equalTo(100)
    }

    let redView = UIView()
    redView.backgroundColor = .red
    scrollView.addSubview(redView)
    redView.snp.makeConstraints { (make) in
        make.leading.equalToSuperview()
        make.top.equalTo(greenView.snp.bottom)
        make.width.equalTo(300)
        make.height.equalTo(1000)
        make.bottom.equalToSuperview() // 不添加底部的约束 则无法滚动
    }
正确用法

对scrollView 添加contentView,让subviews添加对contentView的约束,而contentView只需处理contentSize的宽度

    let scrollView = UIScrollView()
    scrollView.delegate = self
    scrollView.backgroundColor = .blue
    view.addSubview(scrollView)
    scrollView.snp.makeConstraints { (make) in
        make.edges.equalToSuperview()
    }
    
    contentView = UIView()
    contentView.backgroundColor = .yellow
    scrollView.addSubview(contentView)
    contentView.snp.makeConstraints { (make) in
        make.edges.equalToSuperview()
        make.width.equalTo(300) 
        // 设置contentSize的 width值
    }
    
    let redView = UIView()
    redView.backgroundColor = .red
    contentView.addSubview(redView)
    redView.snp.makeConstraints { (make) in
        make.leading.top.trailing.equalToSuperview()
        make.height.equalTo(400)
    }
    
    let greenView = UIView()
    greenView.backgroundColor = .green
    contentView.addSubview(greenView)
    greenView.snp.makeConstraints { (make) in
        make.leading.trailing.equalToSuperview()
        make.height.equalTo(600)
        make.top.equalTo(redView.snp.bottom)
        make.bottom.equalToSuperview() 
        // 固定底部约束,设置好contentSize的 height值
    }

相关文章

  • UIScrollView 与 SnapKit 的使用

    要点: UIScrollView是依靠与其子视图(subview)之间的约束来确定ContentSize的大小,如...

  • SnapKit布局UIScrollView

    直接上代码,看ViewDidLoad方法中的注释。一共10个约束,UIScrollView 上下左右4个,其子试图...

  • SnapKit 源码解读

    SnapKit 是一个使用 Swift 编写而来的 AutoLayout 框架, 通过使用 Snapkit, 我们...

  • SnapKit源码解析

    简介 什么是Snapkit SnapKit是一个使用 Swift 编写而来的AutoLayout框架,通过使用Sn...

  • UIScrollView的使用

    UIScrollView的使用 UIScrollView的基本使用 将UIScrollView添加到控件上 设置c...

  • UIScrollView的使用

    UIScrollView的使用 UIScrollView的基本使用 将UIScrollView添加到控件上 设置c...

  • UIScrollView与AutoLayout

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

  • Swift自动布局SnapKit的进阶篇

    前言 在上篇文章中,我们初步学习了SnapKit的基础使用方法,文章:Swift自动布局SnapKit的详细使用介...

  • SnapKit的使用

    SnapKit是Masonry的Swift版,项目发布至今大约1年的时间,已经在github上有两千多个star ...

  • SnapKit的使用

    Snapkit是一个AutoLayout的封装库,是Masonary在Swift中的代替品。通过SnapKit,我...

网友评论

      本文标题:UIScrollView 与 SnapKit 的使用

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