CocosPlugin/creator-collection-view
1
0
Fork 0
mirror of https://github.com/568071718/creator-collection-view synced 2025-11-04 05:15:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

更新一些项目描述

Browse Source
This commit is contained in:
o.o.c
2025-01-08 23:39:02 +08:00
parent 1c825731dc
commit 27a48bd270
9 changed files with 1204 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
doc/md/layout.md
View File

@@ -66,4 +66,15 @@ YXLayout 主要就是负责管理自定义的 YXLayoutAttributes 对象，在 YX
可以参考项目里的 table-layout 的实现，了解 YXLayout 的基本工作流程
## table-layout
1. [实现一个类似 TableView 的布局规则 table-layout (了解基本的自定义布局流程)](./table-layout-1.md)
1. [使 table-layout 支持不同高度的节点 (了解如何支持不同大小的单元项)](./table-layout-2.md)
1. [使 table-layout 支持分区配置 (了解组件的分区概念)](./table-layout-3.md)
1. [使 table-layout 支持区头/区尾配置 (简单了解 supplementary 补充视图概念)](./table-layout-4.md)
1. [使 table-layout 支持区头/区尾吸附效果 (了解如何实时更新节点布局属性)](./table-layout-5.md)
1. [table-layout 性能优化 (了解组件的性能缺陷)](./table-layout-6.md)
以上就是 table-layout 完整的实现过程，有兴趣的可以了解一下

83
doc/md/table-layout-1.md Normal file
View File

@@ -0,0 +1,83 @@
基本的实现一个垂直方向排列的布局规则
```ts
export class YXTableLayout extends YXLayout {
/**
* 行高
*/
rowHeight: number = 100
/**
* 内容上边距
*/
top: number = 0
/**
* 内容下边距
*/
bottom: number = 0
/**
* 节点之间间距
*/
spacing: number = 0
prepare(collectionView: YXCollectionView): void {
// 设置列表的滚动方向(这套布局固定为垂直方向滚动)
collectionView.scrollView.horizontal = false
collectionView.scrollView.vertical = true
if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.HORIZONTAL) {
// 由于这套布局规则只支持垂直方向布局，当外部配置了水平方向滚动时这里可以给个警告
warn(`YXTableLayout 仅支持垂直方向排列`)
}
// 获取列表内一共多少数据，这里传的这个 0 表示的区，在目前不支持分区的情况可以先不用考虑这个，后面会说到
let numberOfItems = collectionView.getNumberOfItems(0)
// 清空一下布局属性数组
this.attributes = []
// 获取列表宽度
const contentWidth = collectionView.node.getComponent(UITransform).width
// 声明一个临时变量，用来记录当前所有内容的总高度
let contentHeight = this.top
// 为每条数据对应的生成一个布局属性
for (let item = 0; item < numberOfItems; item++) {
// 创建索引
let indexPath = new YXIndexPath(0, item)
// 通过索引创建一个 cell 节点的布局属性
let attr = YXLayoutAttributes.layoutAttributesForCell(indexPath)
// 确定这个节点的位置
attr.frame.x = 0
attr.frame.width = contentWidth
attr.frame.height = this.rowHeight
attr.frame.y = contentHeight + (item > 0 ? this.spacing : 0)
// 重要: 保存布局属性
this.attributes.push(attr)
// 更新当前内容高度
contentHeight = attr.frame.yMax
}
// 高度补一个底部间距
contentHeight = contentHeight + this.bottom
// 重要: 设置内容区域总大小，只有确定了滚动区域的大小列表才能滚动
this.contentSize = new math.Size(contentWidth, contentHeight)
}
initOffset(collectionView: YXCollectionView): void {
// 列表首次刷新时，调整一下列表的偏移位置
collectionView.scrollView.scrollToTop()
}
}
```

86
doc/md/table-layout-2.md Normal file
View File

