zoukankan      html  css  js  c++  java
  • Swift SnapKit自动布局的使用

    这里只有一切基础的Demo,后期会继续更新的

    • 举例说明,创建一个红色UIView,居中,宽高都是50
            let redView : UIView = UIView.init()
            redView.backgroundColor = UIColor.red
            self.view.addSubview(redView)
            redView.snp.makeConstraints { (make) in
                make.width.height.equalTo(50) //宽度和高度设置为50
                make.center.equalTo(self.view)//在self.view上居中
            }
    • 创建一个红色UIView,顶部100,左右间距各10,高度50
            let redView : UIView = UIView.init()
            redView.backgroundColor = UIColor.red
            self.view.addSubview(redView)
            redView.snp.makeConstraints { (make) in
                make.height.equalTo(50)
                make.top.equalTo(100)
                make.left.equalTo(10)
                make.right.equalTo(-10)
            }
    • 创建一个蓝色的UIView,顶部在红色view的底部,做间距和宽度和红色view一样,高度是红色view的一半,以下两个demo是等价的
            let blue : UIView = UIView.init()
            blue.backgroundColor = UIColor.blue
            self.view.addSubview(blue)
            blue.snp.makeConstraints { (make) in
                make.top.equalTo(redView.snp.bottom)
                make.left.equalTo(redView.snp.left)
                make.width.equalTo((redView.snp.width))
                make.height.equalTo((redView.snp.height)).multipliedBy(0.5)
            }
    
           let blue : UIView = UIView.init()
            blue.backgroundColor = UIColor.blue
            self.view.addSubview(blue)
            blue.snp.makeConstraints { (make) in
                make.top.equalTo(redView.snp.bottom)
                make.left.equalTo(redView)
                make.width.equalTo((redView))
                make.height.equalTo((redView)).multipliedBy(0.5)
            }
    
    • 创建一个蓝色的UIView,left,top,bottom,right都和redView相等
            let blue : UIView = UIView.init()
            blue.backgroundColor = UIColor.blue
            self.view.addSubview(blue)
            blue.snp.makeConstraints { (make) in
                make.edges.equalTo(redView)
            }
    • 创建一个blueView,相对于父视图left,top,bottom,right都是10
          let blue : UIView = UIView.init()
            blue.backgroundColor = UIColor.blue
            self.view.addSubview(blue)
            blue.snp.makeConstraints { (make) in
                make.edges.equalTo(self.view).inset(UIEdgeInsets.init(top: 10, left: 10, bottom: 10, right: 10))
            }
    
    • 创建一个居中的lab,并设置最大或者最小的宽度
            let lab:UILabel = UILabel.init()
            lab.textAlignment = .center
            lab.backgroundColor = UIColor.red
            lab.numberOfLines = 0
            lab.text = "我是一个UILabel"
            self.view.addSubview(lab)
            lab.snp.makeConstraints { (make) in
                make.center.equalTo(self.view)
    //            make.width.greaterThanOrEqualTo(200)//最小的宽度是200
                make.width.lessThanOrEqualTo(20)//最大的宽度是20
            }
    
    • 创建一个居中的lab,高度父视图的高度-100
            let lab:UILabel = UILabel.init()
            lab.textAlignment = .center
            lab.backgroundColor = UIColor.red
            lab.numberOfLines = 0
            lab.text = "我是一个UILabel"
            self.view.addSubview(lab)
            lab.snp.makeConstraints { (make) in
                make.height.equalToSuperview().offset(-100)
                make.center.equalToSuperview()
            }
    
    • 创建一个居中的lab,高度比redView高50
            let lab:UILabel = UILabel.init()
            lab.textAlignment = .center
            lab.backgroundColor = UIColor.red
            lab.numberOfLines = 0
            lab.text = "我是一个UILabel"
            self.view.addSubview(lab)
            lab.snp.makeConstraints { (make) in
                make.height.equalTo(redView).offset(50)
                make.center.equalToSuperview()
            }
    
  • 相关阅读:
    js动态绑定class(当前父级div下的子元素有没有这个class,有的话移除,没有的话添加)
    css 最简单的淡出淡出
    vue中注册全局组件并使用
    vue 安装完less之后报 Module build failed: TypeError: loaderContext.getResolve is not a function
    vue moment时间戳转日期的使用
    vue +element实现点击左侧栏目切换路由
    vue使用模板快速创建vue文件
    vue项目中全局使用vuex并注册全局属性
    npm ERR! A complete log of this run can be found in: npm ERR! D: ode ode_cache\_logs2020-06-13T08_12_35_648Z-debug.log
    cnpm的安装(超级详细版)
  • 原文地址:https://www.cnblogs.com/hualuoshuijia/p/11944341.html
Copyright © 2011-2022 走看看