# ViewPagerHelper

**Repository Path**: chinasoft_ohos/ViewPagerHelper

## Basic Information

- **Project Name**: ViewPagerHelper
- **Description**: 这个一个 PageSlider工具类，能够帮你快速实现导航栏轮播图
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-03-23
- **Last Updated**: 2021-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ViewPagerHelper


#### 项目介绍
- 项目名称：ViewPagerHelper
- 所属系列：openharmony的第三方组件适配移植
- 功能：能够帮你快速实现导航栏轮播图，app引导页，内置多种tab指示器，让你告别 PageSlider 的繁琐操作，专注逻辑功能
- 项目移植状态：Banner部分动画效果（CARD,MZ）有差异
- 调用差异：无
- 开发版本：sdk6，DevEco Studio 2.2 Beta1
- 基线版本：release v2.9

#### 效果演示
|圆形轮播指示器|矩形轮播指示器|
|:---:|:---:|
|<img src="https://gitee.com/chinasoft_ohos/ViewPagerHelper/raw/master/image/%E4%B8%8B%E8%BD%BD1.gif" width="75%"/>|<img src="https://gitee.com/chinasoft_ohos/ViewPagerHelper/raw/master/image/%E4%B8%8B%E8%BD%BD2.gif" width="75%"/>|

|扇形轮播|文字轮播指示器|
|:---:|:---:|
|<img src="https://gitee.com/chinasoft_ohos/ViewPagerHelper/raw/master/image/%E4%B8%8B%E8%BD%BD3.gif" width="75%"/>|<img src="https://gitee.com/chinasoft_ohos/ViewPagerHelper/raw/master/image/%E4%B8%8B%E8%BD%BD4.gif" width="75%"/>|

|三角形Tab指示器|矩形Tab指示器|
|:---:|:---:|
|<img src="https://gitee.com/chinasoft_ohos/ViewPagerHelper/raw/master/image/%E4%B8%8B%E8%BD%BD5.gif" width="75%"/>|<img src="https://gitee.com/chinasoft_ohos/ViewPagerHelper/raw/master/image/%E4%B8%8B%E8%BD%BD6.gif" width="75%"/>|

|渐变Tab指示器|
|:---:|
|<img src="https://gitee.com/chinasoft_ohos/ViewPagerHelper/raw/master/image/%E4%B8%8B%E8%BD%BD7.gif" width="50%"/>|
#### 安装教程
                                
1.在项目根目录下的build.gradle文件中，
 ```gradle
allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
}
 ```
2.在entry模块的build.gradle文件中，
 ```gradle
 dependencies {
    implementation('com.gitee.chinasoft_ohos:ViewPagerHelper:1.0.0')
    ......  
 }
 ```

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

#### 使用说明

Banner + Indicator

1. 布局文件定义，提供控件：BannerViewPager

```xml
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="200vp"
    ohos:width="match_parent"
    ohos:background_element="#ffffff"
    ohos:orientation="vertical">

    <com.zhengsr.viewpagerlib.view.BannerViewPager
        ohos:id="$+id:page_slider"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#0000000"
        ohos:layout_alignment="horizontal_center"/>

    <com.zhengsr.viewpagerlib.indicator.CircleIndicator
        ohos:id="$+id:page_slider_indicator"
        ohos:height="30vp"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:align_parent_right="true"
        ohos:alignment="right|vertical_center"
        ohos:orientation="horizontal"
        ohos:right_padding="10vp"/>
</DependentLayout>
```
2. 接着，在 AbilitySlice 中，这样配置

```java
BannerViewPager bannerViewPager = (BannerViewPager)layout.findComponentById(
ResourceTable.Id_page_slider);
CircleIndicator indicator = (CircleIndicator)layout.findComponentById(
ResourceTable.Id_page_slider_indicator);
//把需要的 indicator 添加进去
bannerViewPager.addIndicator(indicator);

```

