蓝图 0.13.1

蓝图 0.13.1

Christoffer Winterkvist维护。



蓝图 0.13.1

Blueprints logo Blueprints Preview

CI Status Version Carthage Compatible Code Coverage License Platform Swift

描述

Blueprints Icon

Blueprints是一个旨在使您在使用collectionView flow layouts时更加轻松的flow layouts集合。它包含两个内置布局,这些布局非常灵活且在调用位置易于配置。它们支持诸如每行和每列的项目数等属性;这将计算所需适应屏幕上要显示的视图数所需的布局属性。

此框架还为您的自定义实现提供了一个良好的基础。通过扩展核心蓝图布局,您获得了对动画和布局属性缓存的内置支持。捆绑的默认动画器支持与原始表格视图相似的动画。如果您想提供自己的collectionView动画器,没问题;初始化布局时,您可以注入您选择的动画器。

功能

  • 🍭动画支持
  • 🤳🏻 性能优化
  • 📏内置垂直和水平布局
  • 📰支持头部和底部
  • 🖍支持粘性头部和底部
  • 🌈内置马赛克布局
  • 💦支持瀑布流的内置垂直布局
  • 📱iOS支持
  • 💻macOS支持
  • 📺tvOS支持
  • 🦖 Objective-C支持

预览

iOS macOS
iOS PReview macOS Preview

每一行中的元素是如何工作的?

如果你指定了希望在一个垂直布局中每行显示多少个元素,布局属性的宽度将被自动计算,考虑了区域缩进和元素间距,以确保所有视图都适合你的设计。例如,如果你设置每行希望显示两个元素,则两个视图将并排出现在同一行。如果你想创建一个表格布局,只需将每行元素数量设置为1。你也可以在这个变量中用于横向布局,但此时会用这个值来创建一个宽度以覆盖所需区域。如果你希望宽度跨越整个容器,只需将其设置为1;如果你想在带有提示的轮播布局中设置一个值,例如1.1,将渲染至少一个完整的元素并给用户提示有更多的视图可供滚动查看。

每一列中的元素是如何工作的?

每一列的元素是专门用于横向布局的,用于决定应该使用垂直轴展示多少个元素。如果你将其设置为2,则显示两个视图,一个在上,一个在下,之后按照相同的模式继续在水平方向上构建剩下的视图。

元素大小是如何工作的?

它就像一个普通的布局流,但有一点不同。如果你想使用常规元素大小提供一个静态大小,你可以这样做。如上所述,你还可以基于容器视图的宽度提供你希望在屏幕上显示的视图数量。为了提供动态大小,你可以让你集合视图代理遵守 UICollectionViewDelegateFlowLayoutNSCollectionViewDelegateFlowLayout。这样,你可以根据从数据源来的数据等计算出值。值得注意的是,使用 itemsPerRow 优先于其他选项。

动态尺寸预览

用法

垂直布局

let blueprintLayout = VerticalBlueprintLayout(
  itemsPerRow: 1.0,
  height: 50,
  minimumInteritemSpacing: 10,
  minimumLineSpacing: 10,
  sectionInset: EdgeInsets(top: 10, left: 10, bottom: 10, right: 10),
  stickyHeaders: true,
  stickyFooters: false
)
let collectionView = UICollectionView(frame: .zero,
                                      collectionViewLayout: blueprintLayout)

水平布局

let blueprintLayout = HorizontalBlueprintLayout(
  itemsPerRow: 1.0,
  itemsPerColumn: 2,
  height: 50,
  minimumInteritemSpacing: 10,
  minimumLineSpacing: 10,
  sectionInset: EdgeInsets(top: 10, left: 10, bottom: 10, right: 10),
  stickyHeaders: true,
  stickyFooters: true
)
let collectionView = UICollectionView(frame: .zero,
                                      collectionViewLayout: blueprintLayout)

马赛克布局

let mosaicLayout = VerticalMosaicBlueprintLayout(
  patternHeight: 400,
  minimumInteritemSpacing: 2,
  minimumLineSpacing: 2,
  sectionInset: EdgeInsets(top: 2, left: 2, bottom: 2, right: 2),
  patterns: [
    MosaicPattern(alignment: .left, direction: .vertical, amount: 2, multiplier: 0.6),
    MosaicPattern(alignment: .left, direction: .horizontal, amount: 2, multiplier: 0.33),
    MosaicPattern(alignment: .left, direction: .vertical, amount: 1, multiplier: 0.5),
    MosaicPattern(alignment: .left, direction: .vertical, amount: 1, multiplier: 0.5)
  ])
let collectionView = UICollectionView(frame: .zero,
                                      collectionViewLayout: mosaicLayout)

安装

蓝图(Blueprints) 通过 CocoaPods 提供。要安装,只需将以下行添加到您的 Podfile:

pod 'Blueprints'

蓝图(Blueprints) 还可以通过 Carthage 提供。只需在 Cartfile 中写入。

github "zenangst/Blueprints"

蓝图(Blueprints) 也可以手动安装。只需下载并将 文件夹拖放到您的项目中。

作者

贡献

我们希望您能为 Blueprints 做出贡献,更多信息请查看 贡献指南 文件。

许可协议

Blueprints 在 MIT 许可协议下可用。更多信息请查看 许可协议 文件。