代码拉取完成,页面将自动刷新
1.一页三屏
描述 | 普通样式 | 两边缩放 |
---|---|---|
一页三屏 |
2.内置指示器
IndicatorView | IndicatorStyle |
---|---|
INDICATOR_CIRCLE | INDICATOR_CIRCLE_RECT |
INDICATOR_BEZIER | INDICATOR_DASH |
INDICATOR_BIG_CIRCLE | |
3.自定义指示器
1.在项目根目录下的build.gradle文件中,
allprojects {
repositories {
maven {
url 'https://s01.oss.sonatype.org/content/repositories/snapshots/'
}
}
}
2.在entry模块的build.gradle文件中,
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中使用
<com.to.aboomy.banner.Banner
ohos:id="$+id:banner"
ohos:height="150vp"
ohos:width="match_parent"/>
2.初始化:
//使用内置Indicator
IndicatorView indicator = new IndicatorView(this)
.setIndicatorColor(Color.GRAY)
.setIndicatorSelectorColor(Color.WHITE))
banner2.setHolderCreator(new ImageHolderCreator())
.setIndicator(indicator)
.setPages(imageBanner2);
3.简单设置一页三屏
//设置左右页面露出来的宽度及item与item之间的宽度
.setPageMargin(-(AttrHelper.vp2px(88,getContext())),AttrHelper.vp2px(37,getContext()))
//设置切换动画
.setPageTransformer(true, new NoPageTransformer())
4.PageSlider切换动画
//内置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
/**
* 可以实现该接口,自定义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);
}
//举个栗子
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提供的接口说明
//设置自定义动画
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使用接口说明:
// 设置圆点半径
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功能与原组件基本无差异
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型