FlexibleRowHeightGridLayout 是一个 UICollectionViewLayout
,用于在网格中排列自适应大小的单元格,并设计用于支持辅助功能,特别是 动态类型。它设计用于在文本大小(UIContentSizeCategory
)和设备朝向发生变化时自动重排。在此布局中,行高是灵活的,即每一行可能具有不同的高度,行的长度由该行中最高的单元格决定,因此行的长度将始终适合行内的内容。
要了解更多关于如何使用 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
的项的高度。使用这些信息,布局能够计算出正确的行高。当计算文本高度时,您会发现使用 NSString
的 func 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
作者
许可协议
FlexibleRowHeightGridLayout遵循MIT许可协议。更多信息请参阅LICENSE文件。
附加软件
控件
- AnimatedGradientView - 使iOS中的渐变动画变得简单强大的控件。
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 |
---|---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
工具
- Clear DerivedData - 通过在Terminal中键入
cdd
快速清除您的DerivedData目录的实用程序。 - Config Validator - 作为CI过程的一部分,验证和上传您的配置文件,并清除CDN中的缓存。
- IPA Uploader - 将您的应用程序上传到TestFlight和App Store。
- 调色板 - 使您的TypographyKit颜色调色板可在Xcode Interface Builder中使用。
Config Validator | IPA Uploader | 调色板 |
---|---|---|
![]() |
![]() |
![]() |