Maketa 2.1.1

Maketa 2.1.1

×

由Manuel García-Estañ维护。

Maketa 2.1.1

Maketa

一个用于管理 自动布局 的操作API。

快速开始

Maketa 提供了一个易于阅读、易于编写的API，用于管理AutoLayout。

一些示例

// Match attribute of a view to another attributes
view.mkt.left = otherView.mkt.right + 10

// Set sizing attributes directly or relative to other view size
view.mkt.height = 100
view.mkt.width = otherView.mkt.width
view.mkt.size = otherView.mkt.size * 0.5

// Center views in another view
view.mkt.center = otherView.mkt.center
view.mkt.center = Superview.center

// Make edges to match other edges or margins
view.mkt.edges = Superview.edges - UIContentInset(top: 16, left: 16, bottom: 16, right: 16)
view.mkt.edges = otherView.mkt.margins - .top

注意：在写操作中自动布局会自动激活，但在读操作中不会激活。在上面的示例中，自动布局将在 view 中激活，但在 otherView 中不会激活。

greaterOrEqual 和 lessOrEqual

要使约束具有.greaterOrEqual或.lessOrEqual的关系，只需将=替换为>或<

view.mkt.height < 100
view.mkt.left > otherView.mkt.right

设置约束优先级

您可以通过使用&运算符来更改约束的优先级。

view.mkt.left = (otherView.mkt.right + 10) & .defaultLow
view.mkt.edges = otherView.mkt.margins & .defaultHigh

保存约束

如果您需要保留由 Maketa 添加的约束引用，可以使用 => 运算符

var constraint = NSLayoutConstraint.empty
view.mkt.height = 10 => constraint

var constraint: NSLayoutConstraint?
view.mkt.top = (Superview.top + 50) => constraint

var constraints = CenterConstraints()
view.mkt.center = Superview.center => constraints

var constraints: EdgesConstraints?
view.mkt.edges = otherView.mkt.margins => constraints

高级使用

布局属性

Maketa 反映了所有内置的 NSLayoutAttribute 情况，因此您可以设置其中的任何一个。

您可以将属性设置为

  • 另一个属性（同一或不同的视图）。
  • 一个常量
  • 操作属性和常量之间的运算
view.mkt.leading = otherView.mkt.leading
view.mkt.height = 10
view.mkt.centerY = otherView.mkt.centerY * 2 + 5

使用 => 运算符将返回一个单独的 NSLayoutConstraint。

var constraint: NSLayoutConstraint?
view.mkt.height = 10 => constraint

居中

您可以单条指令将一个视图的居中与另一个视图的居中相匹配

view.mkt.center = otherView.mkt.center

您可以使用四种不同类型的居中

// center
view.mkt.center = otherView.mkt.center

// center within margins
view.mkt.center = otherView.mkt.centerWithinMargins

请注意，在表达式的左边您总是使用 center。表达式的右边决定使用的居中类型。

使用 => 运算符将返回一个 CenterConstraints 的实例，可以用来获取 x 和 y 约束。

var constraints: CenterConstraints?
view.mkt.center = Superview.center => constraints

添加偏移量

您还可以向中心添加偏移量。您可以使用 - 和 + 运算符以及常量或 UIOffset 来执行此操作

// will add an offset of 20 pixels for centerX and centerY
view.mkt.center = otherView.mkt.center + 20

// using a UIOffset
view.mkt.center = otherView.mkt.center - UIOffset(horizontal: 10, vertical)

尺寸

您可以使用单一指令为视图尺寸添加约束。您可以通过多种方式来完成此操作。

// a constant: Set both width and height to the same value
view.mkt.size = 100

// a CGSize
view.mkt.size = CGSize(width: 100, height: 200)

// Another view size
view.mkt.size = otherView.mkt.size

使用 `=>` 操作符将返回 `SizeConstraints` 的实例，您可以使用它来获取 `width` 和 `height` 约束。

var constraints: SizeConstraints?
view.mkt.size = CGSize(width: 100, height: 200) => constraints

添加偏移量

三种方法中的每一种都可以使用操作符 + 和 - 添加填充。

// with a constant: adds an offset of 30 px in vertical and 30 px in horizontal
view.mkt.size = otherView.mkt.size + 30

// using UIOffset
view.mkt.size = anotherView.mkt.size + UIOffset(horizontal: 10, vertical: 20)

乘（或除）以常数

三种方法中的每一种也可以使用操作符 * 和 / 乘以或除以。

// the size will be half width and height of the other view size
view.mkt.size = anotherView.mkt.size / 2

// the size will be the double of width and height of the other view size
view.mkt.size = anotherView.mkt.size * 2

边缘

您可以使用单一指令将一个视图的所有边缘绑定到另一个视图的边缘。

view.mkt.edges = otherView.mkt.edges

您可以使用四种不同的边缘类型。

// edges (left, right, top, bottom)
view.mkt.edges = otherView.mkt.edges

// edges relative to the view margins (left, right, top, bottom)
view.mkt.edges = otherView.mkt.margins

// edges using the interface layout direction (leading, trailing, top, bottom)
view.mkt.edges = otherView.mkt.layoutDirectionEdges

// margins using the interface layout direction (leading, trailing, top, bottom)
view.mkt.edges = otherView.mkt.layoutDirectionMargins

请注意，在表达式的左侧始终使用 edges。表达式的右侧确定使用的边缘类型。

使用 `=>` 操作符将返回 `EdgesConstraints` 的实例。您可以从它获取每个边缘添加的约束。

var constraints: EdgesConstraints?
view.mkt.edges = Superview.edges => constraints

排除边缘

您可以排除一个（或多个）边缘。为此必须使用一个或多个 Edge 枚举案的 - 操作符。

view.mkt.edges = otherView.mkt.edges - .top
view.mkt.edges = otherView.mkt.layoutDirectionMargins - .leading - .trailing

可能值包括：.left、.right、.leading、.trailing、.top、.bottom。

添加内边距

您也可以在边缘添加内边距。您可以使用 - 和 + 运算符以及常量或 UIEdgeInset

// will add padding of 20 pixels on each edge
view.mkt.edges = otherView.mkt.edges - 20

// when using a layout direction edge, left would be treated as leading and right to trailing  
view.mkt.edges = otherView.mkt.layoutDirectionMargins - UIEdgeInsets(top: 10, left: 15, bottom: 20, right: 25)

Superview

当您想匹配视图的一些属性到其父视图时，您可以使用 Superview 结构的静态方法

view.mkt.leading = Superview.leading

view.mkt.edges = Superview.margins - 16

view.mkt.size = Superview.size

view.mkt.center = Superview.center

Superview 的静态方法会在视图尚未添加到父视图时抛出致命错误。

安装

请将以下内容添加到您的 Podfile

pod 'Maketa'

然后运行 $ pod install。

最后，在需要 Maketa 的类中

import Maketa

如果您还没有安装或集成 CocoaPods 到您的项目中，您可以在此学习如何这样做 这里.

许可证

Maketa 在 MIT 许可证 下可用。

作者

Manuel García-Estañ Martínez
@manueGE