# banner **Repository Path**: chinasoft4_ohos/banner ## Basic Information - **Project Name**: banner - **Description**: 基于PageSlider实现无限轮播功能。可以自定义indicator，需自定义实现 Indicator 接口，内置了的IndicatorView集成使用请参考Demo - **Primary Language**: Java - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 8 - **Forks**: 5 - **Created**: 2021-08-16 - **Last Updated**: 2024-11-08 ## Categories & Tags **Categories**: harmonyos-view-transition **Tags**: None ## README # banner #### 项目介绍 - 项目名称：banner - 所属系列：openharmony的第三方组件适配移植 - 功能：基于PageSlider实现无限轮播功能。可以自定义indicator，需自定义实现 Indicator 接口，内置了的IndicatorView集成使用请参考Demo - 项目移植状态：主功能完成 - 调用差异：详见差异说明 - 开发版本：sdk6，DevEco Studio 2.2 Beta1 - 基线版本：Release V1.0.5 #### 效果演示 ![tu1](gif/video.gif) 1.一页三屏 | 描述 | 普通样式 | 两边缩放 | | :------: | :-----------------: | :-------------------------------------------------------: | | 一页三屏 | ![](gif/gif123.gif) | ![](gif/GIF2021-8-1016-02-45.gif) | 2.内置指示器 | IndicatorView | IndicatorStyle | | :-------------------------------: | :--------------------------------: | | INDICATOR_CIRCLE | INDICATOR_CIRCLE_RECT | | ![](gif/indicator_circle.gif) | ![](gif/INDICATOR_CIRCLE_RECT.gif) | | INDICATOR_BEZIER | INDICATOR_DASH | | ![](gif/INDICATOR_BEZIER.gif) | ![](gif/INDICATOR_DASH.gif) | | INDICATOR_BIG_CIRCLE | | | ![](gif/INDICATOR_BIG_CIRCLE.gif) | | 3.自定义指示器 | ![img12](gif/img12.gif) | ![img13](gif/img13.gif) | ![img14](gif/img14.gif) | | :---------------------: | :---------------------: | :---------------------: | | ![img15](gif/img15.gif) | ![img16](gif/img16.gif) | ![img17](gif/img17.gif) | | ![img18](gif/img18.gif) | ![img19](gif/img19.gif) | ![img20](gif/img20.gif) | #### 安装教程 1.在项目根目录下的build.gradle文件中， ```java allprojects { repositories { maven { url 'https://s01.oss.sonatype.org/content/repositories/snapshots/' } } } ``` 2.在entry模块的build.gradle文件中， ```java dependencies { implementation('com.gitee.chinasoft_ohos:banner:0.0.1-SNAPSHOT') ...... } ``` 在sdk6，DevEco Studio 2.2 Beta1下项目可直接运行 如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件， 并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下 #### 使用说明 1.在xml中使用 ```xml ``` 2.初始化: ```java //使用内置Indicator IndicatorView indicator = new IndicatorView(this) .setIndicatorColor(Color.GRAY) .setIndicatorSelectorColor(Color.WHITE)) banner2.setHolderCreator(new ImageHolderCreator()) .setIndicator(indicator) .setPages(imageBanner2); ``` 3.简单设置一页三屏 ```java //设置左右页面露出来的宽度及item与item之间的宽度 .setPageMargin(-(AttrHelper.vp2px(88,getContext())),AttrHelper.vp2px(37,getContext())) //设置切换动画 .setPageTransformer(true, new NoPageTransformer()) ``` 4.PageSlider切换动画 ```java //内置BannerViewPager.PageTransformer接口，针对不同的item进行动画操作 @Override public void transformerPage(BannerViewPager.PageType pageType, Component page, float offset, float offsetPixels) { switch (pageType) { case PREVIOUS: // 上页item break; case CURRENT: // 当前页item break; case NEXT: // 下页item break; case OTHER: // 其他页item break; default: break; } } ``` 5.如何自定义Indicator ```java /** * 可以实现该接口，自定义Indicator * * @since 2021-07-20 */ public interface Indicator extends PageSlider.PageChangedListener { /** * 当数据初始化完成时调用 * * @param pagerCount pager数量 */ void initIndicatorCount(int pagerCount); /** * 返回一个View，添加到banner中 */ Component getView(); /** * banner是一个RelativeLayout，设置banner在RelativeLayout中的位置，可以是任何地方 * @return */ DependentLayout.LayoutConfig getParams(); /** * 是否自动循环 * * @param isAuto 是否 */ void setAutoStau(Boolean isAuto); } ``` ```java //举个栗子 package com.to.aboomy.bannersample.indicator; import com.to.aboomy.banner.Indicator; import ohos.agp.components.AttrSet; import ohos.agp.components.Component; import ohos.agp.components.ComponentContainer; import ohos.agp.components.DependentLayout; import ohos.app.Context; /** * @since 2021-08-10 */ public class IndicatorView extends Component implements Indicator { public IndicatorView(Context context) { super(context); } public IndicatorView(Context context, AttrSet attrSet) { super(context, attrSet); } public IndicatorView(Context context, AttrSet attrSet, String styleName) { super(context, attrSet, styleName); } @Override public void initIndicatorCount(int pagerCount) { this.pagerCount = pagerCount; setVisibility(pagerCount > 1 ? VISIBLE : GONE); requestLayout(); } @Override public Component getView() { return this; } @Override public DependentLayout.LayoutConfig getParams() { if (params == null) { params = new DependentLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT, NUM_100); params.addRule(DependentLayout.LayoutConfig.ALIGN_PARENT_BOTTOM); params.setMarginTop(NUM_30); } return params; } @Override public void setAutoStau(Boolean isAuto) { } @Override public void onPageSliding(int i, float v, int i1) { selectedPage = position; offset = positionOffset; invalidate(); } @Override public void onPageSlideStateChanged(int i) { } @Override public void onPageChosen(int i) { } } ``` 6.Banner提供的接口说明 ```Java //设置自定义动画 Banner setPageTransformer(boolean reverseDrawingOrder, BannerViewPager.PageTransformer transformer) //设置banner的滑动监听 Banner setOuterPageChangeListener(PageSlider.PageChangedListener outerPageChangeListener) //设置自动轮播时长 Banner setAutoTurningTime(int autoTurningTime) //设置是否自动轮播，大于1页可以轮播 Banner setAutoPlay(boolean autoPlay) //设置indicator Banner setIndicator(Indicator indicator) //设置indicator Banner setIndicator(Indicator indicator, boolean attachToRoot) //是否无限轮播 boolean isAutoPlay() //获取当前位置 int getCurrentPager() //开始轮播 void startTurning() //停止轮播 void stopTurning() //设置一屏多页 Banner setPageMargin(int magin, int padding) //设置滑动方向 Banner setOrientation(int orientation) //设置的切换时长 Banner setPagerScrollDuration(int pagerScrollDuration) ``` 7.IndicatorView使用接口说明: ```java // 设置圆点半径 IndicatorView setIndicatorRadius(float indicatorRadius) //设置圆点切换动画 IndicatorView setIndicatorStyle(int indicatorStyle) //设置默认的圆点颜色 IndicatorView setIndicatorColor(Color indicatorColor) //设置选中的圆点颜色 IndicatorView setIndicatorSelectorColor(Color indicatorSelectorColor) //设置indicator比例，拉伸圆为矩形，设置越大，拉伸越长，默认1.0 IndicatorView setIndicatorRatio(float indicatorRatio) //设置选中的圆角，默认和indicatorRadius值一致，可单独设置选中的点大小 IndicatorView setIndicatorSelectedRadius(float indicatorSelectedRadius) //设置选中圆比例，拉伸圆为矩形，控制该比例，默认比例和indicatorRatio一致，默认值1.0 IndicatorView setIndicatorSelectedRatio(float indicatorSelectedRatio) ``` 8.调用差异说明 ``` 因SDK无对应API 动画CubeInTransformer、CubeOutTransformer、FlipHorizontalTransformer、FlipVerticalTransformer、StackTransformer 、TabletTransformer、ZoomInTransformer、ZoomOutTransformer、RotateYTransformer未实现 一页三屏,如果设置页面层叠,后页会覆盖前页，openharmony内部pageslider 内部实现,后一页在前一页上层,系统原因 列表嵌套banner,自定义下拉刷新列表作用在bannner上，下拉手势不生效，因不支持事件传递分发，故此效果不能实现 ``` ## 测试信息 CodeCheck代码测试无异常 CloudTest代码测试无异常 病毒安全检测通过 当前版本demo功能与原组件基本无差异 ## 版本迭代 - 0.0.1-SNAPSHOT