Swift一步步学习ios开发布局Swift学习

SnapKit使用学习

2018-08-17  本文已影响33人  coderhlt

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

一、基本使用实践

      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自适应

    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)
        }

      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)
         //高度约束不设置,这样高度就会被子控件撑开
        }
    }
上一篇下一篇

猜你喜欢

热点阅读