最后更新:2019年1月2日。
如果您喜欢此项目,请给它加星⭐。这会向创作者展示您的赞赏,并帮助其他人发现此仓库。
✍️ 关于
Auto Layout
约束的方法(请参阅 Contents
),无需任何其他外部依赖。
💡 动机
此框架的目的是提供一个非常轻量的解决方案来满足 Auto Layout
的需要,并使编程性 UI
的开发变得更加简单,在框架中隐藏样板代码。主要用于内部开发,但由于它提供了一些独特性,我决定与社区分享此框架,并且我将继续此开发工作。
📺 演示
为了创建以下截图类似的内容
您只需编写几行代码
// 1. First you need to add all your views somewhere. That means your views must have a superview. Let's assume that you have done that.
// 2. Then we assume that visually your views are fully configured.
// 3. And finally, all we need to do is to specify the constraints:
cardView.pinInside(view: self.view, offset: 16)
imageView.pinInside(view: cardView, offset: 8)
blurView.pinInside(view: cardView)
titleLabel.pinTopToTopCenter(of: imageView, offset: 24)
button
.bottom(with: imageView, anchor: .bottom, offset: -34)
.center(in: imageView, axis: .horizontal)
.set(height: 60)
.set(aspect: 2/1)
label
.center(in: imageView)
.left(with: imageView, anchor: .left, offset: 16)
.right(with: imageView, anchor: .right, offset: -16)
🏗️ 安装
CocoaPods
constraints-kit
可通过 CocoaPods
获取。
pod 'constraints-kit', '~> 1.1.0'
手册
您始终可以手动将框架源添加到您的项目中。为此,只需复制粘贴以下文件。
✈️ 用法
该框架使用起来非常简单,然而我建议在安装框架之前学习一下《自动布局》的基础知识——这将有助于您理解《UIView》需要的最小约束数,并避免常见的陷阱。
导入
将框架添加到项目后,只需添加一个导入语句
import constraints_kit
设置大小
view.set(size: CGSize(width: 300, height: 300))
view.set(width: 400)
view.set(height: 200)
view
.set(width: 200)
.set(aspect: 2/1)
约束
一个UIImageView
使用偏移量填充父UIView
,直到底部锚点达到UIButton
的上锚点。
imageView
.constrain(using: .top, to: .top, of: view, offset: 24)
.constrain(using: .right, to: .right, of: view, offset: -24)
.constrain(using: .left, to: .left, of: view, offset: 24)
.constrain(using: .bottom, to: .top, of: button, offset: -24)
如果您想将view
锚定到其superview
,也可以省略of: view
部分。
imageView
.constrain(using: .top, to: .top, , offset: 24)
.constrain(using: .right, to: .right, offset: -24)
.constrain(using: .left, to: .left, offset: 24)
.constrain(using: .bottom, to: .top, offset: -24)
UIImageView
锚定在父视图的中心,通过锚定左边和右边并将aspect ratio
设置为3:2拉伸到水平轴。
imageView
.center(in: view, axis: .vertical)
.left(with: view, anchor: .left)
.right(with: view, anchor: .right)
.set(aspect: 3/2)
锚定
一个自定义的UIView
填充到UICollectionViewCell
的顶部系统间距,并通过自定义的左边、右边偏移量以及UIButton
的顶部锚点。
presenterView
.topToSystemSpacing(with: view, anchor: .top)
.right( with: view, anchor: .right, offset: -16)
.left( with: view, anchor: .left, offset: 16)
.bottom( with: button, anchor: .top, offset: -16)
一个 UIButton
放置在父视图的 center
,其 bottom
锚与父视图的底部对齐,高度设置为 60
,宽高比为 2:1
。
button
.bottom(with: imageView, anchor: .bottom, offset: -34)
.center(in: imageView, axis: .horizontal)
.set(height: 60)
.set(aspect: 2/1)
固定
一个自定义的 ActivityIndicator
视图,与指定视图的左上角对齐,偏移量为 一些
,大小为 20x20
。
activityIndicator
.pinInsideToTopLeftCorner(of: view, offset: 24)
.size(CGSize(width: 20, height: 20))
更复杂的案例,自定义 ProgressView
的左上锚点与父视图的顶部左侧对齐,底部右侧锚点与 LogIn
按钮的顶部右侧对齐。
progressView
.pin(anchors: [.left, .top], toTargetView: view, using: [.leading, .top])
.pin(anchors: [.bottom, .right], toTargetView: button, using: [.right, .top])
填充
一个 UITableView
放置在父 UIView
内部,填充它的上半部分(使用 left
、top
、right
和 centerX
锚)。
tableView.fillTopHalf(of: parentView)
一个 UICollectionView
放置在父 UIView
内部,使用指定的偏移量填充它的左半部分(使用 left
、top
、bottom
和 centerY
锚)。
collectionView.fillLeftHalf(of: splitView, offset: 16)
📝 目录
该工具包包含几个方法组,每个组都有特定的用途。所有组可以串联使用,但请注意,如果存在冲突约束或未为 Auto Layout
引擎提供足够的信息,则可能没有效果或得到一些意外的结果。假设您已经熟悉 Auto Layout
的基础知识。
公共
constrain
- 使用指定的Attribute
将self
与相关的UIView
中的Attribute
进行约束。您可以设置Relation
(默认为.equal
),offset
(默认为0.0
)和multiplier
(默认为1.0
)。fit
- 在指定的UIView
内部放置self
,可选项offset
(默认为0.0
)。center
- 使用具体的Axis
案例将self
在指定的UIView
内部居中,可选项multiplier
(默认为1.0
)。width
- 在self
和指定的UIView
之间应用宽度相等。您可以更改Relation
(默认为equal
),UILayoutPriority
(默认为required
),multiplier
(默认为1.0
)和constant
(默认为0.0
)。height
- 在self
和指定的UIView
之间应用高度均衡。您可以更改Relation
(默认为equal
),UILayoutPriority
(默认为required
),multiplier
(默认为1.0
)和constant
(默认为0.0
)
设置器
set(size:)
- 通过为width
和height
锚点应用布局约束来设置self
的新CGSize
set(width:)
- 通过为width
锚点应用布局约束来设置新的width
set(height:)
- 通过为height
锚点应用布局约束来设置新的height
set(aspect:)
- 通过为aspect
锚点应用布局约束来设置新的aspect ratio
set(aspectOf:)
- 通过复制指定UIView
的aspect
来设置新的aspect ratio
set(value: to:)
- 为Attribute
设置新的value
偏移量
锚定
top
- 使用AxisY
锚点将顶部锚点锚定到指定的UIView
,使用Relation
(默认为.equal
),NSLayoutPriority(默认为.required
)和offset
(默认为0.0
)bottom
- 使用AxisY
锚点将底部锚点锚定到指定的UIView
,使用Relation
(默认为.equal
),NSLayoutPriority(默认为.required
)和offset
(默认为0.0
)left
- 使用AxisY
锚点将左侧锚点锚定到指定的UIView
,使用Relation
(默认为.equal
),NSLayoutPriority(默认为.required
)和offset
(默认为0.0
)right
- 使用AxisY
锚点将右侧锚点锚定到指定的UIView
,使用Relation
(默认为.equal
),NSLayoutPriority(默认为.required
)和offset
(默认为0.0
)
锚定到系统间距
rightToSystemSpacing
- 使用AxisY
锚点将右侧锚点锚定到指定的UIView
,相对于系统间距,使用Relation
(默认为.equal
),NSLayoutPriority(默认为.required
)和offset
(默认为0.0
)leftToSystemSpacing
- 使用AxisY
锚点将左侧锚点锚定到指定的UIView
,相对于系统间距,使用Relation
(默认为.equal
),NSLayoutPriority(默认为.required
)和offset
(默认为0.0
)topToSystemSpacing
- 使用AxisY
锚点将顶部锚点锚定到指定的UIView
,相对于系统间距,使用Relation
(默认为.equal
),NSLayoutPriority(默认为.required
)和offset
(默认为0.0
)bottomToSystemSpacing
- 使用AxisY
锚定、Relation
(默认为.equal
)、NSLayoutPriority(默认为.required
)和offset
(默认为0.0
)将指定UIView
的底部锚定到系统的分布
固定
pinTopLeftToTopLeftCorner
- 将顶部左锚定为指定UIView
的左上角,并给定offset
(默认为0.0
)pinTopRightToTopRightCorner
- 将顶部右锚定为指定UIView
的右上角,并给定offset
(默认为0.0
)pinBottomRightToBottomRight
- 将右下角锚定为指定UIView
的右下角,并给定offset
(默认为0.0
)pinBottomLeftToBottomLeft
- 将左下角锚定为指定UIView
的左下角,并给定offset
(默认为0.0
)pinBottomRightToTopLeft
- 将右下角锚定为指定UIView
的左上角,并给定offset
(默认为0.0
)pinBottomLeftToTopRight
- 将左下角锚定为指定UIView
的右上角,并给定offset
(默认为0.0
)pinTopLeftToBottomRight
- 将左上角锚定为指定UIView
的右下角,并给定offset
(默认为0.0
)pinBottomRightToTopLeft
- 将右下角锚定为指定UIView
的左上角,并给定offset
(默认为0.0
)pinTopToTopCenter
- 使用给定offset
(默认为0.0
)将顶部锚定到指定UIView
的顶部中心锚定pinBottomToBottomCenter
- 使用给定offset
(默认为0.0
)将底部锚定到指定UIView
的底部中心锚定pinLeftToLeftCenter
- 使用给定offset
(默认为0.0
)将左侧锚定到指定UIView
的左侧中心锚定pinRightToRightCenter
- 使用给定offset
(默认为0.0
)将右侧锚定到指定UIView
的右侧中心锚定pinInside
- 使用给定Relation
(默认为.equal
)、UILayoutPriority(默认为.required
)和offset
(默认为0.0
)将当前self
固定在指定UIView
内部pinTo
- 使用Anchor
(这是一个OptionSet
)将当前self
固定到指定的UIView
pin(anchors:, toTargetView: , using:)
- 使用相关Anchors
将指定self
的Anchors
固定到UIView
填充
fillBottomHalf
- 使用给定offset
(默认为0.0
)通过self
填充指定视图的下半部分fillTopHalf
- 使用给定offset
(默认为0.0
)通过self
填充指定视图的上半部分fillLeftHalf
- 使用给定offset
(默认为0.0
)通过self
填充指定视图的左半部分fillRightHalf
- 用self
填充指定视图的右半部分,使用给定的offset
(默认为0.0
)
👨💻 作者
🔖 许可协议
该项目遵循MIT 许可协议