3.设置监听即可，Layout_item_banner 为要展示的内容，比如一个 Image，或者参考示例
其中，setText 为模板方法，为了简便代码，当然还有其他一些方法，可查阅 PageHelperListener
onItemClick 为点击事件，当然还有其他方法，重写即可，比如子控件事件 onItemChildClick，如果有子控件
的点击事件，需要先在 bindView 中注册，比如 addChildrenClick(view,R.id.item_text,position)，其他一些方法，可查阅 PageHelperListener

```java
//设置弹幕View相关回调
bannerViewPager.setPageListener(ResourceTable.Layout_item_banner, mDatas,
    new PageHelperListener<TestBean>()
    {
        @Override
        public void bindView(Component view, final TestBean data, int position)
        {
            setText(view, ResourceTable.Id_des, data.msg);
            setImageView(view, ResourceTable.Id_image, data.resId);
        }

        @Override
        public void onItemClick(Component view, TestBean data, int position)
        {
            super.onItemClick(view, data, position);
            MyToast.show(getContext(), data.msg + " " + position,
                MyToast.ToastLayout.BOTTOM);
        }
    });
```

4.如果你要使用弧形图片，可以用在你的layout 中，使用 ArcImageView 这个控件，可以这样配置

```xml
<!--弧形图片，arc_height 为弧度的高度-->
<com.zhengsr.viewpagerlib.view.ArcImageView
    ohos:id="$+id:arc_icon"
    ohos:height="match_parent"
    ohos:width="match_parent"
    app:arc_height="15vp"
    ohos:scale_mode="clip_center"/>
```

5.如果你要使用缩放控件，可以用 ScaleImageView 这个控件，可以这样配置：

```xml
<!--缩放图片控件，属性可参看最后面的说明-->
<com.zhengsr.viewpagerlib.view.ScaleImageView
    ohos:id="$+id:scaleview"
    ohos:height="match_parent"
    ohos:width="match_parent"
    app:scale_double_factor="2"
    app:scale_auto_time="5"
    app:scale_autofit="true"
    app:scale_max_factor="6"
    app:scale_limit_board="true"/>
```
6.其他说明
```java
startAnim() 启动轮播,即开始轮播
stopAnim() 关闭轮播,可以通过这两个api实现轮播与否
isOutVisiableWindow() 判断轮播图是否超过可视界面
```

TabIndicator
1.布局文件定义，提供控件：TabIndicator

```xml
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#ffffff"
    ohos:orientation="vertical">

    <com.zhengsr.viewpagerlib.indicator.TabIndicator
        ohos:id="$+id:page_slider_indicator"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:background_element="#F4EFF1"
        ohos:orientation="horizontal"/>

    <PageSlider
        ohos:id="$+id:page_slider"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#0000000"
        ohos:layout_alignment="horizontal_center"/>
</DirectionalLayout>
```

2.初始化

```java
List<String> titles = new ArrayList<>();
    titles.add("新闻");
    titles.add("娱乐");
    titles.add("学习");
pageSlider = (PageSlider)findComponentById(ResourceTable.Id_page_slider);
pageSliderIndicator = (TabIndicator)findComponentById(
    ResourceTable.Id_page_slider_indicator);
```

3.把 TabIndicator 跟viewpager关联起来

```java
bannerViewPager.setPageSwitchTime(100);
bannerViewPager.setCentralScrollMode(true);
bannerViewPager.setProvider(new TabPagerProvider(this, titles));

pageSliderIndicator.textSize(50);
pageSliderIndicator.tabWidth(100);
pageSliderIndicator.tabHeight(8);
pageSliderIndicator.defaultColor(Color.getIntColor("#696666"));
pageSliderIndicator.moveColor(Color.getIntColor("#FF4081"));
pageSliderIndicator.tabColor(Color.getIntColor("#FF4081"));
pageSliderIndicator.tabTextType(TabTextType.COLOR);
pageSliderIndicator.showTab(true);
pageSliderIndicator.setTabData(pageSlider, titles, new TabIndicator.TabClickListener() {
    @Override
    public void onClick(int position) {

    }
});
```
自定义属性
**BannerViewPager**


