res排气auto怎么设置swift 模态presnet全屏 swift布局

新闻资讯2026-04-21 00:34:59

为了适应各种屏幕尺寸,iOS 6后引入了自动布局(Auto Layout)的概念,通过使用各种 Constraint(约束)来实现页面自适应弹性布局。

在 StoryBoard 中使用约束实现自动布局很方便,但如果用纯代码来设置约束就很麻烦了。这里向大家推荐一个好用的第三方布局库:SnapKit(其前身是 Masonry,一个OC版的布局库)

 

1.SnapKit介绍 

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

GtiHub地址:
https:///SnapKit/SnapKit

2.SnapKit配置

res排气auto怎么设置swift 模态presnet全屏 swift布局_https://www.jmylbn.com_新闻资讯_第1张

2)在 工程 -> General -> Embedded Binaries 中点击加号,添加SnapKit库到项目中来 

res排气auto怎么设置swift 模态presnet全屏 swift布局_https://www.jmylbn.com_新闻资讯_第2张

3.先看一个简单的使用样例
在页面正中央放置一个100*100的正方形view

示例代码如下:

import UIKit

import SnapKit

class ViewController: UIViewController {

    lazy var boxView: UIView = {

        let view = UIView()

        return view

    }()

    override func viewDidLoad() {

        super.viewDidLoad()

        self.boxView.backgroundColor = UIColor.orangeColor()

        self.view.addSubview(self.boxView)

        self.boxView.snp_makeConstraints { (make) in     

            make.width.equalTo(100)

            make.height.equalTo(100)

            make.center.equalTo(self.view)

        }  

    }

}

 由于长宽都一样,我们还可以串连视图属性,增加可读性:

示例代码如下:

import UIKit

import SnapKit

class ViewController: UIViewController {

    lazy var boxView: UIView = {

        let view = UIView()

        return view

    }()

    override func viewDidLoad() {

        super.viewDidLoad()

        self.boxView.backgroundColor = UIColor.orangeColor()

        self.view.addSubview(self.boxView)

        self.boxView.snp_makeConstraints { (make) in     

    make.width.height.equalTo(100)

            make.center.equalTo(self.view)

        }  

    }

}

4.SnapKit的使用方法

通过 snp_makeConstraints 方法给view添加约束,约束有几种,分别是边距,宽,高,左上右下距离,基准线。同时,添加过约束后可以有修正,修正有位移修正(inset、offset)和倍率修正(multipliedBy)

语法一般是: make.equalTo 或 make.greaterThanOrEqualTo 或 make.lessThanOrEqualTo + 倍数和位移修正。
.equalTo:等于 
.lessThanOrEqualTo:小于等于
.greaterThanOrEqualTo:大于等于

注意: 使用 snp_makeConstraints 方法的元素必须事先添加到父元素的中,例如:self.view.addSubview(view)

5.约束条件参数支持如下三种类型:

(1)视图属性(ViewAttribute)

 

 

 

 

 

 

 

 

 

 

 

//使当前视图对象的中心x坐标小于等于视图view2的左边的x坐标

make.centerX.lessThanOrEqualTo(view2.snp_left)

比如想让view.left 大于等于 label.left:

make.left.greaterThanOrEqualTo(label)

这个其实等价于:

make.left.greaterThanOrEqualTo(label.snp_left)

(3)严格检测(Strick Checks)

比如将宽度和高度属性设置为常量值:

make.height.equalTo(20)

make.width.equalTo(20)

.equalTo(42)

 

6.给视图的各种属性设置约束

(1)width、height属性

自动布局允许宽度、高度设置为常量值。

make.height.equalTo(20)

make.width.equalTo(
self
.buttonSize.width)

//当前视图与label的顶部齐平

.equalTo(label.snp_top)

2) left、right、top、centerX、centerY等其他属性

这些属性直接设置常量值,表示他们相对于父容器的相对约束条件。比如我们将绿色方块放置橙色方块内部的右下角位置。

res排气auto怎么设置swift 模态presnet全屏 swift布局_https://www.jmylbn.com_新闻资讯_第3张

import UIKit

import SnapKit

class ViewController: UIViewController {

    //外部方块

    lazy var boxOutter: UIView = {

        let view = UIView()

        return view

    

    }()

    

    //内部方块

    lazy var boxInner: UIView = {

        let  view = UIView()

        return view

        

    }()