@@ -0,0 +1,86 @@
使 table-layout 支持不同高度的节点
```ts
export class YXTableLayout extends YXLayout {
/**
* 行高
*/
rowHeight: number | ((indexPath: YXIndexPath) => number) = 100
/**
* 内容上边距
*/
top: number = 0
/**
* 内容下边距
*/
bottom: number = 0
/**
* 节点之间间距
*/
spacing: number = 0
prepare(collectionView: YXCollectionView): void {
// 设置列表的滚动方向(这套布局固定为垂直方向滚动)
collectionView.scrollView.horizontal = false
collectionView.scrollView.vertical = true
if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.HORIZONTAL) {
// 由于这套布局规则只支持垂直方向布局，当外部配置了水平方向滚动时这里可以给个警告
warn(`YXTableLayout 仅支持垂直方向排列`)
}
// 获取列表内一共多少数据，这里传的这个 0 表示的区，在目前不支持分区的情况可以先不用考虑这个，后面会说到
let numberOfItems = collectionView.getNumberOfItems(0)
// 清空一下布局属性数组
this.attributes = []
// 获取列表宽度
const contentWidth = collectionView.node.getComponent(UITransform).width
// 声明一个临时变量，用来记录当前所有内容的总高度
let contentHeight = this.top
// 为每条数据对应的生成一个布局属性
for (let item = 0; item < numberOfItems; item++) {
// 创建索引
let indexPath = new YXIndexPath(0, item)
// 通过索引创建一个 cell 节点的布局属性
let attr = YXLayoutAttributes.layoutAttributesForCell(indexPath)
// 通过索引获取这个节点的高度
let rowHeight = this.rowHeight instanceof Function ? this.rowHeight(indexPath) : this.rowHeight
// 确定这个节点的位置
attr.frame.x = 0
attr.frame.width = contentWidth
attr.frame.height = rowHeight
attr.frame.y = contentHeight + (item > 0 ? this.spacing : 0)
// 重要: 保存布局属性
this.attributes.push(attr)
// 更新当前内容高度
contentHeight = attr.frame.yMax
}
// 高度补一个底部间距
contentHeight = contentHeight + this.bottom
// 重要: 设置内容区域总大小，只有确定了滚动区域的大小列表才能滚动
this.contentSize = new math.Size(contentWidth, contentHeight)
}
initOffset(collectionView: YXCollectionView): void {
// 列表首次刷新时，调整一下列表的偏移位置
collectionView.scrollView.scrollToTop()
}
}
```

95
doc/md/table-layout-3.md Normal file
View File

@@ -0,0 +1,95 @@
使 table-layout 支持分区配置
```ts
export class YXTableLayout extends YXLayout {
/**
* 行高
*/
rowHeight: number | ((indexPath: YXIndexPath) => number) = 100
/**
* 内容上边距
*/
top: number = 0
/**
* 内容下边距
*/
bottom: number = 0
/**
* 节点之间间距
*/
spacing: number = 0
prepare(collectionView: YXCollectionView): void {
// 设置列表的滚动方向(这套布局固定为垂直方向滚动)
collectionView.scrollView.horizontal = false
collectionView.scrollView.vertical = true
if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.HORIZONTAL) {
// 由于这套布局规则只支持垂直方向布局，当外部配置了水平方向滚动时这里可以给个警告
warn(`YXTableLayout 仅支持垂直方向排列`)
}
// 清空一下布局属性数组
this.attributes = []
// 获取列表宽度
const contentWidth = collectionView.node.getComponent(UITransform).width
// 声明一个临时变量，用来记录当前所有内容的总高度
let contentHeight = 0
// 获取列表一共分多少个区
let numberOfSections = collectionView.getNumberOfSections()
// 为每条数据对应的生成一个布局属性
for (let section = 0; section < numberOfSections; section++) {
// 将 top 配置应用到每个区
contentHeight = contentHeight + this.top
// 获取这个区内的内容数量，注意这里传入的是 section
let numberOfItems = collectionView.getNumberOfItems(section)
for (let item = 0; item < numberOfItems; item++) {
// 创建索引，注意这里的 section 已经改为正确的 section 了
let indexPath = new YXIndexPath(section, item)
// 通过索引创建一个 cell 节点的布局属性
let attr = YXLayoutAttributes.layoutAttributesForCell(indexPath)
// 通过索引获取这个节点的高度
let rowHeight = this.rowHeight instanceof Function ? this.rowHeight(indexPath) : this.rowHeight
// 确定这个节点的位置
attr.frame.x = 0
attr.frame.width = contentWidth
attr.frame.height = rowHeight
attr.frame.y = contentHeight + (item > 0 ? this.spacing : 0)
// 重要: 保存布局属性
this.attributes.push(attr)
// 更新当前内容高度
contentHeight = attr.frame.yMax
}
// 高度补一个底部间距，跟 top 一样，也是应用到每个区
contentHeight = contentHeight + this.bottom
}
// 重要: 设置内容区域总大小，只有确定了滚动区域的大小列表才能滚动
this.contentSize = new math.Size(contentWidth, contentHeight)
}
initOffset(collectionView: YXCollectionView): void {
// 列表首次刷新时，调整一下列表的偏移位置
collectionView.scrollView.scrollToTop()
}
}
```

