Swift   DocC   Pages   Artifactory

Layout

用于 UIKit 的高保真 Auto Layout Result Builder 语法

概述

Layout 于 2017 年引入 Tinder 的 iOS 代码库，此后一直用于以编程方式定义应用程序的屏幕。

Layout 是对 Apple 平台 Auto Layout SDK 的封装，它提供了一种更简洁的 DSL，有助于采用并简化 UI 布局问题的故障排除。具有大型代码库的项目使用这种类型的编程 UI 代码来代替可视化的 WYSIWYG 编辑器（例如 Xcode storyboards），以避免 XML（Xcode storyboards 的序列化格式）等文件格式中发生难以管理的合并冲突。

使用 Layout 编写的代码利用高保真语法，这意味着可以轻松地可视化代码表示的 UI 布局。但是，Layout 并不以任何方式限制原生 Auto Layout 功能，后者可以与 Layout API 一起轻松使用。近年来，移动平台引入了声明式 UI 框架，例如 SwiftUI 和 Jetpack Compose，这些框架显着降低了学习曲线。虽然不是声明式框架，但 Layout 采用了类似的声明式风格，在这种情况下用于 UIKit 框架。

最低要求

安装

Swift Package Manager

包依赖

将 <version> 替换为所需的最低版本。

.package(url: "https://github.com/Tinder/Layout.git", from: "<version>")

目标依赖

Layout

"Layout"

快照测试扩展（用于测试目标）

.product(name: "SnapshotTestingExtensions", package: "Layout")

Swift Package Collection

https://swiftpackageindex.cn/Tinder/collection.json

用法

以下示例演示了如何将标签、图像视图和按钮作为子视图添加到视图控制器的视图中。

override func viewDidLoad() {
    super.viewDidLoad()
    view.layout {
        label
            .toSafeArea([.top])
            .center(.horizontal)
        imageView
            .toSideEdges(inset: 20)
            .height(200)
        button
            .center(.horizontal)
    }
    .vertical([label, imageView, button], spacing: 50)
    .activate()
}

上面的代码等效于以下 Auto Layout 代码。

override func viewDidLoad() {
    super.viewDidLoad()
    label.translatesAutoresizingMaskIntoConstraints = false
    imageView.translatesAutoresizingMaskIntoConstraints = false
    button.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(label)
    view.addSubview(imageView)
    view.addSubview(button)
    NSLayoutConstraint.activate([
        label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        imageView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20),
        imageView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20),
        imageView.heightAnchor.constraint(equalToConstant: 200),
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        imageView.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 50),
        button.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 50)
    ])
}

文档

可以通过从 Product 菜单中选择 Build Documentation 在 Xcode 中查看文档，或在线访问：https://Tinder.github.io/Layout

快速参考指南可在以下位置找到：https://Tinder.github.io/Layout/cheatsheet

相关工具

Layout 是其他开源 Auto Layout 库的替代解决方案，例如

贡献

尽管感谢您对贡献此项目的兴趣，但它开源的目的仅在于与社区共享。这意味着我们目前无法接受外部贡献，并且不会审查或合并 pull requests。要报告安全问题或漏洞，请提交 GitHub issue。

许可证

根据 Match Group 修改的 3 条款 BSD 许可证获得许可。