    override func viewDidLoad() {

        super.viewDidLoad()

        self.boxOutter.backgroundColor = UIColor.orangeColor()

        self.view.addSubview(self.boxOutter)

        self.boxInner.backgroundColor = UIColor.greenColor()

        self.boxOutter.addSubview(self.boxInner)

        

        self.boxOutter.snp_makeConstraints { (make) in

            make.width.height.equalTo(200)

            make.center.equalTo(self.view)

        }

        

        self.boxInner.snp_makeConstraints { (make) in

            make.width.height.equalTo(100)

            make.right.equalTo(0)

            make.bottom.equalTo(0)

        }

        

        

    }

 

}

 

当然也可以使用与其他视图的关系来添加约束。比如:下面绿色方块视图大小同上面橙色方块相同,下面视图与上面视图左侧平齐,下面视图顶部与上面视图底部平齐。

res排气auto怎么设置swift 模态presnet全屏 swift布局_https://www.jmylbn.com_新闻资讯_第4张

(3)edges(边缘)

//让当前视图 的 上下左右(top,left,bottom,right) 等于 view2

make.edges.equalTo(view2)

(4)size(尺寸)

//当前视图宽高 >= titleLabel

make.size.greaterThanOrEqualTo(titleLabel)

(5)center(中心)

//当前视图与 button1中心相同 (centerX 和 centerY)

make.center.equalTo(button1)

7,位移修正与倍率修正

(1)内位移修正:inset

比如下图中绿色视图view,它距离父视图上、左、下、右边距分别是10、15、20、25

res排气auto怎么设置swift 模态presnet全屏 swift布局_https://www.jmylbn.com_新闻资讯_第5张

import UIKit

import 
SnapKit

 

class 
ViewController

UIViewController 
{

 

//外部方块

lazy 
var 
boxOutter = 
UIView
()

//内部方块

lazy 
var 
boxInner = 
UIView
()

 

override 
func 
viewDidLoad() {

super
.viewDidLoad()

 

boxOutter.backgroundColor = 
UIColor
.orangeColor()

self
.view.addSubview(boxOutter)

boxInner.backgroundColor = 
UIColor
.greenColor()

boxOutter.addSubview(boxInner)

 

boxOutter.snp_makeConstraints { (make) -> 
Void 
in

make.width.height.equalTo(200)

make.center.equalTo(
self
.view)

}

 

boxInner.snp_makeConstraints

}

}

上面边距的偏移设置实际上相当于如下形式:

 
.equalTo(boxOutter).offset(10)

make.left.equalTo(boxOutter).offset(15)

make.bottom.equalTo(boxOutter).offset(-20)

make.right.equalTo(boxOutter).offset(-25)

 

(2)外位移修正:offset 

下面让绿色视图比橙色视图宽度加50,高度减50。

res排气auto怎么设置swift 模态presnet全屏 swift布局_https://www.jmylbn.com_新闻资讯_第6张

import UIKit

import 
SnapKit

 

class 
ViewController

UIViewController 
{

 

//外部方块

lazy 
var 
boxOutter = 
UIView
()

//内部方块

lazy 
var 
boxInner = 
UIView
()

 

override 
func 
viewDidLoad() {

super
.viewDidLoad()

 

boxOutter.backgroundColor = 
UIColor
.orangeColor()

self
.view.addSubview(boxOutter)

boxInner.backgroundColor = 
UIColor
.greenColor()

boxOutter.addSubview(boxInner)

 

boxOutter.snp_makeConstraints { (make) -> 
Void 
in

make.width.height.equalTo(200)

make.center.equalTo(
self
.view)

}

 

boxInner.snp_makeConstraints

}

}

 

3)倍率修正:multipliedBy 

下面将绿色视图的尺寸设置成橙色视图一半大小。

res排气auto怎么设置swift 模态presnet全屏 swift布局_https://www.jmylbn.com_新闻资讯_第7张

import UIKit

import 
SnapKit

 

class 
ViewController

UIViewController 
{

 

//外部方块

lazy 
var 
boxOutter = 
UIView
()

//内部方块

lazy 
var 
boxInner = 
UIView
()

 

override 
func 
viewDidLoad() {

super
.viewDidLoad()

 

boxOutter.backgroundColor = 
UIColor
.orangeColor()

self
.view.addSubview(boxOutter)

boxInner.backgroundColor = 
UIColor
.greenColor()

boxOutter.addSubview(boxInner)

 

boxOutter.snp_makeConstraints { (make) -> 
Void 
in

make.width.height.equalTo(200)

make.center.equalTo(
self
.view)

}

 

boxInner.snp_makeConstraints { (make) -> 
Void 
in

make.center.equalTo(boxOutter)

// make width = superview.width / 2, height = superview.height / 2

make.size.equalTo(boxOutter).multipliedBy(0.5)

}

}

}