159
doc/md/table-layout-4.md Normal file
View File

@@ -0,0 +1,159 @@
使 table-layout 支持区头/区尾配置
```ts
enum _yx_table_layout_supplementary_kinds {
HEADER = 'header',
FOOTER = 'footer',
}
export class YXTableLayout extends YXLayout {
/**
* 行高
*/
rowHeight: number | ((indexPath: YXIndexPath) => number) = 100
/**
* 内容上边距
*/
top: number = 0
/**
* 内容下边距
*/
bottom: number = 0
/**
* 节点之间间距
*/
spacing: number = 0
/**
* 区头高度
*/
sectionHeaderHeight: number | ((section: number) => number) = null
/**
* 区尾高度
*/
sectionFooterHeight: number | ((section: number) => number) = null
/**
* 区头/区尾标识
*/
static SupplementaryKinds = _yx_table_layout_supplementary_kinds
prepare(collectionView: YXCollectionView): void {
// 设置列表的滚动方向(这套布局固定为垂直方向滚动)
collectionView.scrollView.horizontal = false
collectionView.scrollView.vertical = true
if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.HORIZONTAL) {
// 由于这套布局规则只支持垂直方向布局，当外部配置了水平方向滚动时这里可以给个警告
warn(`YXTableLayout 仅支持垂直方向排列`)
}
// 清空一下布局属性数组
this.attributes = []
// 获取列表宽度
const contentWidth = collectionView.node.getComponent(UITransform).width
// 声明一个临时变量，用来记录当前所有内容的总高度
let contentHeight = 0
// 获取列表一共分多少个区
let numberOfSections = collectionView.getNumberOfSections()
// 为每条数据对应的生成一个布局属性
for (let section = 0; section < numberOfSections; section++) {
// 创建一个区索引
let sectionIndexPath = new YXIndexPath(section, 0)
// 通过区索引创建一个区头节点布局属性
let sectionHeaderHeight = 0
if (this.sectionHeaderHeight) {
sectionHeaderHeight = this.sectionHeaderHeight instanceof Function ? this.sectionHeaderHeight(section) : this.sectionHeaderHeight
}
if (sectionHeaderHeight > 0) {
let headerAttr = YXLayoutAttributes.layoutAttributesForSupplementary(sectionIndexPath, YXTableLayout.SupplementaryKinds.HEADER)
// 确定这个节点的位置
headerAttr.frame.x = 0
headerAttr.frame.width = contentWidth
headerAttr.frame.height = sectionHeaderHeight
headerAttr.frame.y = contentHeight
// 重要: 保存布局属性
this.attributes.push(headerAttr)
// 更新整体内容高度
contentHeight = headerAttr.frame.yMax
}
// 将 top 配置应用到每个区
contentHeight = contentHeight + this.top
// 获取这个区内的内容数量，注意这里传入的是 section
let numberOfItems = collectionView.getNumberOfItems(section)
for (let item = 0; item < numberOfItems; item++) {
// 创建索引，注意这里的 section 已经改为正确的 section 了
let indexPath = new YXIndexPath(section, item)
// 通过索引创建一个 cell 节点的布局属性
let attr = YXLayoutAttributes.layoutAttributesForCell(indexPath)
// 通过索引获取这个节点的高度
let rowHeight = this.rowHeight instanceof Function ? this.rowHeight(indexPath) : this.rowHeight
// 确定这个节点的位置
attr.frame.x = 0
attr.frame.width = contentWidth
attr.frame.height = rowHeight
attr.frame.y = contentHeight + (item > 0 ? this.spacing : 0)
// 重要: 保存布局属性
this.attributes.push(attr)
// 更新当前内容高度
contentHeight = attr.frame.yMax
}
// 高度补一个底部间距，跟 top 一样，也是应用到每个区
contentHeight = contentHeight + this.bottom
// 通过区索引创建一个区尾节点布局属性
let sectionFooterHeight = 0
if (this.sectionFooterHeight) {
sectionFooterHeight = this.sectionFooterHeight instanceof Function ? this.sectionFooterHeight(section) : this.sectionFooterHeight
}
if (sectionFooterHeight > 0) {
let footerAttr = YXLayoutAttributes.layoutAttributesForSupplementary(sectionIndexPath, YXTableLayout.SupplementaryKinds.FOOTER)
// 确定这个节点的位置
footerAttr.frame.x = 0
footerAttr.frame.width = contentWidth
footerAttr.frame.height = sectionFooterHeight
footerAttr.frame.y = contentHeight
// 重要: 保存布局属性
this.attributes.push(footerAttr)
// 更新整体内容高度
contentHeight = footerAttr.frame.yMax
}
}
// 重要: 设置内容区域总大小，只有确定了滚动区域的大小列表才能滚动
this.contentSize = new math.Size(contentWidth, contentHeight)
}
initOffset(collectionView: YXCollectionView): void {
// 列表首次刷新时，调整一下列表的偏移位置
collectionView.scrollView.scrollToTop()
}
}
```

