SnapKit使用学习

作者: coderhlt | 来源:发表于2018-08-17 17:04 被阅读33次

    使用注意:先添加控件到父视图,再设置约束

    一、基本使用实践

          let redview = UIView()
            redview.backgroundColor = UIColor.red
            view.addSubview(redview)
            redview.snp.makeConstraints { (make) in
                make.width.height.equalTo(100)//宽高设置为100
                make.top.equalTo(view.snp.top).offset(100)//顶部约束相对于父控件的顶部偏移了100
                make.centerX.equalTo(self.view.snp.centerX)//使控件的x轴中心点和父控件中心点对齐
            }
    
          let redview = UIView()
            redview.backgroundColor = UIColor.red
            view.addSubview(redview)
              redview.snp.makeConstraints { (make) in
                make.size.equalTo(CGSize(width: 100, height: 100))//宽高设置为100
                make.top.equalToSuperview().offset(100) //顶部约束相对于父控件的顶部偏移了100
                make.centerX.equalToSuperview()//使控件的x轴中心点和父控件中心点对
            }
    
          let redview = UIView()
            redview.backgroundColor = UIColor.red
            view.addSubview(redview)
            redview.snp.makeConstraints { (make) in
                   make.size.equalTo(100) //宽高设置为100
                   make.top.equalToSuperview().offset(100)
                   make.centerX.equalToSuperview()
            }
    
    
     let redview = UIView()
             redview.backgroundColor = UIColor.red
            view.addSubview(redview)
            redview.snp.makeConstraints { (make) in
                make.leading.equalToSuperview().offset(30)
                make.trailing.equalToSuperview().offset(-30)
                make.top.equalToSuperview().offset(100)
                make.height.equalTo(40)
            }
    
    let redview = UIView()
            redview.backgroundColor = UIColor.red
           view.addSubview(redview)
           redview.snp.makeConstraints { (make) in
               make.width.equalToSuperview().dividedBy(2)//宽是父控件宽度的1/2
               make.centerX.equalToSuperview()
               make.top.equalToSuperview().offset(100)
               make.height.equalTo(60)
           }
    
    
    let redview = UIView()
            redview.backgroundColor = UIColor.red
           view.addSubview(redview)
            redview.snp.makeConstraints { (make) in
               make.width.equalTo(100)
               make.centerX.equalToSuperview()
               make.top.equalToSuperview().offset(100)
               make.height.equalTo(redview.snp.width).multipliedBy(2)//高等于宽的2倍
           }
    
    let redview = UIView()
            redview.backgroundColor = UIColor.red
           view.addSubview(redview)
     redview.snp.makeConstraints { (make) in
               make.width.equalTo(100);
               make.centerX.equalToSuperview()
               make.top.equalToSuperview().offset(100);
          make.bottom.equalTo(redview.snp.top).multipliedBy(3)
               
           }
    
           let redview = UIView()
           redview.backgroundColor = UIColor.red
           view.addSubview(redview)
           redview.snp.makeConstraints { (make) in
           make.leading.top.equalToSuperview().offset(100)
           make.right.bottom.equalTo(view).offset(-100)
           }
    
            let redview = UIView()
            redview.backgroundColor = UIColor.red
            view.addSubview(redview)
            redview.snp.makeConstraints { (make) in
            make.leading.equalTo(view).offset(100)
            make.trailing.equalTo(view).offset(-100)
            make.top.equalTo(view.snp.top).offset(100)
            make.bottom.equalToSuperview().offset(-100)
            }
    
           let redview = UIView()
            redview.backgroundColor = UIColor.red
            view.addSubview(redview)
     let redview = UIView()
            redview.backgroundColor = UIColor.red
            view.addSubview(redview)
            redview.snp.makeConstraints { (make) in
              make.edges.equalTo(UIEdgeInsetsMake(100, 100, 100, 100))
            }
          
    

    二 、UILable自适应

    • 1、缺少一个竖直或水平方向的约束让宽或高自适应
        let lable = UILabel()
            lable.backgroundColor=UIColor.yellow
            lable.numberOfLines = 0
            view.addSubview(lable)
            lable.text =
            "或许在某个生命宇宙,有幸与时光擦身邂逅,盛满兴衰的枯荣或许在某个生命宇宙,有幸与时光擦身邂逅,盛满兴衰的枯荣或许在某个生命宇宙,有幸与时光擦身邂逅,盛满兴衰的枯荣"
            lable.snp.makeConstraints { (make) in
            make.top.leading.equalToSuperview().offset(100)
            make.width.equalTo(100)
            }
    
    
    • 2、在一个范围内约束自适应
          let lable = UILabel()
            lable.backgroundColor=UIColor.yellow
            lable.numberOfLines = 0
            view.addSubview(lable)
            lable.text =
            "或许"
            lable.snp.makeConstraints { (make) in
            make.top.leading.equalToSuperview().offset(100)
            make.width.greaterThanOrEqualTo(100)//宽度约束最小为100
            make.width.lessThanOrEqualTo(200)//宽度超过100,在200以内宽度自适应大小,宽度约束最大是200
            }
    

    三、父控件的高度随子控件的高度改变而改变

    1、子控件约束设置

    import UIKit
    import SnapKit
    class LogView: UIView {
        override init(frame: CGRect) {
            super.init(frame: frame)
            let imageview = UIImageView()
            imageview.backgroundColor = UIColor.yellow
            imageview.image = UIImage(named: "visitordiscover_image_message")
            self.addSubview(imageview)
            imageview.snp.makeConstraints { (make) in
                make.top.equalToSuperview().offset(30)
                make.width.equalTo(100)
                make.centerX.equalToSuperview()
                make.height.equalTo(100)//子控件高度一定
                make.bottom.equalToSuperview().offset(-30)//子控件内容粘着底部约束
            }
           
        }
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    }
    

    2、父控件约束设置

      override func viewDidLoad() {
            super.viewDidLoad()
            let logview = LogView()
            logview.backgroundColor = UIColor.green
            view.addSubview(logview)
            logview.snp.makeConstraints { (make) in
              make.centerY.equalTo(self.view)
              make.left.right.equalTo(self.view)
             //高度约束不设置,这样高度就会被子控件撑开
            }
        }
    

    相关文章

      网友评论

      • lcc小莫:加油,你永远是最棒的
        coderhlt:@lcc小莫 和Masonry基本上一摸一样

      本文标题:SnapKit使用学习

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