简介

PinStackView 是一个基于 Frame 的 StackView，依赖于 PinLayout。

功能

• 可以与手动布局、Autolayout 一起使用
• 是一个真实视图，仅对指定的子视图进行布局
• 具有内部填充
• 具有与 UIStackView 相似的等分布
• 在轴方向上具有动态长度的自动样式
• 具有增长/收缩功能
• 观察项目布局属性
• 对子视图的 'isHidden' 属性进行 KVO

安装

使用 CocoaPods 将 PinStackView 集成到您的 Xcode 项目中，在 Podfile 中指定它

    pod 'PinStackView'

然后，运行 pod install。

使用方法

在 'Views/' 组中列出的项目示例

$ cd Example
$ pod install
$ open Example.xcworkspace

PinStackView

接口

• addItems(): 添加托管的子视图，返回 PinStackItemInfo 以进行链式设置，您可以自行添加 subViews() 和布局视图
• insertItem(): 与 addItems() 类似，可以定义顺序
• removeItem(): 删除托管子视图，也从子视图中删除
• remakeItem(): 用新项目替换但不更改子视图的顺序
• itemForView(): 在 addItem() 或 insertItem() 之后从 PinStackView 获取 PinStackItemInfo
• define(): 链式定义项信息的语法糖
• markDirty(): 如同 setNeedsLayout()，强制在下一个视图更新中进行布局
• triggerNeedsLayout(): 当 PinStackView setNeedsLayout 时触发子视图的 setNeedsLayout

属性

• style: 默认 .fixed，布局后轴长度不变；.auto 样式表示其轴长度会根据项目变化
• axis: .horizontal 或 .vertical 方向，动态长度方向
• distribution: 轴方向布局样式，.equal 只支持 .fixed 样式；.auto 样式总是 .start
• alignment: 轴方向的对齐，您可以使用 alignSelf() 指定视图的对齐方式
• spacing: 轴方向上项目之间的间距
• padding: 项目将在填充之后布局
• layoutCallback: 每次布局后调用，在大小改变时会传入 true

PinStackItemInfo

PinStackItemInfo 是每个项目的布局定义，您可以在 addItem() 后获取其实例

• top(): 上边距，像素或内边距后的高度比例
• bottom(): 下边距，像素或内边距后的高度比例
• left(): 左边距，像素或内边距后的宽度比例
• right(): 右边距，像素或内边距后的宽度比例
• width(): 像素或内边距后的宽度比例
• height(): 像素或内边距后的高度比例
• maxWidth(): 最大像素或内边距后的宽度比例，比 width() 优先级高
• maxHeight(): 最大像素或内边距后的高度比例，比 height() 优先级高
• minWidth(): 最小像素或内边距后的宽度比例，比 width() 优先级高
• minHeight(): 最小像素或内边距后的高度比例，比 height() 优先级高
• size(): 优先级高于 width()，height()，max/min width & height，像素或内边距后的比例
• alignSelf(): 优先级高于 PinStackView 的对齐方式，仅适用于此项目
• grow(): 在 .fixed 风格和 .start / .end 分配中，表示项目在所有固定项目长度累计后使用轴方向上的动态长度；在 .equal 分配或 .auto 风格中没有意义
• shrink(): 在 .fixed 风格和.start / .end 分配中，表示项目在所有固定项目长度累计后使用轴方向上的动态长度；在 .equal 分配或 .auto 风格中没有意义

编码示例

使用来自 Suyeol Jeon 的 Then

    lazy var stackView = PinStackView().then {
        $0.style = .auto
        $0.axis = .horizontal
        $0.alignment = .center
        $0.distribution = .start
        $0.spacing = 10
        $0.addItem(v1).left(20)
        $0.addItem(v2).size(20).shrik(2.0)
        $0.addItem(v3).grow(1.0) // with grow ratio 1.0 / (1.0 + 2.0)
        $0.addItem(v4).size(30).grow(2.0).right(20)
    }

演示