鸿蒙开源组件——滑动特效banner

jacksky

发布于 2022-2-22 17:33

浏览

0收藏

RevealBanner

项目介绍

项目名称：RevealBanner
所属系列：openharmony的第三方组件适配移植
功能：滑动特效banner
项目移植状态：100%
调用差异：无
开发版本：sdk6，DevEco Studio 2.2 Beta1
基线版本：Releases 1.0.2

效果演示

鸿蒙开源组件——滑动特效banner-鸿蒙开发者社区

安装教程

1.在项目根目录下的build.gradle文件中，

allprojects {
   repositories {
       maven {
           url 'https://s01.oss.sonatype.org/content/repositories/snapshots/'
       }
   }
}1.
2.
3.
4.
5.
6.
7.

2.在entry模块的build.gradle文件中，

dependencies {
   implementation('com.gitee.chinasoft_ohos:RevealBanner:0.0.1-SNAPSHOT')
   ......
}1.
2.
3.
4.

在sdk6，DevEco Studio 2.2 Beta1下项目可直接运行如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

使用说明

在 layout 文件中:

<StackLayout
    ohos:width="match_parent"
    ohos:height="220vp">
    <com.wikikii.bannerlib.banner.view.BannerBgContainer
        ohos:id="$+id:banner_bg_container"
        ohos:height="220vp"
        ohos:width="match_parent"/>

    <com.wikikii.bannerlib.banner.LoopLayout
        ohos:id="$+id:loop_layout"
        ohos:height="150vp"
        ohos:width="match_parent"
        ohos:layout_alignment="bottom"
        ohos:bottom_margin="40vp"/>
</StackLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

代码设置属性

 // 设置轮播图属性
    loopLayout.setLoop_ms(3000);//轮播的速度(毫秒)
    loopLayout.setLoop_duration(400);//滑动的速率(毫秒)
    loopLayout.setScaleAnimation(true);// 设置是否需要动画
    loopLayout.setIndicatorLocation(IndicatorLocation.Center);//指示器位置-中Center
    loopLayout.initializeData(this);
    // 设置轮播图属性end
    
    // 准备数据
    ArrayList<BannerInfo> bannerInfos = new ArrayList<>();
    List<Object> bgList = new ArrayList<>();
    bannerInfos.add(new BannerInfo(R.mipmap.banner_1, "first"));// 注意： 使用网络图片只需把 R.mipmap.banner_1 替换为网络图片地址即可
    bannerInfos.add(new BannerInfo(R.mipmap.banner_2, "second"));
    bgList.add(R.mipmap.banner_bg1);
    bgList.add(R.mipmap.banner_bg2);
    // 设置监听
    loopLayout.setOnLoadImageViewListener(new OnDefaultImageViewLoader() {
        @Override
        public void onLoadImageView(ImageView view, Object object) {
            Glide.with(view.getContext())
                    .load(object)
                    .into(view);
        }
    });
    loopLayout.setOnBannerItemClickListener(this);
    if (bannerInfos.size() == 0) {
        return;
    }
    loopLayout.setLoopData(bannerInfos);// 设置轮播数据
    bannerBgContainer.setBannerBackBg(this, bgList);// 背景容器设置轮播图片
    loopLayout.setBannerBgContainer(bannerBgContainer);// 联动
    loopLayout.startLoop();// 开始循环1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.