让我为您创建自动布局约束!
BoxView
BoxView 是一个可以布局子视图的容器视图。它与 UIStackView 类似,但采用不同的方法:它允许为每个子视图设置特定的布局,而不是自动分布。BoxView 可以用最少的努力创建复杂的动态布局。它摆脱了样板代码,使代码更短、更易读。它不会更改视图或现有的约束,它只创建指定的约束组,因此不会与任何东西冲突。
特点
- 纯 Swift 5 库
- 即使是复杂布局,代码也短小易读
- 易于更改布局,添加、删除和重新排序视图
- 与任何其他自动布局代码 100% 兼容
- 支持绝对、相对和弹性尺寸约束
- 支持动画
示例
我们只需几行代码即可使用 BoxView 创建此布局
nameBoxView.items = [nameImageView.boxed.centerY(), nameField.boxed]
passwordBoxView.items = [passwordImageView.boxed.centerY(), passwordField.boxed]
boxView.insets = .all(16.0)
boxView.spacing = 20.0
boxView.items = [
titleLabel.boxed.centerX(padding: 30.0).bottom(20.0),
nameBoxView.boxed,
passwordBoxView.boxed,
forgotButton.boxed.left(>=0.0),
loginButton.boxed.top(30.0).left(50.0).right(50.0),
]
完整的示例代码在 BoxViewExample 项目中,在 Docs 文件夹中还有一个 登录示例的逐步教程。
添加/删除视图或更改任何视图的内边距,都不会影响布局中的其他视图,这非常容易。并且这些更改可以选项性地进行动画处理。例如,我们可以添加空字段验证并在空字段下方显示错误标签,而无需更改现有布局代码!
仅使用BoxViews创建的另一个布局示例。它展示了坐标轴和间距动画,并使用尺寸限制与BoxView结合使用
基本用法
BoxView使用items数组来排列其子视图。每个项目都是类型为BoxItem的,并且它封装了视图以及布局信息。因此,为了使用BoxView排列一些视图,我们需要从每个视图创建BoxItem并将这些项目添加到BoxView中。
创建BoxItem
BoxItem可以使用UIView的boxed属性进行创建,项在所有四个方向都带有零内边距创建。BoxItem有许多方法可以更改内边距或其他参数,并且所有这些方法都可以链式调用。
// creates a BoxItem with zero paddings from all 4 sides
view.boxed
// creates an item with 20 pt padding from left and zero paddings from other 3 sides.
view.boxed.left(20.0)
// creates an item with 10 pt padding from top, 20 pt from bottom and zero paddings from other 2 sides.
view.boxed.top(10.0).bottom(20.0)
// creates an item aligned along X-axis, with padding >= 30 pt from left and right sides, top and bottom padding are zero, view height is equal 50 pt, width is half of superview width.
view.boxed.centerX(padding: 30.0).height(50.0).relativeWidth(0.5)
注意,所有内边距的实际视图偏移量都是通过以图中所示的方式计算boxView.insets和boxView.spacing属性来得出的
这些值默认都是零,所以只有明确设置的值才会对实际的填充做出贡献。
可以使用关系运算符指定每个内边距,使用运算符">="表示大于等于关系,使用运算符"<="表示小于等于关系。等于关系是默认的,所以通常不使用运算符"=="。
// creates an item with padding greater than or equal 20 pt from left,
// padding less than or equal 30 pt from top and zero paddings from other 2 sides.
view.boxed.left(>=20.0).top(<=30.0)
管理BoxView项
可以在任何时候添加、插入或删除项目
// initialize boxView.items with two items
boxView.items = [view1.boxed, view2.boxed.left(10.0)]
//remove view2 (when subview is removed from boxView corresponding item is also removed)
view2.removeFromSuperview()
//add view3
boxView.items.append(view3.boxed.centerX())
//insert view2 between view1 and view3
boxView.insertItem(view2.boxed.right(10.0), after: view1)
还可以更新项,只更改指定的布局元素
// initialize boxView.items with two items
boxView.items = [view1.boxed, view2.boxed.left(10.0).right(10.0)]
...
// updating code has to be placed in closure which receives item as argument,
// and returns updated item
view2.updateBoxItem{ $0.left(20.0).width(100.0) }
// now view2 still has right padding 10.0, but left padding changed to 20.0 and width constrained to 100.0
高级用法和参考
关于BoxView使用的更多详细信息可以在文档文件夹中找到。
需求
iOS 9 或更高版本
安装
CocoaPods
BoxView 通过 CocoaPods 提供。要安装它,只需在 Podfile 中添加以下行
use_frameworks!
target 'YourTarget' do
pod 'BoxView', :git => 'https://github.com/vladimir-d/BoxView.git'
end
作者
Владимир Дудкин,[email protected]
许可证
BoxView 可在 MIT 许可证 下使用。更多信息请参阅 LICENSE 文件。