FlooidLayout

将这段自动布局代码

NSLayoutConstraint.activate([
    view.centerXAnchor.constraint(equalTo: container.centerXAnchor),
    view.topAnchor.constraint(equalTo: container.topAnchor),
    view.widthAnchor.constraint(equalTo: container.widthAnchor, constant: -2*20),
    view.heightAnchor.constraint(equalTo: container.heightAnchor, constant: -2*20)
])

转换为这段代码

image.constraints { view in
    view.centerTopAnchor == container.centerTopAnchor
    view.sizeAnchor == container.sizeAnchor -- 20
}

安装

Cocoapods

pod 'FlooidLayout', '~> 1.0.8'

Swift Package Manager

.package(url: "https://github.com/martin-lalev/FlooidLayout", from: "1.0.8")

工作原理

FlooidLayout 在 NSLayoutAnchor 上定义了自定义运算符（例如 ==, <=, >= 等），这些运算符会产生 NSLayoutConstraint。示例：

宽度和高度锚点也可以使用 ++ 或 -- 来分配其常量，这将简单地将值乘以 2。 当你想表达视图上的内边距或外边距时，这很有用，例如：view.widthAnchor == container.widthAnchor -- 10 等价于 view.widthAnchor == container.widthAnchor - 20。

你也可以在视图上调用 constraints，这将为你提供一个结果构建器，该构建器期望一个 NSLayoutConstraint 列表，然后这些约束将被激活。

修改和变量赋值

有时你可能需要更改约束的优先级或分配一个标识符。 你可以使用 --! 运算符在线执行此操作

分配自定义优先级

view.heightAnchor == view.widthAnchor * 0.6 --! .priority(.defaultHigh)

分配一个标识符

view.centerXAnchor == container.centerXAnchor --! .identifier("iconCenterX")

激活

view.centerXAnchor == container.centerXAnchor --! .activated

仅当你在 constraints 方法之外声明约束时才应使用。 constraints 将自动激活结果构建器中列出的所有约束。

存储在变量中

view.topAnchor == container.topAnchor + 20 --> imageTopConstraint

链式调用

所有修饰符都可以链接在一起，唯一的规则是赋值必须在末尾

view.heightAnchor == view.widthAnchor * 0.6 --! .priority(.defaultHigh) --! .identifier("iconHeight") --> iconHeightConstraint

其他锚点

FlooidLayout 提供了一些额外的“锚点”，这将使你的锚点声明更加简单

sizeAnchor

修改宽度和高度锚点

// Constant assignment
view.sizeAnchor == CGSize(width: 30, height: 30)

// Another sizeAnchor assignment
view.sizeAnchor == container.sizeAnchor

// Expanding both dimensions
view.sizeAnchor == container.sizeAnchor + 20

// Shrinking both dimensions (the constant is multipled by two in this example)
view.sizeAnchor == container.sizeAnchor -- 20

// Scaling both dimensions
view.sizeAnchor == container.sizeAnchor * 0.5

// Expanding each dimensions separately
view.sizeAnchor == container.sizeAnchor + (width: 20, height: 40)

// Shrinking each dimensions separately (the constants are multipled by two in this example)
view.sizeAnchor == container.sizeAnchor -- (width: 20, height: 10)

// Scaling each dimensions separately
view.sizeAnchor == container.sizeAnchor * (width: 0.5, height: 0.4)

centerAnchor

修改 centerX 和 centerY 锚点。 类似地，其他位置锚点也可用，例如 leadingTopAnchor, centerBottomAnchor, rightCenterAnchor 等。

// Another locationAnchor assignment
view.centerAnchor == container.centerAnchor

// Moving both axis
view.leadingTopAnchor == container.leadingTopAnchor + 20

// Moving each axis separately
view.leadingCenterAnchor == container.trailingCenterAnchor + (x: 10, y: 0)

edgesAnchor

修改顶部、底部、前导和尾随锚点

// Another locationAnchor assignment
view.edgesAnchor == container.edgesAnchor

// Insetting all edges equally
view.edgesAnchor == container.edgesAnchor -- 10

// Insetting edges separately per axis
view.edgesAnchor == container.edgesAnchor -- (horizontally: 20, vertically: 10)

// Insetting each edge separately
view.edgesAnchor == container.edgesAnchor -- (leading: 5, trailing: 15, top: 10, bottom: 20)

horizontalEdgesAnchor

修改前导和尾随锚点

// Another horizontalEdgesAnchor assignment
view.horizontalEdgesAnchor == container.horizontalEdgesAnchor

// Insetting both edges equally
view.horizontalEdgesAnchor == container.horizontalEdgesAnchor -- 10

// Insetting each edge separately
view.horizontalEdgesAnchor == container.horizontalEdgesAnchor -- (leading: 5, trailing: 15)

verticalEdgesAnchor

修改顶部和底部锚点

// Another verticalEdgesAnchor assignment
view.verticalEdgesAnchor == container.verticalEdgesAnchor

// Insetting all edges equally
view.verticalEdgesAnchor == container.verticalEdgesAnchor -- 10

// Insetting each edge separately
view.verticalEdgesAnchor == container.verticalEdgesAnchor -- (top: 10, bottom: 20)