From 04b3a1c516d7336ed96ba4eb1107c54c57fb0e33 Mon Sep 17 00:00:00 2001 From: hexagon1337 Date: Mon, 23 Sep 2024 18:32:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=80=82=E9=85=8D=E5=9B=BD=E9=99=85?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: hexagon1337 --- README.md | 317 +++++++++++++++++++++++++++++++++++++++------------ README_zh.md | 93 +++++++++++++++ 2 files changed, 340 insertions(+), 70 deletions(-) create mode 100644 README_zh.md diff --git a/README.md b/README.md index a5a0e15..086d743 100644 --- a/README.md +++ b/README.md @@ -1,93 +1,270 @@ -# recyclerview_animators +# RecyclerViewPager -## 简介 -> 带有添加删除动画效果以及整体动画效果的list组件库 +## Introduction +> RecyclerViewPager is a container that supports custom horizontal and vertical paging effects, with a Material Design style. -![](animation.gif) +![Effect](animation.gif) -## 下载安装 + +## How to Install ```shell -ohpm install @ohos/recyclerview-animators +ohpm install @ohos/recyclerviewpager ``` -OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装OpenHarmony ohpm 包 ](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md) +For details about the OpenHarmony ohpm environment configuration, see [OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md). -## 使用说明 -1. 引入组件库 -``` -import { RecyclerView } from "@ohos/recyclerview-animators" -``` +## How to Use -2. 在代码中使用 -``` -@State controller: RecyclerView.Controller = new RecyclerView.Controller() -private listDatas = ["A","B","C"] - -aboutToAppear() { - this.controller.setAdapterAnimation(RecyclerView.AdapterAnimationType.AlphaIn) // 设置列表整体效果类型 - this.controller.setFirstOnly(false) // 设置是否在item重复出现时显示动画效果 - this.controller.setDuration(500) // 设置动画时长 -} - -build() { - Column() { - RecyclerView({ - array: this.listDatas, // 数据源 - controller: this.controller, // 控制器 - child: (itemData) => { - this.SpecificChild(itemData) // 子布局 +### Using singleFlingPager +1. Import **singleFlingPager**. + ``` + import { singleFlingPager } from "@ohos/recyclerviewpager" + ``` + +2. Pass in a custom layout. + ```xml + Pass in your custom layout to the custom method specificParam. + @Builder specificParam(item) { + + if (item.i == this.index) { + Flex() { + Text("item=" + item.i).fontSize(this.fontSize).fontColor("#e5e1e1") + } + .margin({ left: this.marginLeft, right: this.marginRight }) + .width(this.Containderwidth) + .height('90%') + .backgroundColor("#273238") + .scale({ + x: 1, + y: this.offsetX < 0 ? 1 + this.offsetX / this.ScreenOffset : 1 - this.offsetX / this.ScreenOffset + }) + .offset({x:'1%'}) + } else { + Flex() { + Text("item").fontSize(this.fontSize).fontColor("#e5e1e1") + } + .margin({ left: this.marginLeft, right: this.marginRight }) + .width(this.Containderwidth) + .height('80%') + .backgroundColor("#273238") + .scale({ + x: 1, + y: this.offsetX < 0 ? 1 - this.offsetX / this.ScreenOffset : 1 + this.offsetX / this.ScreenOffset + }) + .offset({x:'1%'}) + } + } + ``` + +3. Pass in the layout to the container. + ``` + build() { + Column() { + Flex({ direction: FlexDirection.Column }) { + singleFlingPager( + { + arr: this.arr, + offsetX: this.offsetX!!, + index: this.index!!, + marginLeft: this.marginLeft, + marginRight: this.marginRight, + Containderwidth: this.Containderwidth, + ContainderHeight: this.ContainderHeight, + content: (item) => { + this.specificParam(item) + } + } + ) } - }) + } + } + ``` + +### Using verticalViewPager +1. Import **verticalViewPager**. + ``` + import { verticalViewPager } from "@ohos/recyclerviewpager" + ``` + +2. Pass in a custom layout. + ```xml + Pass in your custom layout to the custom method specificParam. + @Builder specificParam(item) { + + if (item.i == this.index) { + Flex() { + Text("item=" + this.index).fontSize(this.fontSize).fontColor("#e5e1e1") + } + .margin({ top: this.topSpaced, bottom: this.topSpaced /*, left: this.topSpaced, right: this.topSpaced */ + }) + .width('100%') + .height(this.ContainderHeight) + .backgroundColor("#273238") + .scale({ + x: this.offsetY < 0 ? 1 + this.offsetY / this.ScreenOffset : 1 - this.offsetY / this.ScreenOffset, + y: 1 + }) + } else { + Flex() { + Text("item").fontSize(this.fontSize).fontColor("#e5e1e1") + } + .margin({ top: this.topSpaced, bottom: this.topSpaced, left: this.topSpaced, right: this.topSpaced }) + .width('90%') + .height(this.ContainderHeight) + .backgroundColor("#273238") + .scale({ + x: this.offsetY < 0 ? 1 - this.offsetY / this.ScreenOffset : 1 + this.offsetY / this.ScreenOffset, + y: 1 + }) + } + } -} + ``` -@Builder SpecificChild(itemData) { + +3. Pass in the layout to the container. + ``` + build() { Column() { - Image($r("app.media.chip")) - .width('100%') - .height(100) - Text(itemData + '') - .fontSize(20) - .textAlign(TextAlign.Center) - .width('100%') - }.margin(10) + Flex() { + verticalViewPager({ + arr: this.arr, + offsetY: this.offsetY!!, + index: this.index!!, + marginTop: this.topSpaced, + marginBottom: this.topSpaced, + ContainderWidth: this.ContainderWidth, + ContainderHeight: this.ContainderHeight, + content: (item) => { + this.specificParam(item) + } + }) + } + } } + ``` + +### Using singleFlingPagerSelect +1. Import singleFlingPagerSelect. + ``` + import { singleFlingPagerSelect } from "@ohos/recyclerviewpager" + ``` + +2. Pass in a custom layout. + ``` + Pass in your custom layout to the custom method specificParam. +@Builder specificParam(item) { + + if (item.i == this.index) { + Flex() { + Text("item=" + item.i).fontSize(this.fontSize).fontColor("#e5e1e1") + } + .margin({ left: this.marginLeft,right: this.marginRight }) + .width(this.Containderwidth) + .height('90%') + .backgroundColor("#273238") + .scale({ + x: 1, + y: this.offsetX < 0 ? 1 + this.offsetX / this.ScreenOffset : 1 - this.offsetX / this.ScreenOffset + }) + } else { + Flex() { + Text("item").fontSize(this.fontSize).fontColor("#e5e1e1") + } + .margin({ left: this.marginLeft,right: this.marginRight }) + .width(this.Containderwidth) + .height('80%') + .backgroundColor("#273238") + .scale({ + x: 1, + y: this.offsetX < 0 ? 1 - this.offsetX / this.ScreenOffset : 1 + this.offsetX / this.ScreenOffset + }) + } + + } + ``` + +3. Pass in the layout to the container. + ``` + build() { + Flex() { + singleFlingPagerSelect({ + arr: this.arr, + offsetX: this.offsetX!!, + index: this.index!!, + marginLeft: this.marginLeft, + marginRight: this.marginRight, + Containderwidth: this.Containderwidth, + ContainderHeight: this.ContainderHeight, + content: (item) => { + this.specificParam(item) + } + }) + )} + } + ``` + +## Attributes + +### singleFlingPager Attributes +```xml +arr: page text content +offsetX: page scrolling offset +index: current page index +marginLeft: left margin of the page +marginRight: right margin of the page +Containderwidth: page width +ContainderHeight: page height +content: container layout ``` -## 接口说明 -`controller: RecyclerView.Controller = new RecyclerView.Controller()` -1. 设置列表整体效果类型 - `this.controller.setAdapterAnimation()` -2. 设置是否在item重复出现时显示动画效果 - `this.controller.setFirstOnly()` -3. 设置动画时长 - `this.controller.setDuration()` +### verticalViewPager Attributes +```xml +arr: page text content +offsetY: page scrolling offset +index: current page index +marginTop: top margin of the page +marginBottomt: bottom margin of the page +ContainderWidth: page width +ContainderHeight: page height +content: container layout +``` + +### singleFlingPagerSelect Attributes +```xml +arr: page text content +offsetX: page scrolling offset +index: current page index +marginLeft: left margin of the page +marginRight: right margin of the page +Containderwidth: page width +ContainderHeight: page height +content: container layout +``` -## 约束与限制 -在下述版本验证通过： +## Constraints -- DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530) -- SDK: API12 (5.0.0.35(SP3)) +This project has been verified in the following versions: +- DevEco Studio: DevEco Studio NEXT Developer Beta3 (5.0.3.521) +- OpenHarmony SDK: API 12 (5.0.0.25) -## 目录结构 +## Directory Structure ```` -|---- recyclerview_animators -| |---- entry # 示例代码文件夹 -| |---- library # 库文件夹 -| |----src - |----main - |----ets - |----components - |----adapterAnimator #动画效果适配 - |----itemAnimator #元素动画效果实现 - |----RecyclerView.ets #核心类 -| |---- Index.ets # 对外接口 -| |---- README.md # 安装使用方法 +|---- RecyclerViewPager +| |---- entry # Sample code +| |---- library # RecyclerViewPager library +| |----src +| |----main +| |----components +| |----materialContainderTop.ets # Material style implementation +| |----verticalViewPager.ets # Up-down page scroll implementation +| |---- index.ets # External APIs +| |---- README.md # Readme ```` -## 贡献代码 -使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/recyclerview-animators/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/recyclerview-animators/pulls) 。 +## How to Contribute +If you find any problem when using the project, submit an [issue](https://gitee.com/openharmony-sig/RecyclerViewPager/issues) or a [PR](https://gitee.com/openharmony-sig/RecyclerViewPager/pulls). -## 开源协议 -本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/recyclerview-animators/blob/master/LICENSE) ，请自由地享受和参与开源。 +## License +This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/RecyclerViewPager/blob/master/LICENSE). diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000..511a0ad --- /dev/null +++ b/README_zh.md @@ -0,0 +1,93 @@ +# recyclerview_animators + +## 简介 +> 带有添加删除动画效果以及整体动画效果的list组件库 + +![](animation.gif) + +## 下载安装 +```shell +ohpm install @ohos/recyclerview-animators +``` +OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装OpenHarmony ohpm 包 ](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md) + +## 使用说明 +1. 引入组件库 + +``` +import { RecyclerView } from "@ohos/recyclerview-animators" +``` + +2. 在代码中使用 +``` +@State controller: RecyclerView.Controller = new RecyclerView.Controller() +private listDatas = ["A","B","C"] + +aboutToAppear() { + this.controller.setAdapterAnimation(RecyclerView.AdapterAnimationType.AlphaIn) // 设置列表整体效果类型 + this.controller.setFirstOnly(false) // 设置是否在item重复出现时显示动画效果 + this.controller.setDuration(500) // 设置动画时长 +} + +build() { + Column() { + RecyclerView({ + array: this.listDatas, // 数据源 + controller: this.controller, // 控制器 + child: (itemData) => { + this.SpecificChild(itemData) // 子布局 + } + }) + } +} + +@Builder SpecificChild(itemData) { + Column() { + Image($r("app.media.chip")) + .width('100%') + .height(100) + Text(itemData + '') + .fontSize(20) + .textAlign(TextAlign.Center) + .width('100%') + }.margin(10) + } +``` + +## 接口说明 +`controller: RecyclerView.Controller = new RecyclerView.Controller()` +1. 设置列表整体效果类型 + `this.controller.setAdapterAnimation()` +2. 设置是否在item重复出现时显示动画效果 + `this.controller.setFirstOnly()` +3. 设置动画时长 + `this.controller.setDuration()` + +## 约束与限制 + +在下述版本验证通过： + +- DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530) +- SDK: API12 (5.0.0.35(SP3)) + +## 目录结构 +```` +|---- recyclerview_animators +| |---- entry # 示例代码文件夹 +| |---- library # 库文件夹 +| |----src + |----main + |----ets + |----components + |----adapterAnimator #动画效果适配 + |----itemAnimator #元素动画效果实现 + |----RecyclerView.ets #核心类 +| |---- Index.ets # 对外接口 +| |---- README.md # 安装使用方法 +```` + +## 贡献代码 +使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/recyclerview-animators/issues) ，当然，也非常欢迎发 [PR](https://gitee.com/openharmony-sig/recyclerview-animators/pulls) 共建。 + +## 开源协议 +本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/recyclerview-animators/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee From dcf514eadbf375d8c38532b5d18d89391003cb57 Mon Sep 17 00:00:00 2001 From: hexagon1337 Date: Mon, 23 Sep 2024 18:35:52 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E9=80=82=E9=85=8D=E5=9B=BD=E9=99=85?= =?UTF-8?q?=E5=8C=96=EF=BC=8C=E6=9B=BF=E6=8D=A2=E8=8B=B1=E6=96=87readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: hexagon1337 --- README.md | 299 +++++++++++------------------------------------------- 1 file changed, 61 insertions(+), 238 deletions(-) diff --git a/README.md b/README.md index 086d743..ee19655 100644 --- a/README.md +++ b/README.md @@ -1,270 +1,93 @@ -# RecyclerViewPager +# recyclerview_animators ## Introduction -> RecyclerViewPager is a container that supports custom horizontal and vertical paging effects, with a Material Design style. - -![Effect](animation.gif) +> recyclerview_animators is a list component library that implements add and remove animations as well as overall animations. +![](animation.gif) ## How to Install ```shell -ohpm install @ohos/recyclerviewpager +ohpm install @ohos/recyclerview-animators ``` For details about the OpenHarmony ohpm environment configuration, see [OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md). - ## How to Use +1. Import a component library. -### Using singleFlingPager -1. Import **singleFlingPager**. - ``` - import { singleFlingPager } from "@ohos/recyclerviewpager" - ``` - -2. Pass in a custom layout. - ```xml - Pass in your custom layout to the custom method specificParam. - @Builder specificParam(item) { - - if (item.i == this.index) { - Flex() { - Text("item=" + item.i).fontSize(this.fontSize).fontColor("#e5e1e1") - } - .margin({ left: this.marginLeft, right: this.marginRight }) - .width(this.Containderwidth) - .height('90%') - .backgroundColor("#273238") - .scale({ - x: 1, - y: this.offsetX < 0 ? 1 + this.offsetX / this.ScreenOffset : 1 - this.offsetX / this.ScreenOffset - }) - .offset({x:'1%'}) - } else { - Flex() { - Text("item").fontSize(this.fontSize).fontColor("#e5e1e1") - } - .margin({ left: this.marginLeft, right: this.marginRight }) - .width(this.Containderwidth) - .height('80%') - .backgroundColor("#273238") - .scale({ - x: 1, - y: this.offsetX < 0 ? 1 - this.offsetX / this.ScreenOffset : 1 + this.offsetX / this.ScreenOffset - }) - .offset({x:'1%'}) - } - } - ``` - -3. Pass in the layout to the container. - ``` - build() { - Column() { - Flex({ direction: FlexDirection.Column }) { - singleFlingPager( - { - arr: this.arr, - offsetX: this.offsetX!!, - index: this.index!!, - marginLeft: this.marginLeft, - marginRight: this.marginRight, - Containderwidth: this.Containderwidth, - ContainderHeight: this.ContainderHeight, - content: (item) => { - this.specificParam(item) - } - } - ) - } - } - } - ``` - -### Using verticalViewPager -1. Import **verticalViewPager**. - ``` - import { verticalViewPager } from "@ohos/recyclerviewpager" - ``` - -2. Pass in a custom layout. - ```xml - Pass in your custom layout to the custom method specificParam. - @Builder specificParam(item) { +``` +import { RecyclerView } from "@ohos/recyclerview-animators" +``` - if (item.i == this.index) { - Flex() { - Text("item=" + this.index).fontSize(this.fontSize).fontColor("#e5e1e1") - } - .margin({ top: this.topSpaced, bottom: this.topSpaced /*, left: this.topSpaced, right: this.topSpaced */ - }) - .width('100%') - .height(this.ContainderHeight) - .backgroundColor("#273238") - .scale({ - x: this.offsetY < 0 ? 1 + this.offsetY / this.ScreenOffset : 1 - this.offsetY / this.ScreenOffset, - y: 1 - }) - } else { - Flex() { - Text("item").fontSize(this.fontSize).fontColor("#e5e1e1") +2. Use it in code. +``` +@State controller: RecyclerView.Controller = new RecyclerView.Controller() +private listDatas = ["A","B","C"] + +aboutToAppear() { + this.controller.setAdapterAnimation(RecyclerView.AdapterAnimationType.AlphaIn) // Set the overall list effect type. + this.controller.setFirstOnly(false) // Set whether to display the animation when an item appears repeatedly. + this.controller.setDuration(500) // Set the animation duration. +} + +build() { + Column() { + RecyclerView({ + array: this.listDatas, // Data source + controller: this.controller, // Controller + child: (itemData) => { + this.SpecificChild(itemData) // Child layout } - .margin({ top: this.topSpaced, bottom: this.topSpaced, left: this.topSpaced, right: this.topSpaced }) - .width('90%') - .height(this.ContainderHeight) - .backgroundColor("#273238") - .scale({ - x: this.offsetY < 0 ? 1 - this.offsetY / this.ScreenOffset : 1 + this.offsetY / this.ScreenOffset, - y: 1 - }) - } - + }) } - ``` - +} -3. Pass in the layout to the container. - ``` - build() { +@Builder SpecificChild(itemData) { Column() { - Flex() { - verticalViewPager({ - arr: this.arr, - offsetY: this.offsetY!!, - index: this.index!!, - marginTop: this.topSpaced, - marginBottom: this.topSpaced, - ContainderWidth: this.ContainderWidth, - ContainderHeight: this.ContainderHeight, - content: (item) => { - this.specificParam(item) - } - }) - } - } - } - ``` - -### Using singleFlingPagerSelect -1. Import singleFlingPagerSelect. - ``` - import { singleFlingPagerSelect } from "@ohos/recyclerviewpager" - ``` - -2. Pass in a custom layout. - ``` - Pass in your custom layout to the custom method specificParam. -@Builder specificParam(item) { - - if (item.i == this.index) { - Flex() { - Text("item=" + item.i).fontSize(this.fontSize).fontColor("#e5e1e1") - } - .margin({ left: this.marginLeft,right: this.marginRight }) - .width(this.Containderwidth) - .height('90%') - .backgroundColor("#273238") - .scale({ - x: 1, - y: this.offsetX < 0 ? 1 + this.offsetX / this.ScreenOffset : 1 - this.offsetX / this.ScreenOffset - }) - } else { - Flex() { - Text("item").fontSize(this.fontSize).fontColor("#e5e1e1") - } - .margin({ left: this.marginLeft,right: this.marginRight }) - .width(this.Containderwidth) - .height('80%') - .backgroundColor("#273238") - .scale({ - x: 1, - y: this.offsetX < 0 ? 1 - this.offsetX / this.ScreenOffset : 1 + this.offsetX / this.ScreenOffset - }) - } - + Image($r("app.media.chip")) + .width('100%') + .height(100) + Text(itemData + '') + .fontSize(20) + .textAlign(TextAlign.Center) + .width('100%') + }.margin(10) } - ``` - -3. Pass in the layout to the container. - ``` - build() { - Flex() { - singleFlingPagerSelect({ - arr: this.arr, - offsetX: this.offsetX!!, - index: this.index!!, - marginLeft: this.marginLeft, - marginRight: this.marginRight, - Containderwidth: this.Containderwidth, - ContainderHeight: this.ContainderHeight, - content: (item) => { - this.specificParam(item) - } - }) - )} - } - ``` - -## Attributes - -### singleFlingPager Attributes -```xml -arr: page text content -offsetX: page scrolling offset -index: current page index -marginLeft: left margin of the page -marginRight: right margin of the page -Containderwidth: page width -ContainderHeight: page height -content: container layout -``` - -### verticalViewPager Attributes -```xml -arr: page text content -offsetY: page scrolling offset -index: current page index -marginTop: top margin of the page -marginBottomt: bottom margin of the page -ContainderWidth: page width -ContainderHeight: page height -content: container layout -``` - -### singleFlingPagerSelect Attributes -```xml -arr: page text content -offsetX: page scrolling offset -index: current page index -marginLeft: left margin of the page -marginRight: right margin of the page -Containderwidth: page width -ContainderHeight: page height -content: container layout ``` +## Available APIs +`controller: RecyclerView.Controller = new RecyclerView.Controller()` +1. Sets the overall list animation. + `this.controller.setAdapterAnimation()` +2. Sets whether to display the animation when an item appears repeatedly. + `this.controller.setFirstOnly()` +3. Sets the animation duration. + `this.controller.setDuration()` ## Constraints This project has been verified in the following versions: -- DevEco Studio: DevEco Studio NEXT Developer Beta3 (5.0.3.521) -- OpenHarmony SDK: API 12 (5.0.0.25) + +- DevEco Studio NEXT Developer Beta3: 5.0 (5.0.3.530) +- SDK: API 12 (5.0.0.35 (SP3)) ## Directory Structure ```` -|---- RecyclerViewPager +|---- recyclerview_animators | |---- entry # Sample code -| |---- library # RecyclerViewPager library -| |----src -| |----main -| |----components -| |----materialContainderTop.ets # Material style implementation -| |----verticalViewPager.ets # Up-down page scroll implementation -| |---- index.ets # External APIs -| |---- README.md # Readme +| |---- library # Library +| |----src + |----main + |----ets + |----components + |----adapterAnimator # Animation adaptation + |----itemAnimator # Item animation implementation + |----RecyclerView.ets # Core class +| |---- Index.ets # External APIs +| |---- README.md # Readme ```` ## How to Contribute -If you find any problem when using the project, submit an [issue](https://gitee.com/openharmony-sig/RecyclerViewPager/issues) or a [PR](https://gitee.com/openharmony-sig/RecyclerViewPager/pulls). +If you find any problem when using the project, submit an [issue](https://gitee.com/openharmony-sig/recyclerview-animators/issues) or a [PR](https://gitee.com/openharmony-sig/recyclerview-animators/pulls). ## License -This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/RecyclerViewPager/blob/master/LICENSE). +This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/recyclerview-animators/blob/master/LICENSE). -- Gitee