FlexibleRowHeightGridLayout 2.0.0

FlexibleRowHeightGridLayout 2.0.0

Ross Butler 维护。



FlexibleRowHeightGridLayout

CI Status Version Carthage compatible License Platform Twitter Swift 5.0

FlexibleRowHeightGridLayout 是一个 UICollectionViewLayout,用于在网格中排列自适应大小的单元格,并设计用于支持辅助功能,特别是 动态类型。它设计用于在文本大小(UIContentSizeCategory)和设备朝向发生变化时自动重排。在此布局中,行高是灵活的,即每一行可能具有不同的高度,行的长度由该行中最高的单元格决定,因此行的长度将始终适合行内的内容。

Illustration of flexible row heights

要了解更多关于如何使用 FlexibleRowHeightGridLayout 的信息,请查看 博客文章 或者使用下面的目录

功能

  • 支持文本大小变化的网格布局 - 将自动与 UIContentSizeCategory动态类型)变化重新布局。
  • 支持自适应大小的 UICollectionViewCells
  • 支持包含标题和/或页脚的分区。

基本要求

FlexibleRowHeightGridLayout 使用 Swift 5.0 编写,可在 iOS 8.0 或更高版本上使用。

安装

Cocoapods

CocoaPods 是一个依赖管理器,可以将依赖项集成到您的 Xcode 工作区中。要使用 Ruby gems 安装它,请运行以下命令。

gem install cocoapods

要使用 Cocoapods 安装 FlexibleRowHeightGridLayout,只需将以下行添加到您的 Podfile 中。

pod "FlexibleRowHeightGridLayout"

然后运行以下命令:

pod install

更多信息请参阅 此处

Carthage

Carthage 是一个依赖管理器,可以为手动集成到项目中生成二进制文件。您可以使用 Homebrew 通过以下命令进行安装:

brew update
brew install carthage

要使用 Carthage 将 FlexibleRowHeightGridLayout 集成到您的项目中,请将以下行添加到项目的 Cartfile。

github "rwbutler/FlexibleRowHeightGridLayout"

从 macOS 终端运行 carthage update --platform iOS 以构建框架,然后将 FlexibleRowHeightGridLayout.framework 拖入 Xcode 项目中。

更多信息请参阅 此处

Swift Package Manager

Xcode 11 包含了对 Swift Package Manager 的支持。为了将 FlexibleRowHeightGridLayout 添加到 Xcode 11 中的项目中,从 File 菜单中选择 Swift Packages,然后选择 添加包依赖项

将要求输入包仓库 URL 的对话框中,URL 为

https://github.com/rwbutler/FlexibleRowHeightGridLayout

验证 URL 后,Xcode 将提示您选择是将特定分支、提交或版本发布拉入项目。

进行下一步,您将被要求选择要集成到目标中的包产品。将有一个名为 FlexibleRowHeightGridLayout 的单独包产品,应该被预先选中。请确保您的主应用程序目标已从对话框最右侧的列中选中,然后单击“完成”以完成集成。

使用

为了让您的 UICollectionView 使用 FlexibleRowHeightGridLayout 来布局内容,您可以实例化一个新的对象,并将其分配给集合视图的 collectionViewLayout 属性。如果您在 Interface Builder 中定义了集合视图,如下所示:

let layout = FlexibleRowHeightGridLayout()
layout.delegate = self
collectionView.collectionViewLayout = layout
// Following line is only required if content has already been loaded before collectionViewLayout property set.
collectionView.reloadData()

或者,如果您通过程序实例化 UICollectionView,则可以将布局传递给 UICollectionView 的初始化程序。

let layout = FlexibleRowHeightGridLayout()
layout.delegate = self
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)

注意,在这两种情况下,您都需要提供布局代理——FlexibleRowHeightGridLayoutDelegate 的实现。

FlexibleRowHeightGridLayoutDelegate

该代理定义了两个必须实现的方法,以便允许 FlexibleRowHeightGridLayout 正确布局项目。这是

  • func collectionView(_ collectionView: UICollectionView, layout: FlexibleRowHeightGridLayout, heightForItemAt indexPath: IndexPath) -> CGFloat

应该返回给定 IndexPath 的项的高度。使用这些信息,布局能够计算出正确的行高。当计算文本高度时,您会发现使用 NSStringfunc boundingRect(with size: options: attributes: context:) -> CGRect 函数很有用,如下所示:

let constraintRect = CGSize(width: columnWidth, height: .greatestFiniteMagnitude)
let textHeight = "Some text".boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [.font: font], context: nil).height

为了帮助您确定内容的高度,FlexibleRowHeightGridLayout 提供了一些有用的方法,例如 textHeight(_ text: String, font: UIFont),以帮助您计算出使用指定字体渲染的字符串所需的高度。如果您的单元格包含一个标签,该标签固定在单元格内容视图的每个边缘,则单元格内容的高度可以很容易地计算如下:

