QuickLayout

QuickLayout 提供了一种额外的简便方法，仅使用代码即可轻松管理 Auto Layout。您可以使用 QuickLayout 的强大功能以编程方式对齐您的界面，甚至无需显式创建约束。

• 为什么使用 QuickLayout?
• 命名约定
• 特性
• 示例项目
• 要求
• 安装
  • CocoaPods
  • Carthage
  • Swift Package Manager
  • Accio
  • 手动安装
• 用法
  • 固定边距
  • 布局到父视图
    • 将边-x 布局到父视图边-x
    • 使用应用的约束
    • 比例
    • 偏移量
    • 居中
    • 尺寸
    • 填充
    • 轴向
  • 布局到视图
    • 边-x 到另一个视图的边-x
    • 多个边
  • 内容包裹
  • QLView 元素数组
    • 固定边距
    • 轴向
    • 多个边
    • 展开视图
  • 更多
    • 优先级
    • 关系
    • 比例
    • 偏移量
  • 显式布局

为什么要使用 QuickLayout？

• QuickLayout 大大缩短了您需要编写视图层次结构的代码量。
• 它为 iOS、tvOS 和 macOS 提供了一个通用的 Auto Layout API。
• QuickLayout 包含了 iOS 应用程序所需的大多数 Auto Layout 结构。
• QuickLayout 的方法声明非常具有描述性且清晰。 它具有完整的文档！
• 使用 UIView 或 NSView 或视图数组的实例本身来布局，甚至无需创建单个 NSLayoutConstraint 实例。

从 2.0.0 版本开始，QuickLayout 支持 tvOS 和 macOS 以及 iOS。 因此，进行了一些调整。

• QLView 替换 UIView 或 NSView。
• QLPriority 替换 NSLayoutConstraint.Priority 和 UILayoutPriority
• QLAttribute 替换 NSLayoutConstraint.Attribute 和 NSLayoutAttribute
• QLRelation 替换 NSLayoutConstraint.Relation 和 NSLayoutRelation

• QLView 的扩展，其中包含允许您直接从视图本身设置约束的功能。
• QLView 数组 的扩展，其中包含允许您直接从视图数组设置约束的功能。

示例项目演示了使用 QuickLayout 在几个常见用例中的好处。 看一看！ 😎

Swift 4.0 或任何更高版本。

CocoaPods 是 Cocoa 项目的依赖项管理器。 您可以使用以下命令安装它

$ gem install cocoapods

要使用 CocoaPods 将 QuickLayout 集成到您的 Xcode 项目中，请在您的 Podfile 中指定以下内容

pod 'QuickLayout', '3.0.2'

然后，运行以下命令

$ pod install

Carthage 是一个去中心化的依赖关系管理器，它构建您的依赖关系并为您提供二进制框架。

您可以使用 Homebrew 通过以下命令安装 Carthage

$ brew update
$ brew install carthage

要使用 Carthage 将 QuickLayout 集成到您的 Xcode 项目中，请在您的 Cartfile 中指定以下内容

github "huri000/QuickLayout" == 3.0.2

Swift Package Manager 是一种用于管理 Swift 代码分发的工具。 它与 Swift 构建系统集成，以自动执行下载、编译和链接依赖项的过程。

使用 Xcode 11.0+，转到您的项目文件并输入此存储库的项目 URL

https://github.com/huri000/QuickLayout

Accio 是一个由 SwiftPM 驱动的去中心化依赖关系管理器，适用于 iOS/tvOS/watchOS/macOS 项目。

您可以使用 Homebrew 通过以下命令安装 Accio

$ brew tap JamitLabs/Accio https://github.com/JamitLabs/Accio.git
$ brew install accio

要使用 Accio 将 QuickLayout 集成到您的 Xcode 项目中，请在您的 Package.swift 清单中指定以下内容

.package(url: "https://github.com/huri000/QuickLayout.git", .exact("3.0.2"))

指定 "QuickLayout" 作为要使用它的目标依赖项后，运行 accio install。

将 源文件 添加到您的项目。

使用 QuickLayout 非常简单。 无需设置或准备。 所有必要的方法都已在任何 QLView 实例中可用，并且具有完整的文档和高度的描述性。

首先，一些样板代码：定义一个 QLView 类型的 simpleView 并将其添加到视图层次结构中。

// Create a view, add it to view hierarchy, and customize it
let simpleView = QLView()
simpleView.backgroundColor = .gray
parentView.addSubview(simpleView)

设置视图的固定边距

simpleView.set(.height, of: 50)

您可以使用 可变参数 设置多个固定边距

simpleView.set(.width, .height, of: 100)

只要视图有父视图，您就可以轻松地将视图直接布局到其父视图。

将视图的顶部布局到其父视图的顶部

simpleView.layoutToSuperview(.top)

将视图的 centerX 布局到其父视图的 centerX

simpleView.layoutToSuperview(.centerX)

您还可以同样地使用 可变参数 布局多个边

simpleView.layoutToSuperview(.top, .bottom, .centerX, .width)

