鸿蒙开源组件——广告轮播，循环轮播组件

jacksky

发布于 2022-2-16 17:54

650浏览

0收藏

BGABanner-Ohos

项目介绍

项目名称：BGABanner-Ohos
所属系列：openharmony的第三方组件适配移植
功能：广告轮播，循环轮播
项目移植状态：主功能
调用差异：由于openharmony无对应动画效果以及事件分发api暂无法实现图片切换动画效果和图片文字同时滑动功能内部轮播展示的图片与原库不一致是因为使用的原作者的图片服务器地址挂掉的原因导致现已切换为本地图片加载。
开发版本：sdk6，DevEco Studio2.2 Beta1
基线版本：Release v3.0.0

效果演示

安装教程

方式一：

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

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

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

dependencies {
    implementation('com.gitee.chinasoft_ohos:BGABanner-Ohos:1.0.0')
   ......
}1.
2.
3.
4.

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

使用说明

BGABanner-Ohos 是一种基于openharmony的Pageslide的实现循环播放多个广告图片和手动滑动循环等功能的界面。
1.引导界面导航效果
2.支持根据服务端返回的数据动态设置广告条的总页数
3.支持大于等于1页时的无限循环自动轮播、手指按下暂停轮播、抬起手指开始轮播
4.支持自定义指示器位置和广告文案位置
5.支持图片指示器和数字指示器
6.支持选中特定页面
7.支持监听 item 点击事件
8.加载网络数据时支持占位图设置，避免出现整个广告条空白的情况

1.在布局文件中添加 BGABanner 导入： xmlns:app="http://schemas.huawei.com/apk/res/ohos"

<cn.bingoogolapple.bgabanner.BGABanner
  ohos:id="$+id:banner_guide_foreground"
  ohos:height="match_parent"
  ohos:width="match_parent"
  ohos:visibility="visible"
  app:banner_pageChangeDuration="1000"
  app:banner_pointAutoPlayAble="false"
  app:banner_pointTopBottomMargin="15"
  app:banner_transitionEffect="2"/>1.
2.
3.
4.
5.
6.
7.
8.
9.

2.在 Ability 中配置 BGABanner 的数据源

有多种配置数据源的方式，这里仅列出三种方式。

配置数据源的方式1：通过传入数据模型并结合 Adapter 的方式配置数据源。这种方式主要用于加载网络图片，以及实现少于3页时的无限轮播

mContentBanner.setAdapter(new BGABanner.Adapter<Image, String>() {
    @Override
    public void fillBannerItem(BGABanner banner, Image itemView, String model, int position) {
       // 此处使用网络加载图片的框架加载图片
    }
});
mContentBanner.setData(Arrays.asList("网络图片路径1", "网络图片路径2", "网络图片路径3"), Arrays.asList("提示文字1", "提示文字2", "提示文字3"));
1.
2.
3.
4.
5.
6.
7.

配置数据源的方式2：通过直接传入视图集合的方式配置数据源，主要用于自定义引导页每个页面布局的情况

List<Component> components = new ArrayList<>();
components.add(LayoutScatter.getInstance(getContext()).parse(ResourceTable.Id_guide_one,null,false));
components.add(LayoutScatter.getInstance(getContext()).parse(ResourceTable.Id_guide_two,null,false));
components.add(LayoutScatter.getInstance(getContext()).parse(ResourceTable.Id_guide_three,null,false));

mContentBanner.setData(components);1.
2.
3.
4.
5.
6.

配置数据源的方式3：通过传入图片资源 id 的方式配置数据源，主要用于引导页每一页都是只显示图片的情况

// PixelMap 的宽高在 maxWidth maxHeight 和 minWidth minHeight 之间
BGALocalImageSize localImageSize = new BGALocalImageSize(720, 1280, 320, 640);
// 设置数据源
mContentBanner.setData(localImageSize, ImageView.ScaleType.CENTER_CROP,
        ResourceTable.Media_guide_background_1,
        ResourceTable.Media_guide_background_2,
        ResourceTable.Media_guide_background_3);1.
