iOS-屏幕适配实现(SnapKit)

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() 设置属性除以因子后的值

设置控件布局属性

布局属性 说明
尺寸 width、height、size
边距 left、top、right、bottom、leading、trailing
中心点 center、centerX、centerY
边界 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 }

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

设置约束偏移

方法 参数 说明
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为我们提供了三个默认的方法,required、high、medium、low,优先级最大数值是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排查
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容