LayoutComposer 0.3.0

LayoutComposer 0.3.0

×

测试已测试✗
语言语言 SwiftSwift
许可证 MIT
发布上次发布2016 年 10 月
SwiftSwift 版本3.0
SPM支持 SPM✗

由 ykpaco 维护。

LayoutComposer 0.3.0

  • 作者：
  • 川晃佑介

LayoutComposer

LayoutComposer 提供编写典型 UIView 布局模式的方法，例如

  • 沿垂直/水平轴放置 UIView。 (VBox/HBox 布局)
  • 在父 UIView 的顶部|底部|左侧|右侧|中间放置子 UIView。（相对布局）
  • 使子 UIView 的尺寸与其父视图大小一致。（拟合布局）

由于每种布局模式都能包含其他布局模式作为子组件，您可以形成复杂的布局。由 LayoutComposer 编写的 Auto Layout 代码表达 UIView 层次结构。它使 Auto Layout 代码非常简单且直观。

用法

基本用法

Basic

let contentView: UIView = ...
let view1 = UIView()
let view2 = UIView()
let view3 = UIView()

contentView.applyLayout(VBox(), items: [
    $(view1, height: 50),
    $(view2, height: 100),
    $(view3, height: 75)
])

LayoutComposer 扩展 UIView 以添加 applyLayout 方法。 applyLayout 通过指定的布局添加 UIView 作为子视图。在上面的示例中，contentView 将 view1、view2 和 view3 作为子视图添加，并使用 VBox 布局来布局它们。

方法的第一参数是 Layout 类的实例，items 参数是 LayoutComponent 的数组。LayoutComponent 是通过 $(view, options...) 表达式创建的。在上面的示例中，使用 height 选项创建 view1、view2 和 view3 的 LayoutComponent。

VBox 布局

VBox Basic

contentView.applyLayout(VBox(), items: [
    $(view1, height: 50),
    $(view2, height: 100),
    $(view3, flex: 1),
    $(view4, flex: 2)
])

VBox 沿垂直轴放置 UIView。每个 LayoutComponent 可以指定像素高度或使用 flex 选项。flex 选项设置 LayoutComponent 的高度相对于具有 flex 选项的每个视图。在上面的示例中，view4 的高度是 view3 的两倍。

具有 flex 选项的 LayoutComponent 在可用区域中分配。如果未指定高度或 flex，则使用视图的内建内容大小。

边距

VBox Margin

contentView.applyLayout(VBox(), items: [
    $(view1, height: 50, marginTop: 10),
    $(view2, height: 100, marginTop: 10, marginLeft: 20, marginRight: 30),
    $(view3, height: 75, margins: (10, 30, 0, 20))
])

在 VBox/HBox 布局中，可以使用 margingTop、marginBottom、marginLeft、marginRight 选项设置每个 LayoutComponent 的边距。也可以使用 4 元组（上边距、左边距、下边距、右边距）的 margins 选项设置边距。

VBox DefaultMargin

contentView.applyLayout(VBox(defaultMargins: (10, 20, 0, 20)), items: [
    $(view1, height: 50),
    $(view2, height: 100),
    $(view3, height: 75)
])

还可以使用 defaultMargins 设置每个 LayoutComponent 的默认边距。

对齐

VBox Align

contentView.applyLayout(VBox(defaultMargins: (10, 0, 0, 0), align: .Start), items: [
    $(view1, width: 50, height: 50),
    $(view2, width: 100, height: 50),
    $(view3, width: 200, height: 100)
])

Box组件可以设置align参数。如果设置为.Start，布局组件在容器中左对齐；如果设置为.End，则右对齐；如果设置为.Center，则居中对齐。如果对齐设置为.Stretch，则布局组件的宽度扩展到父视图的宽度。默认对齐方式为.Stretch。

VBox EachAlign

contentView.applyLayout(VBox(defaultMargins: (10, 0, 0, 0)), items: [
    $(view1, width: 200, flex: 1, align: .Start),
    $(view2, width: 200, flex: 1, align: .Center),
    $(view3, width: 200, flex: 1, align: .End),
    $(view4, width: 200, flex: 1),
    $(view5, flex: 1),
])

可以单独通过为每个布局组件设置对齐选项来设置对齐方式。

打包对齐

VBox Pack