267
doc/md/table-layout-5.md Normal file
View File

@@ -0,0 +1,267 @@
使 table-layout 支持区头/区尾吸附效果
```ts
enum _yx_table_layout_supplementary_kinds {
HEADER = 'header',
FOOTER = 'footer',
}
export class YXTableLayout extends YXLayout {
/**
* 行高
*/
rowHeight: number | ((indexPath: YXIndexPath) => number) = 100
/**
* 内容上边距
*/
top: number = 0
/**
* 内容下边距
*/
bottom: number = 0
/**
* 节点之间间距
*/
spacing: number = 0
/**
* 区头高度
*/
sectionHeaderHeight: number | ((section: number) => number) = null
/**
* 区尾高度
*/
sectionFooterHeight: number | ((section: number) => number) = null
/**
* 钉住 header 的位置 ( header 吸附在列表可见范围内 )
*/
sectionHeadersPinToVisibleBounds: boolean = false
/**
* 钉住 footer 的位置 ( footer 吸附在列表可见范围内 )
*/
sectionFootersPinToVisibleBounds: boolean = false
/**
* 区头/区尾标识
*/
static SupplementaryKinds = _yx_table_layout_supplementary_kinds
protected originalHeaderRect: Map<number, math.Rect> = new Map() // 保存所有 header 的原始位置
protected originalFooterRect: Map<number, math.Rect> = new Map() // 保存所有 footer 的原始位置
prepare(collectionView: YXCollectionView): void {
// 设置列表的滚动方向(这套布局固定为垂直方向滚动)
collectionView.scrollView.horizontal = false
collectionView.scrollView.vertical = true
if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.HORIZONTAL) {
// 由于这套布局规则只支持垂直方向布局，当外部配置了水平方向滚动时这里可以给个警告
warn(`YXTableLayout 仅支持垂直方向排列`)
}
// 清空一下布局属性数组
this.attributes = []
this.originalHeaderRect.clear()
this.originalFooterRect.clear()
// 获取列表宽度
const contentWidth = collectionView.node.getComponent(UITransform).width
// 声明一个临时变量，用来记录当前所有内容的总高度
let contentHeight = 0
// 获取列表一共分多少个区
let numberOfSections = collectionView.getNumberOfSections()
// 为每条数据对应的生成一个布局属性
for (let section = 0; section < numberOfSections; section++) {
// 创建一个区索引
let sectionIndexPath = new YXIndexPath(section, 0)
// 通过区索引创建一个区头节点布局属性
let sectionHeaderHeight = 0
if (this.sectionHeaderHeight) {
sectionHeaderHeight = this.sectionHeaderHeight instanceof Function ? this.sectionHeaderHeight(section) : this.sectionHeaderHeight
}
if (sectionHeaderHeight > 0) {
let headerAttr = YXLayoutAttributes.layoutAttributesForSupplementary(sectionIndexPath, YXTableLayout.SupplementaryKinds.HEADER)
// 确定这个节点的位置
headerAttr.frame.x = 0
headerAttr.frame.width = contentWidth
headerAttr.frame.height = sectionHeaderHeight
headerAttr.frame.y = contentHeight
// 调整层级
headerAttr.zIndex = 1
// 重要: 保存布局属性
this.attributes.push(headerAttr)
this.originalHeaderRect.set(section, headerAttr.frame.clone())
// 更新整体内容高度
contentHeight = headerAttr.frame.yMax
}
// 将 top 配置应用到每个区
contentHeight = contentHeight + this.top
// 获取这个区内的内容数量，注意这里传入的是 section
let numberOfItems = collectionView.getNumberOfItems(section)
for (let item = 0; item < numberOfItems; item++) {
// 创建索引，注意这里的 section 已经改为正确的 section 了
let indexPath = new YXIndexPath(section, item)
// 通过索引创建一个 cell 节点的布局属性
let attr = YXLayoutAttributes.layoutAttributesForCell(indexPath)
// 通过索引获取这个节点的高度
let rowHeight = this.rowHeight instanceof Function ? this.rowHeight(indexPath) : this.rowHeight
// 确定这个节点的位置
attr.frame.x = 0
attr.frame.width = contentWidth
attr.frame.height = rowHeight
attr.frame.y = contentHeight + (item > 0 ? this.spacing : 0)
// 重要: 保存布局属性
this.attributes.push(attr)
// 更新当前内容高度
contentHeight = attr.frame.yMax
}
// 高度补一个底部间距，跟 top 一样，也是应用到每个区
contentHeight = contentHeight + this.bottom
// 通过区索引创建一个区尾节点布局属性
let sectionFooterHeight = 0
if (this.sectionFooterHeight) {
sectionFooterHeight = this.sectionFooterHeight instanceof Function ? this.sectionFooterHeight(section) : this.sectionFooterHeight
}
if (sectionFooterHeight > 0) {
let footerAttr = YXLayoutAttributes.layoutAttributesForSupplementary(sectionIndexPath, YXTableLayout.SupplementaryKinds.FOOTER)
// 确定这个节点的位置
footerAttr.frame.x = 0
footerAttr.frame.width = contentWidth
footerAttr.frame.height = sectionFooterHeight
footerAttr.frame.y = contentHeight
// 调整层级
footerAttr.zIndex = 1
// 重要: 保存布局属性
this.attributes.push(footerAttr)
this.originalFooterRect.set(section, footerAttr.frame.clone())
// 更新整体内容高度
contentHeight = footerAttr.frame.yMax
}
}
// 重要: 设置内容区域总大小，只有确定了滚动区域的大小列表才能滚动
this.contentSize = new math.Size(contentWidth, contentHeight)
}
initOffset(collectionView: YXCollectionView): void {
// 列表首次刷新时，调整一下列表的偏移位置
collectionView.scrollView.scrollToTop()
}
layoutAttributesForElementsInRect(rect: math.Rect, collectionView: YXCollectionView): YXLayoutAttributes[] {
let numberOfSections = collectionView.getNumberOfSections()
let scrollOffset = collectionView.scrollView.getScrollOffset()
for (let index = 0; index < this.attributes.length; index++) {
const element = this.attributes[index];
if (element.elementCategory === 'Supplementary') {
if (this.sectionHeadersPinToVisibleBounds && element.supplementaryKinds === YXTableLayout.SupplementaryKinds.HEADER) {
const originalFrame = this.originalHeaderRect.get(element.indexPath.section)
element.frame.y = originalFrame.y
if (scrollOffset.y > originalFrame.y) {
element.frame.y = scrollOffset.y
}
const nextOriginalFrame = this.getNextOriginalFrame(element.indexPath.section, YXTableLayout.SupplementaryKinds.FOOTER, numberOfSections)
if (nextOriginalFrame) {
if (element.frame.yMax > nextOriginalFrame.y) {
element.frame.y = nextOriginalFrame.y - element.frame.height
}
}
}
if (this.sectionFootersPinToVisibleBounds && element.supplementaryKinds === YXTableLayout.SupplementaryKinds.FOOTER) {
let bottom = scrollOffset.y + collectionView.scrollView.view.height
const originalFrame = this.originalFooterRect.get(element.indexPath.section)
const previousOriginalFrame = this.getPreviousOriginalFrame(element.indexPath.section, YXTableLayout.SupplementaryKinds.HEADER)
element.frame.y = originalFrame.y
if (bottom < originalFrame.yMax) {
element.frame.y = bottom - element.frame.height
if (previousOriginalFrame) {
if (element.frame.y < previousOriginalFrame.yMax) {
element.frame.y = previousOriginalFrame.yMax
}
}
}
}
}
}
return this.attributes
}
shouldUpdateAttributesZIndex(): boolean {
return this.sectionHeadersPinToVisibleBounds || this.sectionFootersPinToVisibleBounds
}
shouldUpdateAttributesForBoundsChange(): boolean {
return this.sectionHeadersPinToVisibleBounds || this.sectionFootersPinToVisibleBounds
}
/**
* 获取 `section` 下一个 header 或者 footer 的位置
*/
protected getNextOriginalFrame(section: number, kinds: _yx_table_layout_supplementary_kinds, total: number) {
if (section >= total) { return null }
if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
let result = this.originalHeaderRect.get(section)
if (result) { return result }
return this.getNextOriginalFrame(section, YXTableLayout.SupplementaryKinds.FOOTER, total)
}
if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
let result = this.originalFooterRect.get(section)
if (result) { return result }
return this.getNextOriginalFrame(section + 1, YXTableLayout.SupplementaryKinds.HEADER, total)
}
return null
}
/**
* 获取 `section` 前一个 header 或者 footer 的位置
*/
protected getPreviousOriginalFrame(section: number, kinds: _yx_table_layout_supplementary_kinds) {
if (section < 0) { return null }
if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
let result = this.originalHeaderRect.get(section)
if (result) { return result }
return this.getPreviousOriginalFrame(section - 1, YXTableLayout.SupplementaryKinds.FOOTER)
}
if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
let result = this.originalFooterRect.get(section)
if (result) { return result }
return this.getPreviousOriginalFrame(section, YXTableLayout.SupplementaryKinds.HEADER)
}
return null
}
}
```