func collectionView(_ collectionView: UICollectionView, layout: FlexibleRowHeightGridLayout, heightForItemAt indexPath: IndexPath) -> CGFloat {
    let text = dataSource.item(at: indexPath.item)
    let font = UIFont.preferredFont(forTextStyle: .body)
    return layout.textHeight(text, font: font)
}

这些辅助方法对于已经在使用 TypographyKit(一个也支持动态类型,在用户更改设备上的文本大小偏好时自动更新 UIKit 元素的文本大小)的开发人员特别有用。计算包含单个标签的单元格的高度的方法如下所示。

func collectionView(_ collectionView: UICollectionView, layout: FlexibleRowHeightGridLayout, heightForItemAt indexPath: IndexPath) -> CGFloat {
    let text = dataSource.item(at: indexPath.item)
    let font = Typography(for: .cellText).font()
    return layout.textHeight(text, font: font)
}

或者,如果您的单元格在 nib 中定义,则可以膨胀单元格以计算单元格高度,如下所示。

let text = dataSource.item(at: indexPath.item)
guard let nib = Bundle.main.loadNibNamed("CustomCell", owner: CustomCell.self, options: nil), let cell = nib?[0] as? CustomCell else {
    return
}

// Ensure that your content has been set
cell.label.text = text

// Assuming your custom cell has a content view
cell.contentView.setNeedsLayout()
cell.contentView.layoutIfNeeded()
let size = cell.contentView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
return size.height
  • func numberOfColumns(for size: CGSize) -> Int

应根据 UICollectionView 的指定大小返回 UICollectionView 网格中的列数。例如,当设备处于横屏时,UICollectionView 的边界可能会更大,因此当设备处于横屏时,您可能希望您的 UICollectionView 有 4 列,而在纵向时只有 3 列。

如果您希望将标题和/或页脚包含到您的 UICollectionView 中,您可以可选地实现另外两个代理方法。

  • @objc optional func collectionView(_ collectionView: UICollectionView, layout: FlexibleRowHeightGridLayout, referenceHeightForHeaderInSection section: Int) -> CGFloat

应该在您的UICollectionView中返回头部的高度。如果从该函数返回的值为零,则不会添加头部。

  • @objc可选func collectionView(_ collectionView: UICollectionView, layout: FlexibleRowHeightGridLayout, referenceHeightForFooterInSection section: Int) -> CGFloat

应该在您的UICollectionView中返回脚部的高度。如果从该函数返回的值为零,则不会添加脚部。

常见问题解答(FAQS)

这个布局支持分区头部和/或尾部吗?

是,为了在您的UICollectionView中添加分区头部和/或尾部,请确保您为FlexibleRowHeightGridLayoutDelegate中的两个可选委托方法提供了实现。

  • @objc optional func collectionView(_ collectionView: UICollectionView, layout: FlexibleRowHeightGridLayout, referenceHeightForHeaderInSection section: Int) -> CGFloat

  • @objc可选func collectionView(_ collectionView: UICollectionView, layout: FlexibleRowHeightGridLayout, referenceHeightForFooterInSection section: Int) -> CGFloat

作者

Ross Butler

许可协议

FlexibleRowHeightGridLayout遵循MIT许可协议。更多信息请参阅LICENSE文件

附加软件

控件

AnimatedGradientView
AnimatedGradientView

框架

  • Cheats - 为现代iOS应用提供的复古作弊码。
  • Connectivity - 改进 Reachability,用于在您的iOS应用程序中确定互联网连接。
  • FeatureFlags - 允许开发者为功能标志配置、运行使用捆绑的/远程托管JSON配置文件的多项A/B或MVT测试。
  • FlexibleRowHeightGridLayout - 设计用于支持Dynamic Type的UICollectionView网格布局,允许每行的尺寸与内容相匹配。
  • Skylark - 一个完全使用Swift编写的BDD测试框架,用于使用Gherkin语法编写Cucumber场景。
  • TailorSwift - 一组有用的Swift Core Library / Foundation框架扩展。
  • TypographyKit - 支持 Dynamic Type 的iOS上的一致且可访问的视觉样式。
  • Updates - 自动检测应用程序更新,并温和地提示用户进行更新。
Cheats Connectivity FeatureFlags Skylark TypographyKit Updates
Cheats Connectivity FeatureFlags Skylark TypographyKit Updates

工具

  • Clear DerivedData - 通过在Terminal中键入cdd快速清除您的DerivedData目录的实用程序。
  • Config Validator - 作为CI过程的一部分,验证和上传您的配置文件,并清除CDN中的缓存。
  • IPA Uploader - 将您的应用程序上传到TestFlight和App Store。
  • 调色板 - 使您的TypographyKit颜色调色板可在Xcode Interface Builder中使用。
Config Validator IPA Uploader 调色板
Config Validator IPA Uploader Palette