2.
3.
4.
5.
6.
7.

3.监听广告 item 的单击事件，在 BGABanner 里已经帮开发者处理了防止重复点击事件

mContentBanner.setDelegate(new BGABanner.Delegate<Image, String>() {
    @Override
    public void onBannerItemClick(BGABanner banner, Image itemView, String model, int position) {
        new ToastDialog(getContext()).setText("点击了"+ position).show();
    }
});
1.
2.
3.
4.
5.
6.

4.设置「进入按钮」和「跳过按钮」控件资源 id 及其点击事件，如果进入按钮和跳过按钮有一个不存在的话就传 0，在 BGABanner 里已经帮开发者处理了防止重复点击事件，在 BGABanner 里已经帮开发者处理了「跳过按钮」和「进入按钮」的显示与隐藏

mBackgroundBanner.setEnterSkipViewIdAndDelegate(getAbility(), ResourceTable.Id_btn_guide_enter, ResourceTable.Id_tv_guide_skip, () -> {
Intent resultData = new Intent();
Operation operation = new Intent.OperationBuilder()
.withDeviceId("")
.withBundleName("cn.bingoogolapple.bgabanner.demo")
.withAbilityName("cn.bingoogolapple.bgabanner.demo.ui.MainAbility")
.build();
resultData.setOperation(operation);
startAbility(resultData);

Intent forwardData = new Intent();
Operation forwardOperation = new Intent.OperationBuilder()
.withDeviceId("")
.withBundleName("cn.bingoogolapple.bgabanner.demo.ui") 
.withAbilityName("cn.bingoogolapple.bgabanner.demo.ui.GuideAbility")
.build();
forwardData.setOperation(forwardOperation);
GuideAbilitySlice.this.stopAbility(forwardData);
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

自定义属性说明

<!-- 指示点容器背景 -->

banner_pointContainerBackground"

<!-- 指示点容器左右内间距 -->

banner_pointContainerLeftRightPadding

<!-- 指示点上下外间距 -->

banner_pointTopBottomMargin
<!-- 指示点左右外间距 -->
banner_pointLeftRightMargin
<!-- 指示器位置 -->
banner_dicatorLeftOrRightOrCenter="right"
<!-- 指示器文字位置 -->
banner_dicatorTextLeftOrRightOrCenter="left"
<!-- 是否开启自动轮播 -->
banner_pointAutoPlayAble
<!-- 自动轮播的时间间隔 -->
banner_pointAutoPlayInterval
<!-- 页码切换过程的时间长度-->
banner_pageChangeDuration
<!-- 提示文案的文字颜色 -->
 banner_tipTextColor
<!-- 提示文案的文字大小 -->
banner_tipTextSize
<!-- 加载网络数据时覆盖在 BGABanner 最上层的占位图 -->
banner_placeholderDrawable
<!-- 是否是数字指示器 -->
banner_isNumberIndicator
<!-- 数字指示器文字颜色 -->
banner_numberIndicatorTextColor
<!-- 数字指示器文字大小 -->
banner_numberIndicatorTextSize
<!-- 数字指示器背景 -->
banner_numberIndicatorBackground
<!-- 当只有一页数据时是否显示指示器，默认值为 false -->
banner_isNeedShowIndicatorOnOnlyOnePage
<!-- 自动轮播区域距离 BGABanner 底部的距离，用于使指示器区域与自动轮播区域不重叠 -->
banner_contentBottomMargin
<!-- 宽高比例，如果大于 0，则会根据宽度来计算高度，否则使用 ohos:layout_height 指定的高度 -->
banner_aspectRatio
<!-- 占位图和资源图片缩放模式 -->
ohos:ScaleMode1.
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.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异

版本迭代

1.0.0

版权和许可信息

Copyright 2015 bingoogolapple

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.