美文网首页
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 的使用

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