# Banner

**Repository Path**: chinasoft_ohos/Banner

## Basic Information

- **Project Name**: Banner
- **Description**: Banner图片轮播控件
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2021-05-27
- **Last Updated**: 2021-12-28

## Categories & Tags

**Categories**: harmonyos-image

**Tags**: None

## README

# Banner

#### 项目介绍
- 项目名称：Banner图片轮播控件
- 所属系列：openharmony的第三方组件适配移植
- 功能：实现图片轮播和指示器风格切换控件
- 项目移植状态：主功能完成，页面切换部分动画功能因目前openharmonySDK不支持除外
- 调用差异：无
- 开发版本：sdk6，DevEco Studio2.2 Beta1
- 基线版本： Release  2.3.17


#### 效果演示

<img src="1.gif"></img>

#### 安装教程
1.在项目根目录下的build.gradle文件中，
 ```
allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
}
 ```
2.在entry模块的build.gradle文件中，
 ```
 dependencies {
    implementation('com.gitee.chinasoft_ohos:Banner:1.0.2')
    ......  
 }
 ```
在sdk6，DevEco Studio2.2 Beta1下项目可直接运行
如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，
并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

#### 使用说明

组件主要由StackLayout控件和PageSlider控件组成。

```xml
    <com.ms.banner.Banner
        ohos:id="$+id:banner1"
        ohos:height="200vp"
        ohos:width="match_parent"
        app:indicator_height="30"
        app:indicator_width="60"
        />
```

引入布局后，直接设置数据源，开启轮播即可:

```java

     Banner banner1 = (Banner) findComponentById(ResourceTable.Id_banner1);
     banner1.setAutoPlay(true)
            .setPages(getDataInt(), new CustomViewHolder())
            .start();

public static ArrayList<Integer> getDataInt() {
        ArrayList<Integer> list=new ArrayList<>();
        list.add(ResourceTable.Media_b1);
        list.add(ResourceTable.Media_b2);
        list.add(ResourceTable.Media_b3);
        list.add(ResourceTable.Media_4);
        list.add(ResourceTable.Media_5);
        return list;
}

public class CustomViewHolder implements BannerViewHolder<Object> {

    @Override
    public Component createView(Context context, int position, Object data){
        Image image = new Image(context);;
        image.setScaleMode(Image.ScaleMode.STRETCH);
        image.setLayoutConfig(new ComponentContainer.LayoutConfig(MATCH_PARENT, MATCH_PARENT));
        if(data instanceof String){
            Utils.getInstance().setBitmap(context,image,(String)data);
            return image;
        }
        try {
            ImageSource.SourceOptions options = new ImageSource.SourceOptions();
            options.formatHint = "image/jpg";
            ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
            ResourceManager manager = context.getResourceManager() ;
            String path = manager.getMediaPath((Integer) data);
            Resource r1 = manager.getRawFileEntry(path).openRawFile();
            ImageSource source = ImageSource.create(r1,options);
            PixelMap p1 = source.createPixelmap(decodingOptions);
            image.setPixelMap(p1);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (NotExistException e) {
            e.printStackTrace();
        } catch (WrongTypeException e) {
            e.printStackTrace();
        }

        return image;
    }

}

```

自定义Banner控件，可以添加自定义属性，具体可用属性如下:

| name                          | type    | info                   |
| ----------------------------- | ------- | ---------------------- |
| indicator_width               | Int     | 设置指示器宽度         |
| indicator_height              | Int     | 设置指示器高度         |
| indicator_padding             | Int     | 设置指示器间隔         |
| indicator_margin              | Int     | 设置指示器外边距       |
| indicator_drawable_selected   | Int     | 设置指示器选中图片     |
| indicator_drawable_unselected | Int     | 设置指示器未选中图片   |
| delay_time                    | Int     | 设置图片轮播间隔时间   |
| is_auto_play                  | Bool    | 设置是否自动轮播       |
| is_loop                       | Bool    | 设置是否循环轮播       |
| title_background              | Element | 设置标题背景           |
| title_height                  | Int     | 设置标题高度           |
| title_textcolor               | Color   | 设置标题字色           |
| title_textsize                | Int     | 设置标题大下           |
| arc_height                    | Int     | 设置弧形高度           |
| arc_start_color               | Color   | 设置弧形渐变色开始颜色 |
| arc_end_color                 | Color   | 设置弧形渐变色结束颜色 |
| arc_direction                 | Int     | 设置弧形方向           |
| page_left_margin              | Int     | 设置左边距             |
| page_right_margin             | Int     | 设置右边距             |
| banner_default_image          | Element | 设置默认背景图         |

#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异，页面切换动画部分功能因目前SDK不支持除外

#### 版本迭代

- 1.0.2