XZ_Swift之苹果原生自动布局的使用

最新推荐文章于 2021-11-02 16:55:33 发布

原创最新推荐文章于 2021-11-02 16:55:33 发布 · 869 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#自动布局 #VFL格式布局 #NSLayoutCo #addConstra #constraint

Swift 专栏收录该内容

41 篇文章

订阅专栏

本文介绍自动布局的核心公式与构造函数，并通过实例演示如何使用自动布局进行界面设计，包括视图定位及大小设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动布局核心公式
“view1.attr1 = view2.attr2 * multiplier + constant”
核心概念：即任何一个视图的属性都可以参照其他视图的某一个属性乘以乘积加上一个常数
relatedBy relation (等于/大于等于/小于等于）
constant（在x轴：负数向左，正数向右；在y轴：负数向上，正数向下）
自动布局构造函数

self.addConstraint(NSLayoutConstraint.init(item: 视图,
attribute: 约束属性,
relatedBy: 约束关系,
toItem: 参照视图,
attribute: 参照属性,
multiplier: 乘积,
constant: 约束数值))

如果指定宽 / 高约束
-参照视图设置为 nil
-参照属性选择 .notAnAttribute
自动布局类函数

self.addConstraint(NSLayoutConstraint.constraints(withVisualFormat: VFL公式,
options: [],
metrics: 约束数值字典[String: 数值],
views: 视图字典[String: 子视图]))

VFL 可视化格式语言
· H 水平方向
· V 水平方向
· I 边界
· [ ] 包含控件的名称字符串,对应关系在 views 字典中定义
· ( ) 定义控件的宽/高，可以在 metrics 中指定
提示：VFL 通常用于连续参照关系，如果遇到居中对齐，通常直接使用参照；
居中对齐使用VFL不好表示，居中很难说怎么居中，居中使用构造函数比较合适

注意：代码的原生的自动布局，需要取消 autoresizing；
autoresizing 和 autolayout 是不能共存的，纯代码的使用 autoresizing， xib 布局使用 autolayout；先使用下列代码取消autoresizing，自动布局才会起作用。

// 取消自动布局
    for subview in subviews {
            subview.translatesAutoresizingMaskIntoConstraints = false
    }

使用原生代码实现下图布局
这里写图片描述

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //
        setupUI()
    }

    // MARK: - 私有控件
    // 圈
    private lazy var imgIcon = UIImageView(image: UIImage.init(named: "visitordiscover_feed_image_smallicon"))
    // 主页图片
    private lazy var imgHouse = UIImageView(image: UIImage.init(named: "visitordiscover_feed_image_house"))
    // 注册按钮
    private lazy var btnRegister = UIButton(title: "注册", font: 16, normalColor: .orange, highlightedColor: .black, bgImg: "common_button_white_disable")
    // 登录按钮
    private lazy var btnLogin = UIButton(title: "登录", font: 16, normalColor: .darkGray, highlightedColor: .black, bgImg: "common_button_white_disable")
}

// MARK: - 设置页面
extension ViewController {
    func setupUI() {
        view.backgroundColor = .white
        // 1.添加到视图
        view.addSubview(imgIcon)
        view.addSubview(imgHouse)
        view.addSubview(btnRegister)
        view.addSubview(btnLogin)

        // 2.取消自动布局
        for subview in view.subviews {
            subview.translatesAutoresizingMaskIntoConstraints = false
        }

        // 3.给图片添加自动布局
        // 1>圈
        view.addConstraint(NSLayoutConstraint.init(item: imgIcon,
                                                   attribute: .centerX,
                                                   relatedBy: .equal,
                                                   toItem: view,
                                                   attribute: .centerX,
                                                   multiplier: 1,
                                                   constant: 0))
        view.addConstraint(NSLayoutConstraint.init(item: imgIcon,
                                                   attribute: .centerY,
                                                   relatedBy: .equal,
                                                   toItem: view,
                                                   attribute: .centerY,
                                                   multiplier: 1,
                                                   constant: 0))
        // 2> 主页
        view.addConstraint(NSLayoutConstraint.init(item: imgHouse,
                                                   attribute: .centerX,
                                                   relatedBy: .equal,
                                                   toItem: view,
                                                   attribute: .centerX,
                                                   multiplier: 1,
                                                   constant: 0))
        view.addConstraint(NSLayoutConstraint.init(item: imgHouse,
                                                   attribute: .centerY,
                                                   relatedBy: .equal,
                                                   toItem: view,
                                                   attribute: .centerY,
                                                   multiplier: 1,
                                                   constant: 0))
        // 3> 登录
        view.addConstraint(NSLayoutConstraint.init(item: btnRegister,
                                                   attribute: .right,
                                                   relatedBy: .equal,
                                                   toItem: view,
                                                   attribute: .centerX,
                                                   multiplier: 1,
                                                   constant: -30))
        view.addConstraint(NSLayoutConstraint.init(item: btnRegister,
                                                   attribute: .top,
                                                   relatedBy: .equal,
                                                   toItem: imgIcon,
                                                   attribute: .bottom,
                                                   multiplier: 1,
                                                   constant: 30))
        view.addConstraint(NSLayoutConstraint.init(item: btnRegister,
                                                   attribute: .width,
                                                   relatedBy: .equal,
                                                   toItem: nil,
                                                   attribute: .notAnAttribute,
                                                   multiplier: 1,
                                                   constant: 100))
        view.addConstraint(NSLayoutConstraint.init(item: btnRegister,
                                                   attribute: .height,
                                                   relatedBy: .equal,
                                                   toItem: nil,
                                                   attribute: .notAnAttribute,
                                                   multiplier: 1,
                                                   constant: 35))
        // 登录
        view.addConstraint(NSLayoutConstraint.init(item: btnLogin,
                                                   attribute: .left,
                                                   relatedBy: .equal,
                                                   toItem: view,
                                                   attribute: .centerX,
                                                   multiplier: 1,
                                                   constant: 30))
        view.addConstraint(NSLayoutConstraint.init(item: btnLogin,
                                                   attribute: .top,
                                                   relatedBy: .equal,
                                                   toItem: btnRegister,
                                                   attribute: .top,
                                                   multiplier: 1,
                                                   constant: 0))
        view.addConstraint(NSLayoutConstraint.init(item: btnLogin,
                                                   attribute: .width,
                                                   relatedBy: .equal,
                                                   toItem: btnRegister,
                                                   attribute: .width,
                                                   multiplier: 1,
                                                   constant: 0))
        view.addConstraint(NSLayoutConstraint.init(item: btnLogin,
                                                   attribute: .height,
                                                   relatedBy: .equal,
                                                   toItem: btnRegister,
                                                   attribute: .height,
                                                   multiplier: 1,
                                                   constant: 0))
    }
}

VFL布局格式代码示例

// views: 定义 VFL 中的控件名称和实际名称映射关系
// metrics: 定义 VFL 中 () 指定的常数映射关系
let views = ["imgMask": imgMask, "btnRegister": btnRegister] as [String : Any]
let metrics = ["spacing": -35]
// imgMask设置水平方向距离左边界和右边界都是0       addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[imgMask]-0-|",
options: [],
metrics: nil,
views: views))
// imgMask设置竖直方向距离上边界0、底部和btnRegister的top向下35,       addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[imgMask]-(spacing)-[btnRegister]",
options: [],
metrics: metrics,
views: views))