iOS-屏幕适配(SnapKit)

6,056 阅读3分钟

这是我参与更文挑战的第27天,活动详情查看: 更文挑战

SnapKit简介

  • SnapKit是一个优秀的第三方自适应布局库,它可以让iOS、OS X应用更简单地实现自动布局(Auto Layout)
  • 下载链接 SnapKit

SnapKit配置

  • 使用pods方式引入类库,pod 'SnapKit'
  • 引入头文件 import SnapKit

SnapKit使用

示例:

testView.snp.makeConstraints { (make) in
    make.left.equalToSuperview().offset(50)
    make.right.equalToSuperview().offset(-50)
    make.top.equalToSuperview().offset(50)
    make.bottom.equalToSuperview().offset(-50)
}

基本格式:(make . 指定其的一个属性.约束关系)

make.attr.constrains

make:可认为是要布局的view的代理 constrains:约束可能是多级的组合,比如make.left.equalToSuperview().offset(50)的两级组合,显示找到父view的左边位置,再向右(X轴)移动50点

给控件添加、更新约束、引用约束、停用、启用

  • 添加新的约束

    testView.snp.makeConstraints { (make) in
      
    }
    
  • 删除控件以前所有约束,添加新约束

    testView.snp.remakeConstraints { (make) in
      
    }
    
  • 更新约束,写哪条更新哪条,其他约束不变

    testView.snp.updateConstraints { (make) in
     
    }
    
  • 引用约束,声明一个局部变量或者类属性来引用要修改的约束

    var topConstraint: Constraint? = nil
      
    override func viewDidLoad() {
        super.viewDidLoad()        
    
        let testView = UIView()
        testView.backgroundColor = UIColor.red
        self.view.addSubview(testView)
          
        testView.snp.makeConstraints { (make) in
            self.topConstraint = make.left.equalToSuperview().offset(100).constraint
            make.right.equalToSuperview().offset(-100)
            make.top.equalToSuperview().offset(100)
            make.bottom.equalToSuperview().offset(-100)
         }
    }  
    
  • 停用

    self.topConstraint?.deactivate()
    
  • 启用

    self.topConstraint?.activate()
    

设置约束关系

约束关系说明
equalTo()设置属性等于某个数值
greaterThanOrEqualTo()设置属性大于或等于某个数值
lessThanOrEqualTo()设置属性小于或等于某个数值
multipliedBy()设置属性乘以因子后的值
dividedBy()设置属性除以因子后的值

设置控件布局属性

布局属性说明
尺寸widthheightsize
边距lefttoprightbottomleadingtrailing
中心点centercenterXcenterY
边界edges
//iOS8之后Masonry新出了几个属性:
//距离边框的距离,等同于选中Storyboard的Constrain to margins后加约束public var leftMargin: SnapKit.ConstraintMakerExtendable { get }
public var rightMargin: SnapKit.ConstraintMakerExtendable { get }
public var topMargin: SnapKit.ConstraintMakerExtendable { get }
public var bottomMargin: SnapKit.ConstraintMakerExtendable { get }
public var leadingMargin: SnapKit.ConstraintMakerExtendable { get }
public var trailingMargin: SnapKit.ConstraintMakerExtendable { get }
public var centerXWithinMargins: SnapKit.ConstraintMakerExtendable { get }
public var centerYWithinMargins: SnapKit.ConstraintMakerExtendable { get }

其中leadinglefttrailingright 在正常情况下是等价的,但是当一些布局是从右至左时(比如阿拉伯文) 则会对调

设置约束偏移

方法参数说明
offset(CGFloat offset)CGFloat控件属性相对于参照物偏移多少
insets(MASEdgeInsets insets)MASEdgeInsets控件四边相对于参照物偏移多少

offset示例

testView.snp.makeConstraints { (make) in
      make.left.equalToSuperview().offset(20)
      make.right.equalToSuperview().offset(-20)
      make.top.equalToSuperview().offset(20)
      make.bottom.equalToSuperview().offset(-20)
}

insets示例

//具体父控件四周都是20间距
testView.snp.makeConstraints { (make) in
      make.edges.equalToSuperview().inset(UIEdgeInsets.init(top: 20, left: 20, bottom: 20, right: 20))
}

设置约束优先级

  • SnapKit为我们提供了三个默认的方法,requiredhighmediumlow,优先级最大数值是1000
    public static var required: ConstraintPriority {
          return 1000.0
    }
    public static var high: ConstraintPriority {
          return 750.0
    }
    public static var medium: ConstraintPriority {
          #if os(OSX)
              return 501.0
          #else
              return 500.0
          #endif
     }
    public static var low: ConstraintPriority {
          return 250.0
     }
    
  • 自己设置优先级的值,可以通过priority()方法来设置
    testView.snp.makeConstraints { (make) in
        make.center.equalToSuperview()
        make.width.equ  alTo(100).priority(ConstraintPriority.low)
        make.width.equalTo(100).priority(ConstraintPriority.high)
       
        make.height.equalTo(100).priority(200)
        make.height.equalTo(50).priority(800)
    }
    

SnapKit 注意

  • 使用SnapKit添加约束之前,需要在addSubview之后才能使用,否则会导致崩溃
  • 在添加约束时常会出现一些错误,约束出现问题的原因一般就是两种:约束冲突和缺少约束。对于这两种问题,可以通过调试和log排查

常见布局屏幕适配的方式