container.applyLayout(VBox(defaultMargins: (10, 0, 0, 0), pack: .Center), items: [
    $(view1, height: 50),
    $(view2, height: 50),
    $(view3, height: 100)
])

Box组件可以设置pack参数。如果设置为.Start，布局组件在容器中顶部对齐；如果设置为.End，则在底部对齐；如果设置为.Center，则居中对齐。

VBox Pack

container.applyLayout(VBox(defaultMargins: (10, 0, 0, 0), pack: .Fit), items: [
    $(view1, height: 50),
    $(view2, height: 50),
    $(view3, height: 100)
])

如果打包选项设置为.Fit，则父视图的高度调整以适应子视图。

水平布局

HBox

contentView.applyLayout(HBox(defaultMargins: (0, 10, 0, 0)), items: [
    $(view1, width: 50),
    $(view2, flex: 1),
    $(view3, flex: 3),
    $(view4, flex: 2)
])

HBox沿着水平轴放置UIView。HBox是VBox的水平版本。

相对布局

Relative

contentView.applyLayout(Relative(), items: [
   $(view1, halign: .Left, valign: .Top, width: 200, height: 100),
   $(view2, halign: .Right, valign: .Bottom, width: 200, height: 100),
   $(view3, halign: .Center, valign: .Center, width: 200, height: 100)
])

Relative布局将子组件放置在父视图的顶部、底部、左侧、右侧或中心。每个布局组件都可以通过halign和valign选项设置对齐。

与VBox/HBox布局类似，还有margingTop、marginBottom、marginLeft、marginRight和margins选项可用于设置边距。

适应布局

contentView.applyLayout(Fit(), item: $(view1))

Fit使子组件的大小适应其父视图的大小。

与VBox/HBox布局类似，还有margingTop、marginBottom、marginLeft、marginRight和margins选项可用于设置边距。

嵌套布局

可以通过嵌套多个布局模式来形成更复杂的布局。

VBox Pack

let profileContainer = UIView()
...
let icon = UIImageView(image: UIImage(named: "avatar.jpeg"))
...
let changeProfileBtn = UIButton.buttonWithType(.System) as! UIButton
changeProfileBtn.setTitle("Update Profile", forState: .Normal)
...
let nameLabel = UILabel()
nameLabel.text = "YKPaco"
...
let userIDLabel = UILabel()
userIDLabel.text = "@ykpaco"
...
let messageLabel = UILabel()
messageLabel.text = "Each layout pattern is able to contain other layout patterns ..."
...
let followLabel = UILabel()
followLabel.text = "150 follows"
...
let followerLabel = UILabel()
followerLabel.text = "130 followers"

contentView.applyLayout(VBox(), items: [
    $(profileContainer, margins: (10, 10, 10, 10), layout: VBox(pack: .Fit, defaultMargins: (0, 10, 0, 10)), items: [
        $(nil, height: 50, marginTop: 10, layout: Relative(), items: [
            $(icon, width: 50, height: 50, halign: .Left),
            $(changeProfileBtn, width: 100, height: 20, halign: .Right, valign: .Top)
        ]),
        $(nameLabel, marginTop: 5),
        $(userIDLabel, marginTop: 5),
        $(messageLabel, marginTop: 5),
        $(nil, height: 30, layout: HBox(), items: [
            $(followLabel),
            $(followerLabel, marginLeft: 10)
        ])
    ])
])

每个布局组件都可以使用layout选项使其成为其他布局组件的容器。$(nil, ...)创建一个新的透明UIView。这是一个创建新容器的方便方法。

安装

从GitHub手动安装

  1. 下载Pod/Classes文件夹中的源文件。
  2. 将源文件添加到您的Xcode项目中。

要求

当前版本的LayoutComposer支持以下iOS版本

  • Xcode
    • 语言支持：Swift (2.0)
    • 如果使用swift 1.2，则切换到swift-1.2分支。

  • iOS
    • 最低部署目标：iOS 7.0
      • 如果设置了部署目标iOS 7.X，则无法通过CocoaPods安装。您必须手动安装LayoutComposer。

实例

要运行示例项目，首先从repo中克隆，然后从Example目录运行pod install。

作者

Yusuke Kawakami，[email protected]

许可

LayoutComposer采用MIT许可。有关更多信息，请参阅LICENSE文件。