RPStackable 0.1.4

RPStackable 0.1.4

×

由 Jason Clark 维护。

RPStackable 0.1.4

Stackable

Stackable 是一组用于 UIStackView 的愉悦且声明式的实用工具。它旨在使您的布局代码更容易编写、阅读和与设计师沟通。

Version License Platform

Stackable 的目标是弥合设计师描述布局和开发者在代码中表达布局之间的差距。

stack.stackable.add([
    logo,
    30,
    "Example Views",
    10,
    cells
        .outset(to: view)
        .margins(alignedWith: stack),
    UIStackView.stackable.hairlines(around: cells)
        .outset(to: view),
    20...,
    "Copyright Rightpoint",
])

Stackable 通过 CocoaPods 提供。要安装它，只需将以下行添加到您的 Podfile 中：

pod 'RPStackable'

视图

Stackable 包括对所有 UIView 子类的内置支持。

使用 stackView.stackable.add(_ stackables: [Stackable]) 添加它们。

stack.stackable.add([
    imageView,
    label,
    button,
])

此外，您可以直接引用 UIViewController 以包括其视图。

stack.stackable.add([
    viewController,
    button,
])

还支持以下内容：

  • 字符串
  • NSAttributedString
  • UIImage
stack.stackable.add([
    "String",
    NSAttributedString(string: "Attributed String"),
    UIImage(named: "example"),
])

对齐

可以在 UIStackView 中操纵视图以调整其对齐。

let stack = UIStackView()
stack.axis = .vertical
stack.stackable.add([
    imageView
      .inset(by: .init(top: 20, left: 20, bottom: 20, right: 20), //imageView padded on all sides 20px
    
    label
      .inset(by: .init(top: 0, left: -20, bottom: 0, right: -20) //inset can also be negative to move outside of bounds of `stack`
      .aligned(.right), // aligned right (transforms are composable)
      
    button
      .aligned(.centerX), // button aligned center horizontally
      
    hairline
      .outset(to: view), // hairline pinned to horizontal edges of `view`
      
    cells
      .outset(to:  view) // cells horizontal edges pinned to horizontal edges of `view`
      .margins(alignedWith: view), // cell layout margins updated to line up with view.layoutMarginsGuide
])

间隔

可以使用数值 literal 或 StackableSpaceItem 来添加间隔。将它们添加到您的视图旁边。

固定空格

stack.stackable.add([
    20, //constant space
    viewA,
    20, //custom spacing after `viewA`, will be removed if viewA is hidden.
    viewB,
    12.5, //floating point works too!
    viewC,
    UIStackView.stackable.constantSpace(20), //Constant space, not dependent on visibility of `viewC`
    viewD,
    UIStackView.stackable.space(after: viewD, 20), //Explicit custom space dependent on visibility of viewD. Equivalent to just using `20` here.
    viewE,
    UIStackView.stackable.space(before: viewF, 20), //Custom space before viewF. Dependent on the visibility of `viewF`
    viewF,
])

弹性空格

stack.stackable.add([
    viewA,
    20...30, // Flexible space, at least 20, at most 30, inclusive. Flexible spaces do not track view visibility.
    viewB,
    20..., // Flexible space. At least 20, no maximum.
    viewC,
    ...15.5, // Flexible space. At least 0, at most 15.5, floating point works too!
    viewD,
    UIStackView.stackable.flexibleSpace, // flexible space, at least 0, no maximum. Equivalent to `0...`
    viewE,
    UIStackView.stackable.flexibleSpace(.atLeast(20)), // flexible space, at least 20, no maximum. equivalent to `20...`
    viewF,
    UIStackView.stackable.flexibleSpace(.atMost(20)), // flexible space. at least 0, at most 20, equivalent to `...20`
    viewG,
    UIStackView.stackable.flexibleSpace(.range(10...20)), // flexible space, at least 10, at most 20, equivalent to `10...20`
])

高级空格

let cells: [UIView] = ...
stack.stackable.add([
    cells,
    UIStackView.stackable.space(afterGroup: cells, 20), // A space that is dependent on at least one view in `cells` to be visible.
])

细线

stack.stackable.add([
    viewA,
    UIStackView.stackable.hairline, // Simple hairline, extended to edges of StackView. 
    viewB,
    UIStackView.stackable.hairline(after: viewB), // hairline that mirrors visibility of `viewB`
    viewC,
    UIStackView.stackable.hairline(between: viewC, viewD), // hairline that is dependent on both `viewC` and `viewD` being visible.
    viewD,
    UIStackView.stackable.hairline(before: viewE), // hairline before `viewE`, mirrors visibility of `viewE`
    viewE,
    viewF,
    UIStackView.stackable.hairlines(around: viewF), // hairline added above and below viewF. Mirrors visibility of `viewF`
])

细线与组

let cells: [UIView] = ...

stack.stackable.add([
    cellsA,
    UIStackView.stackable.hairlines(between: cellsA), // Hairlines between any visibile members of `cellsA`

    cellsB,
    UIStackView.stackable.hairlines(after: cellsB), // Hairlines after all visible members of `cellsB`

    cellsC,
    UIStackView.stackable.hairlines(around: cellsC), // Hairlines above and below all visible members of `cellsC`
])

细线对齐

stack.stackable.add([
    viewA,
    UIStackView.hairline
        .inset(by: .init(top: 0, left: 10, bottom: 0, right: 10) // hairline inset horizontally by 10
      
    viewB,
    UIStackView.hairline
        .inset(by: .init(top: 0, left: -10, bottom: 0, right: -10) // hairline outset horizontally by 10

    viewC,
    UIStackView.hairline
        .outset(to: view) // hairline constrained to edges of some ancestor (horizontal edges for a vertical stack)
])

细线外观

细线外观可以根据每条细线或组进行自定义

stack.stackable.add([
  viewA,
  UIStackView.hairline
      .color(.lightGray)
      .thickness(1),
    
  cells,
  UIStackView.hairlines(around: cells)
      .color(.red)
      .thickness(10)
])

它也可以根据每个UIStackView进行自定义

let stack = UIStackView()
stack.stackable.hairlineColor = .lightGray
stack.stackable.hairlineThickness = 1

还可以使用全局默认值进行自定义

UIStackView.stackable.hairlineColor = .lightGray
UIStackView.stackable.hairlineThickness = 1

如果需要更多的自定义，您可以提供一个HairlineProvider来销售应该用作发丝线的UIView

let stack = UIStackView()
stack.stackable.hairlineProvider = { stackView in
    let customHairline = UIView()
    //...
    return customHairline
}

// global default provider
UIStackView.stackable.hairlineProvider = { stackView in
    let customHairline = UIView()
    //...
    return customHairline
}

示例

要运行示例项目，请先克隆存储库，然后从示例目录运行pod install。

需求

安装

Stackable 通过 CocoaPods 提供。要安装它，只需将以下行添加到您的 Podfile 中：

pod 'RPStackable'

作者

[email protected]

许可

Stackable遵循MIT许可协议。有关更多信息，请参阅LICENSE文件。