| 名称 | 类型 |说明 |
|---|---|---|
|banner_isAutoLoop|boolean|是否自动轮播|
|banner_looptime|integer|轮播的时间|
|banner_switchtime|integer|viewpager的切换速度|
|banner_loop_max_count|integer|超过这个数字时，才会轮播效果|
|banner_card_height|integer,dimension|卡片的高度|
|banner_iscycle|boolean|是否循环|
|banner2_l_margin|dimension|Viewpager2专属，左边偏移量|
|banner2_r_margin|dimension|Viewpager2专属，右边偏移量|

**CircleIndicator**


| 名称 | 类型 |说明 |
|---|---|---|
|cir_type|integer|效果，支持3中，normal、cirToRect、scale|
|cir_normalColor|color|默认的颜色|
|cir_selectedColor|color|选中时的颜色|
|cir_horizon_margin|dimension|两个小圆球的距离|
|cir_size|dimension|小球的大小|
|cir_rect_width|dimension|当type为 cirToRect时，矩形的宽度|
|cir_scale_factor|float|当type 为scale，放大倍数|
|cir_canMove|boolean|是否可移动，默认支持移动|

**RectIndicator**


| 名称 | 类型 |说明 |
|---|---|---|
|rect_normalColor|color|默认的颜色|
|rect_selectedColor|color|选中时的颜色|
|rect_horizon_margin|dimension|两个矩形的距离|
|rect_width|dimension|矩形的宽度|
|rect_height|dimension|矩形的高度|
|rect_round_size|dimension|矩形的圆角|
|rect_canMove|boolean|是否可移动，默认支持移动|


**TextIndicator**

其实就是一个 Text ，自己配置大小颜色和背景即可

**弧形图片 ArcImageView**

| 名称 | 类型 |说明 |
|---|---|---|
|arc_height|dimension|弧度的高度|
|arc_blur|integer|图片的模糊度，0到25|
|arc_use_color|color，reference|是否使用背景色|
|arc_scaleX|dimension|缩放中心点X方向|
|arc_scaleY|dimension|缩放中心点Y方向|
|arc_scaleFactor|float|缩放比例|
|arc_auto_fix|boolean|自动适配大小，如果用glide，可以忽略,默认为true|


**顶部viewpager指示器 TabIndicator**

| 名称 | 类型 |说明 |
|---|---|---|
|visiabel_size|integer|可视化个数，比如有一排，我们就只要显示4个|
|tab_color|color,reference|指示器的颜色|
|tab_show|boolean|是否显示指示器|
|tab_text_type|normaltext,colortext|顶部文字的类型，nromaltext为普通的text，corlortext为文件渐变|
|tab_width|dimension|指示器的宽度|
|tab_height|dimension|指示器的高度|
|tab_textsize|dimension|顶部文字的大小|
|tab_text_default_color|color,reference|顶部文字默认的颜色|
|tab_text_change_color|color,reference|移动时，顶部文字的颜色|
|tap_type|tri,rect|指示器类型，有三角形或者圆条|
|tab_iscanscroll|boolean|指示器是否支持滚动|



**渐变文字 ColorTextVIew**

| 名称 | 类型 |说明 |
|---|---|---|
|colortext_size|dimension|文字大小|
|colortext_default_color|reference,color|默认颜色|
|colortext_change_color|reference,color|渐变颜色|

**缩放控件 ScaleImageView**

| 名称 | 类型 |说明 |
|---|---|---|
|scale_auto_time|reference,integer|双击时，达到放大的时间|
|scale_limit_board|boolean|是否限制边界，即不能缩放到比控件小|
|scale_autofit|boolean|自动适配缩放值，有些图片是正方形，如果你的高度没设定好，建议设置为false，不能会变形|
|scale_double_factor|integer|双击时放大倍数|
|scale_max_factor|integer|可放大的最大倍数


#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

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


#### 版本迭代

- 1.0.0