@cc-component/cc-ex-component 1.1.6 → 1.1.7

package/assets/lib/collectView/lib-ext/yx-page-view.ts

@@ -0,0 +1,232 @@
+import { _decorator, Component, Node, ScrollView } from 'cc';
+import { YXCollectionView, YXIndexPath } from '../lib_collect/yx-collection-view';
+import { YXFlowLayout } from '../lib_collect/yx-flow-layout';
+const { ccclass, property } = _decorator;
+
+/**
+ * 基于 YXCollectionView 和 YXFlowLayout 封装的一个简单的 PageView
+ * 请注意，这个组件更多是为了演示如何基于 YXCollectionView 来实现 PageView 相关的需求，并非完整的功能组件
+ * 如果这个组件符合业务的话可以直接拿来用，如果满足不了需求，可以根据实际业务，选择开放更多的配置或者直接使用 YXCollectionView
+ * 
+ * ---
+ * 此组件说明
+ * - 支持一般的 PageView 业务
+ * - 演示了如何封装页面变化事件
+ */
+@ccclass('YXPageView')
+export class YXPageView extends Component {
+
+    /**
+     * 监听页面变化事件
+     * 在滚动过程实时的检查页面变化
+     */
+    static PAGE_CHANGE_EVENT1 = `YXPageView.PAGE_CHANGE_EVENT1`
+
+    /**
+     * 监听页面变化事件
+     * 仅在滚动结束的时候去检查页面变化
+     */
+    static PAGE_CHANGE_EVENT2 = `YXPageView.PAGE_CHANGE_EVENT2`
+
+    /**
+     * 列表组件
+     */
+    private collectionView: YXCollectionView = null
+
+    /**
+     * 滚动方向
+     */
+    @property({ tooltip: `滚动方向`, type: YXCollectionView.ScrollDirection, visible: true })
+    private _scrollDirection: YXCollectionView.ScrollDirection = YXCollectionView.ScrollDirection.HORIZONTAL
+
+    set scrollDirection(value: YXCollectionView.ScrollDirection) {
+        this.collectionView.scrollDirection = value
+        this.collectionView.reloadData()
+    }
+
+    get scrollDirection(): YXCollectionView.ScrollDirection {
+        return this.collectionView.scrollDirection
+    }
+
+    /**
+     * 是否允许手势滚动
+     * 关闭的话可以禁掉手势滚动业务，但仍然可以通过代码切换页面
+     */
+    @property({ tooltip: `是否允许手势滚动`, visible: true })
+    private _scrollEnabled: boolean = true
+
+    set scrollEnabled(value: boolean) {
+        this.collectionView.scrollEnabled = value
+    }
+
+    get scrollEnabled(): boolean {
+        return this.collectionView.scrollEnabled
+    }
+
+    /**
+     * 保存所有的页面
+     */
+    private pages: Node[] = []
+
+    /**
+     * 获取所有页面
+     * @returns 
+     */
+    getPages(): Node[] {
+        return this.pages
+    }
+
+    /**
+     * 新增页面到尾部
+     * @param page 
+     */
+    addPage(page: Node) {
+        this.pages.push(page)
+        this._late_update_pages = true
+    }
+
+    /**
+     * 获取当前页面索引
+     * @returns 
+     */
+    getCurrentPageIndex(): number {
+        if (this.collectionView.scrollDirection == YXCollectionView.ScrollDirection.HORIZONTAL) {
+            let offset = this.collectionView.scrollView.getScrollOffset()
+            offset.x = - offset.x
+            let idx = Math.round(offset.x / this.collectionView.scrollView.view.width)
+            return idx
+        }
+        if (this.collectionView.scrollDirection == YXCollectionView.ScrollDirection.VERTICAL) {
+            let offset = this.collectionView.scrollView.getScrollOffset()
+            let idx = Math.round(offset.y / this.collectionView.scrollView.view.height)
+            return idx
+        }
+        return null
+    }
+
+    /**
+     * 设置当前要显示的页面
+     * 也可以视作 scrollToPage 方法
+     * @param index 
+     * @param timeInSecond 
+     */
+    setCurrentPageIndex(index: number, timeInSecond: number = 0) {
+        let indexPath = new YXIndexPath(0, index)
+        this.collectionView.scrollTo(indexPath, timeInSecond)
+    }
+
+    /**
+     * 插入一个新页面
+     * @param page 
+     * @param index 
+     */
+    insertPage(page: Node, index: number) {
+        this.pages.splice(index, 0, page)
+        this._late_update_pages = true
+    }
+
+    /**
+     * 移除指定页面
+     * @param page 
+     * @returns 
+     */
+    removePage(page: Node) {
+        for (let index = 0; index < this.pages.length; index++) {
+            let node = this.pages[index]
+            if (page === node) {
+                this.removePageAtIndex(index)
+                return
+            }
+        }
+    }
+
+    /**
+     * 移除指定页面
+     * @param index 
+     */
+    removePageAtIndex(index: number) {
+        this.pages.splice(index, 1)
+        this._late_update_pages = true
+    }
+
+    /**
+     * 移除所有页面
+     */
+    removeAllPages() {
+        this.pages = []
+        this._late_update_pages = true
+    }
+
+    /**
+     * 立即更新当前页面
+     */
+    markForUpdatePages() {
+        this.collectionView.reloadData()
+        this.onScrolling()
+        this.onScrollEnded()
+    }
+
+    protected onLoad(): void {
+        this.collectionView = this.node.getComponent(YXCollectionView) || this.node.addComponent(YXCollectionView)
+
+        this.collectionView.recycleInterval = 0
+        this.collectionView.scrollEnabled = this._scrollEnabled
+        this.collectionView.scrollDirection = this._scrollDirection
+        this.collectionView.numberOfItems = () => this.pages.length
+        this.collectionView.registerCell(`cell`, () => {
+            let result = new Node(`yx-page`)
+            result.layer = this.collectionView.node.layer
+            return result
+        })
+        this.collectionView.onCellDisplay = (cell, indexPath, collectionView) => {
+            cell.removeAllChildren()
+            let page = this.pages[indexPath.item]
+            page.parent = cell
+        }
+
+        let layout = new YXFlowLayout()
+        layout.pagingEnabled = true
+        layout.itemSize = () => this.collectionView.scrollView.view.contentSize
+        this.collectionView.layout = layout
+
+        this.collectionView.node.on(ScrollView.EventType.SCROLLING, () => {
+            this.onScrolling()
+        })
+        this.collectionView.node.on(ScrollView.EventType.SCROLL_ENDED, () => {
+            this.onScrollEnded()
+        })
+    }
+
+    protected onDestroy(): void {
+        this.pages = []
+    }
+
+    private _late_update_pages: boolean = false
+    protected update(dt: number): void {
+        if (this._late_update_pages) {
+            this._late_update_pages = false
+            this.collectionView.reloadData()
+            this.onScrolling()
+            this.onScrollEnded()
+        }
+    }
+
+    private currentPageForOnScrolling: number = null
+    private onScrolling() {
+        let getCurrentPageIndex = this.getCurrentPageIndex()
+        if (this.currentPageForOnScrolling != getCurrentPageIndex) {
+            this.currentPageForOnScrolling = getCurrentPageIndex
+            this.node.emit(YXPageView.PAGE_CHANGE_EVENT1, this.currentPageForOnScrolling)
+        }
+    }
+
+    private currentPageForOnScrollEnded: number = null
+    private onScrollEnded() {
+        let getCurrentPageIndex = this.getCurrentPageIndex()
+        if (this.currentPageForOnScrollEnded != getCurrentPageIndex) {
+            this.currentPageForOnScrollEnded = getCurrentPageIndex
+            this.node.emit(YXPageView.PAGE_CHANGE_EVENT2, this.currentPageForOnScrollEnded)
+        }
+    }
+}
+

