# IndicatorBox

**Repository Path**: hihopeorg/IndicatorBox

## Basic Information

- **Project Name**: IndicatorBox
- **Description**: IndicatorBox是一个自定义指示框视图
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-02
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## **IndicatorBox**
本项目是基于开源项目 IndicatorBox 进行ohos化的移植和开发的，可以通过项目标签以及github地址（https://github.com/wusp/IndicatorBox ）追踪到原项目版本

#### 项目介绍

* 项目名称 ：IndicatorBox是一个自定义指示框视图
* 所属系列：ohos的第三方组件适配移植
* 功能：底部弹框展示。
* 项目移植状态：完成
* 调用差异：无
* 项目作者和维护人：hihope
* 联系方式：hihope@hoperun.com
* 原项目Doc地址：https://github.com/wusp/IndicatorBox
* 原项目基线版本：无release 版本，  shal:039d8373046636510e39144fd93c0da6395986a4
* 编程语言：java
* 外部库依赖：无


#### 效果展示图
![](./screenshots/indicatorbox.gif)

#### 安装教程

#### 安装教程
方法(一)
1. 下载IndicatorBox的源码编译依赖包IndicatorBox.har。
2. 启动 DevEco Studio，将下载的har包，导入工程目录“entry->libs”下。
3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下har包的引用。
4. 在导入的har包上点击右键，选择“Add as Library”对包进行引用，选择需要引用的模块，并点击“OK”即引用成功。

```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	……
}
```
方法(二)

1.在工程的build.gradle的allprojects中，添加HAR所在的Maven仓地址
```
repositories {
    maven {
        url 'http://106.15.92.248:8081/repository/Releases/' 
    }
}
```
2.在应用模块的build.gradle的dependencies闭包中，添加如下代码:
```
dependencies {
    implementation 'com.wusp.indicatorbox_library.ohos:indicatorbox:1.0.0'
  
}

```

#### 使用说明

(1.1) ShrinkButton 使用说明,在ability_shrink_button.xml中,如下：
```
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:id="$+id:parentComponent"
    ohos:background_element="#99000000">
...
 <com.wusp.indicatorbox_library.ShrinkButton.ShrinkButton
        ohos:id="$+id:btnSignIn"
        ohos:height="48vp"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:background_element="$graphic:button_rounded_color_accent_background"
        ohos:bottom_margin="90vp"
        ohos:horizontal_center="true"
        ohos:left_margin="16vp"
        ohos:right_margin="16vp"
        ohos:text="Sign In"
        ohos:text_color="#ffffff"
        ohos:text_size="16vp"/>
...
</DependentLayout>
```