所有布局方法都会返回应用的约束，但是返回的值是 可丢弃的，因此如果您不需要它们，可以简单地忽略它们。

let topConstraint = simpleView.layoutToSuperview(.top)

// Change the offset value by adding 10pts to it
topConstraint.constant += 10

您可以将视图布局到其父视图宽度的 80％

simpleView.layoutToSuperview(.width, ratio: 0.8)

您可以将视图布局到其父视图宽度减去 10pts 偏移量

simpleView.layoutToSuperview(.width, offset: -10)

将视图布局到父视图的中心

let center = simpleView.centerInSuperview()

您可以选择检索返回的 QLCenterConstraints 实例。

center?.y.constant = 20

这等效于执行以下操作，而无需获取 QLCenterConstraints 实例（但会得到一个 NSLayoutConstraint 数组）。

simpleView.layoutToSuperview(.centerX, .centerY)

调整到具有可选比例的父视图 - 这意味着 simpleView 是其父视图大小的 80％。

let size = simpleView.sizeToSuperview(withRatio: 0.8)

您可以选择检索返回的 QLSizeConstraints 实例。

size?.width.constant = -20

这等效于执行以下操作，而无需获取 QLSizeConstraints 实例（但会得到一个 NSLayoutConstraint 数组）。

simpleView.layoutToSuperview(.width, .height, ratio: 0.8)

let fillConstraints = simpleView.fillSuperview()

您可以选择检索返回的 QLFillConstraints 实例。

fillConstraints?.center.y.constant = 5

您可以将视图布局到某个轴，例如

水平方向

let axis = simpleView.layoutToSuperview(axis: .horizontally)

垂直方向

simpleView.layoutToSuperview(axis: .vertically)

这等效于（水平方向）

simpleView.layoutToSuperview(.left, .right)

或（垂直方向）

simpleView.layoutToSuperview(.top, .bottom)

您也可以检索 QLAxisConstraints 实例并使用它。

可以将一个视图布局到视图层次结构中的另一个视图。

您可以将视图的一个边布局到另一个边。 例如

将 simpleView 的 left 边布局到 anotherView 的 right 边，并带有 20pts 的右偏移量。

simpleView.layout(.left, to: .right, of: anotherView, offset: 20)

将 simpleView 的 top 边布局到 anotherView 的 top 边

simpleView.layout(to: .top, of: anotherView)

将 simpleView 的左、右和 centerY 分别布局到 anotherView 的左、右和 centerY。

simpleView.layout(.left, .right, .centerY, to: anotherView)

也可以在代码中更改内容拥抱优先级和内容压缩阻力

垂直示例

let label = UILabel()
label.text = "Hi There!"
label.verticalCompressionResistancePriority = .required
label.verticalHuggingPriority = .required

您可以同时设置压缩阻力和拥抱优先级。 因此，强制两者在垂直和水平方向上都为 .required。

label.forceContentWrap()

您可以强制内容包裹特定轴

label.forceContentWrap(.vertically)

您可以生成一个视图数组，并一次性将约束应用于所有视图。

// Create array of views and customize it
var viewsArray: [QLView] = []
for _ in 0...4 {
    let simpleView = QLView()
    view.addSubview(simpleView)
    viewsArray.append(simpleView)
}

使用这一行代码，每个元素的高度均为 50pts。

viewsArray.set(.height, of: 50)

每个元素都紧贴其父视图的左侧和右侧。

viewsArray.layoutToSuperview(axis: .horizontally, offset: 30)

每个元素的左、右、上、下边都完全适合另一个视图。

viewsArray.layout(.left, .right, .top, .bottom, to: parentView)

您可以将这些元素一个接一个地（垂直地）展开，第一个元素拉伸到父视图的顶部，最后一个元素拉伸到父视图的底部。 每个元素之间有 1pt 的偏移量。

viewsArray.spread(.vertically, stretchEdgesToSuperview: true, offset: 1)

每个布局方法都有几个可选参数 - 请参见下文

• 应用的约束的优先级。
• 包含在所有布局方法中。
• 默认值：.required。

除了默认的系统优先级之外，QuickLayout 还提供了一个 - 它的值为 999，称为 .must。

您可以根据需要调整优先级，以处理断裂和冗余。

设置约束优先级的示例

let width = simpleView.set(.width, of: 100, priority: .must)

• 一个视图与另一个视图的关系。
• 包含在大多数布局方法中。
• 默认值：.equal

• 一个视图与另一个视图的比率。
• 包含在大多数布局方法中。
• 默认值：1

• 一个视图与另一个视图的偏移量。
• 包含在大多数布局方法中。
• 默认值：0

当您需要时，您可以将一个或多个视图显式布局到父视图或另一个视图。 大多数参数都有默认值。

simpleView.layout(.height, to: .width, of: anotherView, relation: .lessThanOrEqual, ratio: 0.5, offset: 10, priority: .defaultHigh)

欢迎 Fork、补丁和其他反馈。

Daniel Huri (huri000@gmail.com)

QuickLayout 在 MIT 许可证下可用。 有关更多信息，请参见 LICENSE 文件。