package/assets/lib/collectView/lib-ext/yx-page-view.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "96dd5e9a-3b90-4699-9733-0ffc540be67f",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/lib/collectView/lib-ext/yx-table-view.ts

@@ -0,0 +1,159 @@
+import { _decorator, Component, Enum, instantiate, math, Node, Prefab, UITransform } from 'cc';
+import { YXCollectionView, YXEdgeInsets, YXIndexPath } from '../lib_collect/yx-collection-view';
+import { YXFlowLayout } from '../lib_collect/yx-flow-layout';
+const { ccclass, property } = _decorator;
+
+/**
+ * 节点对齐方式枚举
+ */
+enum _yx_table_view_item_alignment {
+    /**
+     * cell 节点紧靠列表左边
+     */
+    LEFT,
+    /**
+     * cell 节点相对列表水平居中
+     */
+    CENTER,
+    /**
+     * cell 节点紧靠列表右边
+     */
+    RIGHT,
+}
+Enum(_yx_table_view_item_alignment)
+
+/**
+ * 节点大小模式枚举
+ */
+enum _yx_table_view_item_size_mode {
+    /**
+     * 使用预制体节点大小
+     */
+    USE_PREFAB_SIZE,
+    /**
+     * 自定义节点大小
+     */
+    CUSTOM,
+}
+Enum(_yx_table_view_item_size_mode)
+
+/**
+ * 基于 YXCollectionView 和 YXFlowLayout 封装的一个简单的 TableView
+ * 请注意，这个组件更多是为了演示如何基于 YXCollectionView 来实现自己需要的列表组件，并非完整的功能组件
+ * 如果这个组件符合业务的话可以直接拿来用，如果满足不了需求，可以根据实际业务，选择开放更多的配置或者直接使用 YXCollectionView
+ * 
+ * ---
+ * 此组件说明
+ * - 仅支持编辑器配置
+ * - 仅支持垂直方向滚动
+ * - 仅支持单类型 cell 节点样式
+ * - 仅支持固定的 cell 节点大小
+ * - 支持 cell 节点相对于列表的对齐方式，默认居中对齐
+ */
+@ccclass('YXTableView')
+export class YXTableView<T = any> extends Component {
+
+    static Alignment = _yx_table_view_item_alignment
+
+    @property({ tooltip: `cell 节点预制体`, type: Prefab, visible: true })
+    private cellPrefab: Prefab = null
+
+    @property({ tooltip: `如何配置 cell 节点大小\nUSE_PREFAB_SIZE: 自动读取预制体大小\nCUSTOM: 自定义节点大小`, type: _yx_table_view_item_size_mode, visible: true })
+    private itemSizeMode: _yx_table_view_item_size_mode = _yx_table_view_item_size_mode.CUSTOM
+
+    @property({
+        tooltip: `cell 节点大小`, visible: function (this) {
+            return (this.itemSizeMode == _yx_table_view_item_size_mode.CUSTOM)
+        }
+    })
+    private itemSize: math.Size = new math.Size(100, 100)
+
+    @property({ tooltip: `cell 节点对齐方式`, type: _yx_table_view_item_alignment, visible: true })
+    private alignment: _yx_table_view_item_alignment = _yx_table_view_item_alignment.CENTER
+
+    @property({ tooltip: `cell 节点之间间距`, visible: true })
+    private spacing: number = 0
+
+    @property({ tooltip: `顶部最大偏移距离`, visible: true })
+    private top: number = 0
+
+    @property({ tooltip: `底部最大偏移距离`, visible: true })
+    private bottom: number = 0
+
+    /**
+     * 列表组件
+     */
+    private collectionView: YXCollectionView = null
+
+    /**
+     * 更新列表数据
+     * @param data 列表绑定的数据源
+     */
+    setData(data: T[]) {
+        this.data = data
+        this.reloadCollectionViewIfNeeds()
+    }
+    private data: T[] = null
+
+    /**
+     * 更新 cell 节点
+     * @param call 
+     */
+    onCellDisplay(call: typeof this.updateCellCall) {
+        this.updateCellCall = call
+        this.reloadCollectionViewIfNeeds()
+    }
+    private updateCellCall: (cell: Node, itemData: T, index: number) => void = null
+
+    /**
+     * 滚动到指定节点位置
+     * @param idx 
+     */
+    scrollTo(idx: number) {
+        let indexPath = new YXIndexPath(0, idx)
+        this.collectionView.scrollTo(indexPath)
+    }
+
+    /**
+     * 生命周期方法
+     */
+    protected onLoad(): void {
+        this.collectionView = this.node.getComponent(YXCollectionView) || this.node.addComponent(YXCollectionView)
+
+        this.collectionView.registerCell(`cell`, () => instantiate(this.cellPrefab))
+        this.collectionView.scrollDirection = YXCollectionView.ScrollDirection.VERTICAL
+        this.collectionView.numberOfItems = () => this.data.length
+        this.collectionView.onCellDisplay = (cell, indexPath, collectionView) => {
+            if (this.updateCellCall) {
+                this.updateCellCall(cell, this.data[indexPath.item], indexPath.item)
+            }
+        }
+
+        let layout = new YXFlowLayout()
+        let itemSize = this.itemSize
+        if (this.itemSizeMode == _yx_table_view_item_size_mode.USE_PREFAB_SIZE) {
+            itemSize = instantiate(this.cellPrefab).getComponent(UITransform).contentSize
+        }
+        layout.itemSize = itemSize
+        let left = 0
+        if (this.alignment == YXTableView.Alignment.LEFT) { left = 0 }
+        if (this.alignment == YXTableView.Alignment.CENTER) { left = (this.collectionView.scrollView.view.width - itemSize.width) * 0.5 }
+        if (this.alignment == YXTableView.Alignment.RIGHT) { left = (this.collectionView.scrollView.view.width - itemSize.width) * 1 }
+        layout.sectionInset = new YXEdgeInsets(this.top, left, this.bottom, 0)
+        layout.verticalSpacing = this.spacing
+        this.collectionView.layout = layout
+    }
+
+    protected onDestroy(): void {
+        this.data = []
+    }
+
+    private reloadCollectionViewIfNeeds() {
+        // `数据源` 配置好后才去更新列表，没配置好的话更新没有意义
+        if (this.data == null) {
+            return
+        }
+        this.collectionView.reloadData()
+    }
+}
+

package/assets/lib/collectView/lib-ext/yx-table-view.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "4fddde1e-ca59-4a70-9721-20f26a5c017e",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/lib/collectView/lib-ext.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "193633f9-e511-492f-b2f9-38e6527e2ed2",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}