(1.2) ShrinkButton 使用示例, 在ShrinkButtonAbilitySlice.java,如下
```
  public class ShrinkButtonAbilitySlice extends AbilitySlice {
    ...
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_shrink_button);
        btnSignIn = (ShrinkButton) findComponentById(ResourceTable.Id_btnSignIn);
        popuCompont = (Component) findComponentById(ResourceTable.Id_popuCompont);
        screenWidth = DisplayManager.getInstance().getDefaultDisplay(getContext()).get().getAttributes().width;
         btnSignIn.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {

                snackbar("Restart progressing animation if the animation is paused or stoped.");
            }
        });
        DependentLayout fab = (DependentLayout) findComponentById(ResourceTable.Id_DButton);

        fab.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                btnSignIn.stop();
                snackbar("Pause animation.");
            }
        });
    }
    ...
}
```
(2.1)   ViewPagerIndicator 使用示例，在ability_view_pager_indicator.xml中， 如下
```

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
   ...
   <com.wusp.indicatorbox_library.ViewPagerIndicator.ViewPagerIndicator
        ohos:id="$+id:vpIndicator"
        ohos:width="80vp"
        ohos:height="80vp"
        app:ripple_color="#FFC8C8C8"
        app:circle_color="#000000"
        ohos:align_parent_top="true"/>
   ...
</DependentLayout>
```
(2.2)  ViewPagerIndicator 使用示例, ViewPagerIndicatorAbilitySlice.java,如下
```
public class ViewPagerIndicatorAbilitySlice extends AbilitySlice {
    private int[] imageRes = {
            ResourceTable.Media_icon_1,
            ResourceTable.Media_icon_2,
            ResourceTable.Media_icon_3
    };
    private ViewPagerIndicator indicator;
    private PageSlider viewPager;

    private ArrayList<Component> viewSparseArray;
    private Component component;
    private Text snackText;
    private int screenHeight;
    private DependentLayout bottomDependentLayout;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_view_pager_indicator);
        screenHeight = DisplayManager.getInstance().getDefaultDisplay(getContext()).get().getAttributes().height;

        component = findComponentById(ResourceTable.Id_popuCompont);
        bottomDependentLayout = (DependentLayout) findComponentById(ResourceTable.Id_bottomDependentLayout);
        Text snackText = (Text) findComponentById(ResourceTable.Id_snackText);
        viewSparseArray = new ArrayList<>();
        indicator = (ViewPagerIndicator) findComponentById(ResourceTable.Id_vpIndicator);
        viewPager = (PageSlider) findComponentById(ResourceTable.Id_viewpager);
        final ViewPagerAdapter adapter = new ViewPagerAdapter();
        viewPager.setProvider(adapter);
        indicator.setViewPager(viewPager);
        indicatorRes(viewPager, adapter.getCount());
        DependentLayout fab = (DependentLayout) findComponentById(ResourceTable.Id_DButton);
        fab.setClickedListener(component -> indicator.startInfiniteAnimation());
        snackText.setText("Click fab button to start infinite ripple animation.");
        AnimatorValue animatorValue = new AnimatorValue();
        animatorValue.setCurveType(Animator.CurveType.LINEAR);
        animatorValue.setDuration(1000);
        animatorValue.setDelay(2000);
        int moveHeight = snackText.getHeight();
        animatorValue.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {
            @Override
            public void onUpdate(AnimatorValue animatorValue, float v) {
                bottomDependentLayout.setContentPositionY(screenHeight - bottomDependentLayout.getHeight() - moveHeight + moveHeight * v);
            }
        });
        animatorValue.start();
    }
    @Override
    protected void onInactive() {
        super.onInactive();
    }

    private FlycoPageIndicator indicatorRes(PageSlider viewPager, int count) {
        final FlycoPageIndicator itAnim = (FlycoPageIndicator) findComponentById(ResourceTable.Id_indicator_circle_anim);
        // 滑动过度动画与指示器子元素动画只能二选一，setIsSnap(true)代表不要滑动过度动画,要子元素动画
        itAnim.setIsSnap(true)
                .setSelectAnimClass(ZoomInEnter.class)
                .setUnselectAnimClass(ZoomInExist.class)
                .setPageSlider(viewPager, count);
        return itAnim;
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    class ViewPagerAdapter extends PageSliderProvider {

        @Override
        public int getCount() {
            return imageRes.length;
        }

        @Override
        public Object createPageInContainer(ComponentContainer componentContainer, int position) {
            Image imageView = new Image(getContext());
            ComponentContainer.LayoutConfig lp = new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,
                    ComponentContainer.LayoutConfig.MATCH_PARENT);
            imageView.setLayoutConfig(lp);
            imageView.setScaleMode(Image.ScaleMode.ZOOM_CENTER);
            imageView.setPixelMap(imageRes[position]);
            componentContainer.addComponent(imageView);
            viewSparseArray.add(position, imageView);
            return imageView;
        }

        @Override
        public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
            componentContainer.removeComponent((Component) o);
            viewSparseArray.remove(i);
        }

        @Override
        public boolean isPageMatchToObject(Component component, Object o) {
            return component == o;
        }

    }

}


```
(3.1)FlashBorderView  使用说明,在ability_shrink_button.xml中,如下：content_flash_in.xml
```
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <com.wusp.indicatorbox_library.FlashBorder.FlashBorderView
        ohos:id="$+id:flashItemView"
        ohos:width="350vp"
        ohos:height="50vp"
        ohos:center_in_parent="true"
        ohos:background_element="#E8E8E8"/>
</DirectionalLayout>
```
(3.2)ShrinkButton 使用示例, FlashBorderAbilitySlice.java,如下
```
public class FlashBorderAbilitySlice extends AbilitySlice {
    private FlashBorderView flashBorderView;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_flash_border);
        flashBorderView = (FlashBorderView) findComponentById(ResourceTable.Id_flashItemView);
        final AnimatorValue valueAnimator = new AnimatorValue();
        valueAnimator.setDuration(700);
        valueAnimator.setValueUpdateListener((animatorValue, v) -> {
            flashBorderView.setmFraction(v);
            flashBorderView.invalidate();   //from UI thread
        });
        flashBorderView.setClickedListener(component -> valueAnimator.start());
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

```

#### 版本迭代
- v1.0.0
#### 实现功能
 * 按钮加载动画效果
 * 圆形指数器闪烁，数值变化
 * 页面成功√状态和失败打×状态
 * 点赞动画效果
 * 矩形按钮边框变化

#### 版权和许可信息
```
The MIT License (MIT) 
```