354
doc/md/table-layout-6.md Normal file
View File

@@ -0,0 +1,354 @@
通过二分查找优化 table-layout 性能
```ts
enum _yx_table_layout_supplementary_kinds {
HEADER = 'header',
FOOTER = 'footer',
}
export class YXTableLayout extends YXLayout {
/**
* 行高
*/
rowHeight: number | ((indexPath: YXIndexPath) => number) = 100
/**
* 内容上边距
*/
top: number = 0
/**
* 内容下边距
*/
bottom: number = 0
/**
* 节点之间间距
*/
spacing: number = 0
/**
* 区头高度
*/
sectionHeaderHeight: number | ((section: number) => number) = null
/**
* 区尾高度
*/
sectionFooterHeight: number | ((section: number) => number) = null
/**
* 钉住 header 的位置 ( header 吸附在列表可见范围内 )
*/
sectionHeadersPinToVisibleBounds: boolean = false
/**
* 钉住 footer 的位置 ( footer 吸附在列表可见范围内 )
*/
sectionFootersPinToVisibleBounds: boolean = false
/**
* 区头/区尾标识
*/
static SupplementaryKinds = _yx_table_layout_supplementary_kinds
protected originalHeaderRect: Map<number, math.Rect> = new Map() // 保存所有 header 的原始位置
protected originalFooterRect: Map<number, math.Rect> = new Map() // 保存所有 footer 的原始位置
// 为了优化查找，额外维护几个数组按类别管理所有的布局属性，空间换时间
protected allCellAttributes: YXLayoutAttributes[] = []
protected allHeaderAttributes: YXLayoutAttributes[] = []
protected allFooterAttributes: YXLayoutAttributes[] = []
prepare(collectionView: YXCollectionView): void {
// 设置列表的滚动方向(这套布局固定为垂直方向滚动)
collectionView.scrollView.horizontal = false
collectionView.scrollView.vertical = true
if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.HORIZONTAL) {
// 由于这套布局规则只支持垂直方向布局，当外部配置了水平方向滚动时这里可以给个警告
warn(`YXTableLayout 仅支持垂直方向排列`)
}
// 清空一下布局属性数组
this.attributes = []
this.allCellAttributes = []
this.allHeaderAttributes = []
this.allFooterAttributes = []
this.originalHeaderRect.clear()
this.originalFooterRect.clear()
// 获取列表宽度
const contentWidth = collectionView.node.getComponent(UITransform).width
// 声明一个临时变量，用来记录当前所有内容的总高度
let contentHeight = 0
// 获取列表一共分多少个区
let numberOfSections = collectionView.getNumberOfSections()
// 为每条数据对应的生成一个布局属性
for (let section = 0; section < numberOfSections; section++) {
// 创建一个区索引
let sectionIndexPath = new YXIndexPath(section, 0)
// 通过区索引创建一个区头节点布局属性
let sectionHeaderHeight = 0
if (this.sectionHeaderHeight) {
sectionHeaderHeight = this.sectionHeaderHeight instanceof Function ? this.sectionHeaderHeight(section) : this.sectionHeaderHeight
}
if (sectionHeaderHeight > 0) {
let headerAttr = YXLayoutAttributes.layoutAttributesForSupplementary(sectionIndexPath, YXTableLayout.SupplementaryKinds.HEADER)
// 确定这个节点的位置
headerAttr.frame.x = 0
headerAttr.frame.width = contentWidth
headerAttr.frame.height = sectionHeaderHeight
headerAttr.frame.y = contentHeight
// 调整层级
headerAttr.zIndex = 1
// 重要: 保存布局属性
this.attributes.push(headerAttr)
this.originalHeaderRect.set(section, headerAttr.frame.clone())
this.allHeaderAttributes.push(headerAttr)
// 更新整体内容高度
contentHeight = headerAttr.frame.yMax
}
// 将 top 配置应用到每个区
contentHeight = contentHeight + this.top
// 获取这个区内的内容数量，注意这里传入的是 section
let numberOfItems = collectionView.getNumberOfItems(section)
for (let item = 0; item < numberOfItems; item++) {
// 创建索引，注意这里的 section 已经改为正确的 section 了
let indexPath = new YXIndexPath(section, item)
// 通过索引创建一个 cell 节点的布局属性
let attr = YXLayoutAttributes.layoutAttributesForCell(indexPath)
// 通过索引获取这个节点的高度
let rowHeight = this.rowHeight instanceof Function ? this.rowHeight(indexPath) : this.rowHeight
// 确定这个节点的位置
attr.frame.x = 0
attr.frame.width = contentWidth
attr.frame.height = rowHeight
attr.frame.y = contentHeight + (item > 0 ? this.spacing : 0)
// 重要: 保存布局属性
this.attributes.push(attr)
this.allCellAttributes.push(attr)
// 更新当前内容高度
contentHeight = attr.frame.yMax
}
// 高度补一个底部间距，跟 top 一样，也是应用到每个区
contentHeight = contentHeight + this.bottom
// 通过区索引创建一个区尾节点布局属性
let sectionFooterHeight = 0
if (this.sectionFooterHeight) {
sectionFooterHeight = this.sectionFooterHeight instanceof Function ? this.sectionFooterHeight(section) : this.sectionFooterHeight
}
if (sectionFooterHeight > 0) {
let footerAttr = YXLayoutAttributes.layoutAttributesForSupplementary(sectionIndexPath, YXTableLayout.SupplementaryKinds.FOOTER)
// 确定这个节点的位置
footerAttr.frame.x = 0
footerAttr.frame.width = contentWidth
footerAttr.frame.height = sectionFooterHeight
footerAttr.frame.y = contentHeight
// 调整层级
footerAttr.zIndex = 1
// 重要: 保存布局属性
this.attributes.push(footerAttr)
this.originalFooterRect.set(section, footerAttr.frame.clone())
this.allFooterAttributes.push(footerAttr)
// 更新整体内容高度
contentHeight = footerAttr.frame.yMax
}
}
// 重要: 设置内容区域总大小，只有确定了滚动区域的大小列表才能滚动
this.contentSize = new math.Size(contentWidth, contentHeight)
}
initOffset(collectionView: YXCollectionView): void {
// 列表首次刷新时，调整一下列表的偏移位置
collectionView.scrollView.scrollToTop()
}
layoutAttributesForElementsInRect(rect: math.Rect, collectionView: YXCollectionView): YXLayoutAttributes[] {
let result = this.visibleElementsInRect(rect, collectionView)
if (this.sectionHeadersPinToVisibleBounds == false && this.sectionFootersPinToVisibleBounds == false) {
return result // 不需要调整节点位置，直接返回就好
}
let numberOfSections = collectionView.getNumberOfSections()
let scrollOffset = collectionView.scrollView.getScrollOffset()
for (let index = 0; index < result.length; index++) {
const element = result[index];
if (element.elementCategory === 'Supplementary') {
if (this.sectionHeadersPinToVisibleBounds && element.supplementaryKinds === YXTableLayout.SupplementaryKinds.HEADER) {
const originalFrame = this.originalHeaderRect.get(element.indexPath.section)
element.frame.y = originalFrame.y
if (scrollOffset.y > originalFrame.y) {
element.frame.y = scrollOffset.y
}
const nextOriginalFrame = this.getNextOriginalFrame(element.indexPath.section, YXTableLayout.SupplementaryKinds.FOOTER, numberOfSections)
if (nextOriginalFrame) {
if (element.frame.yMax > nextOriginalFrame.y) {
element.frame.y = nextOriginalFrame.y - element.frame.height
}
}
}
if (this.sectionFootersPinToVisibleBounds && element.supplementaryKinds === YXTableLayout.SupplementaryKinds.FOOTER) {
let bottom = scrollOffset.y + collectionView.scrollView.view.height
const originalFrame = this.originalFooterRect.get(element.indexPath.section)
const previousOriginalFrame = this.getPreviousOriginalFrame(element.indexPath.section, YXTableLayout.SupplementaryKinds.HEADER)
element.frame.y = originalFrame.y
if (bottom < originalFrame.yMax) {
element.frame.y = bottom - element.frame.height
if (previousOriginalFrame) {
if (element.frame.y < previousOriginalFrame.yMax) {
element.frame.y = previousOriginalFrame.yMax
}
}
}
}
}
}
return result
}
shouldUpdateAttributesZIndex(): boolean {
return this.sectionHeadersPinToVisibleBounds || this.sectionFootersPinToVisibleBounds
}
shouldUpdateAttributesForBoundsChange(): boolean {
return this.sectionHeadersPinToVisibleBounds || this.sectionFootersPinToVisibleBounds
}
/**
* 获取 `section` 下一个 header 或者 footer 的位置
*/
protected getNextOriginalFrame(section: number, kinds: _yx_table_layout_supplementary_kinds, total: number) {
if (section >= total) { return null }
if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
let result = this.originalHeaderRect.get(section)
if (result) { return result }
return this.getNextOriginalFrame(section, YXTableLayout.SupplementaryKinds.FOOTER, total)
}
if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
let result = this.originalFooterRect.get(section)
if (result) { return result }
return this.getNextOriginalFrame(section + 1, YXTableLayout.SupplementaryKinds.HEADER, total)
}
return null
}
/**
* 获取 `section` 前一个 header 或者 footer 的位置
*/
protected getPreviousOriginalFrame(section: number, kinds: _yx_table_layout_supplementary_kinds) {
if (section < 0) { return null }
if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
let result = this.originalHeaderRect.get(section)
if (result) { return result }
return this.getPreviousOriginalFrame(section - 1, YXTableLayout.SupplementaryKinds.FOOTER)
}
if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
let result = this.originalFooterRect.get(section)
if (result) { return result }
return this.getPreviousOriginalFrame(section, YXTableLayout.SupplementaryKinds.HEADER)
}
return null
}
/**
* 抽出来一个方法用来优化列表性能
* 在优化之前，可以先看一下 @see YXLayout.layoutAttributesForElementsInRect 关于返回值的说明
* 对于有序列表来说，一般都是可以通过二分查找来进行优化
*/
protected visibleElementsInRect(rect: math.Rect, collectionView: YXCollectionView) {
if (this.attributes.length <= 100) { return this.attributes } // 少量数据就不查了，直接返回全部
let result: YXLayoutAttributes[] = []
// header 跟 footer 暂时不考虑，数据相对来说不算很多，直接全部返回
result.push(...this.allHeaderAttributes)
result.push(...this.allFooterAttributes)
// 关于 cell，这里用二分查找来优化一下
// 首先通过二分先查出个大概位置
let midIdx = -1
let left = 0
let right = this.allCellAttributes.length - 1
while (left <= right && right >= 0) {
let mid = left + (right - left) / 2
mid = Math.floor(mid)
let attr = this.allCellAttributes[mid]
if (rect.intersects(attr.frame)) {
midIdx = mid
break
}
if (rect.yMax < attr.frame.yMin || rect.xMax < attr.frame.xMin) {
right = mid - 1
} else {
left = mid + 1
}
}
// 二分查找出错了，返回全部的布局属性
if (midIdx < 0) {
return this.attributes
}
// 把模糊查到这个先加进来
result.push(this.allCellAttributes[midIdx])
// 然后依次往前检查，直到超出当前的显示范围
let startIdx = midIdx
while (startIdx > 0) {
let idx = startIdx - 1
let attr = this.allCellAttributes[idx]
if (rect.intersects(attr.frame) == false) {
break
}
result.push(attr)
startIdx = idx
}
// 依次往后检查，直到超出当前的显示范围
let endIdx = midIdx
while (endIdx < this.allCellAttributes.length - 1) {
let idx = endIdx + 1
let attr = this.allCellAttributes[idx]
if (rect.intersects(attr.frame) == false) {
break
}
result.push(attr)
endIdx = idx
}
return result
}
}
```