# AlphaTabsIndicator

**Repository Path**: hihopeorg/AlphaTabsIndicator

## Basic Information

- **Project Name**: AlphaTabsIndicator
- **Description**: 仿微信底部导航状态栏
- **Primary Language**: Unknown
- **License**: Not specified
- **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

 # AlphaTabsIndicator

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

 #### 项目介绍

 - 项目名称：AlphaTabsIndicator
 - 所属系列：ohos的第三方组件适配移植
 - 功能：仿微信底部导航状态栏
 - 项目移植状态：完成
 - 调用差异：无
 - 项目作者和维护人：hihope
 - 联系方式：hihope@hoperun.com
 - 原项目Doc地址：https://github.com/yingLanNull/AlphaTabsIndicator
 - 编程语言：Java
 - 外部库依赖：无
 - 原项目基线版本：无release版本, sha1:46f91a3767ce9b146cf3e3c62db5f8f0ee05c556

 #### 演示效果

<img src="screenshot/sample.gif"/>

 #### 安装教程

 1. 编译依赖库har包alphaTabsIndicator.har。
 2. 启动 DevEco Studio，将编译的har包，导入工程目录“entry->libs”下。
 3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下jar包的引用。
 ```
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
 	……
 }
 ```
 4. 在导入的har包上点击右键，选择“Add as Library”对包进行引用，选择需要引用的模块，并点击“OK”即引用成功。

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

 #### 使用说明

 1. 布局使用
    
 ```
    <com.yinglan.alphatabs.AlphaTabsIndicator
        ohos:id="$+id:alphaIndicator"
        ohos:height="55vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <com.yinglan.alphatabs.AlphaTabView
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:padding="5vp"
            ohos:weight="1"
            app:tabIconNormal="$media:home_normal"
            app:tabIconSelected="$media:home_selected"
            app:tabText="微信"
            app:tabTextSize="13"
            app:textColorNormal="#999999"
            app:textColorSelected="#46c01b"/>

        <com.yinglan.alphatabs.AlphaTabView
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:padding="5vp"
            ohos:weight="1"
            app:tabIconNormal="$media:category_normal"
            app:tabIconSelected="$media:category_selected"
            app:tabText="通讯录"
            app:tabTextSize="13"
            app:textColorNormal="#999999"
            app:textColorSelected="#46c01b"/>

        <com.yinglan.alphatabs.AlphaTabView
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:padding="5vp"
            ohos:weight="1"
            app:tabIconNormal="$media:service_normal"
            app:tabIconSelected="$media:service_selected"
            app:tabText="发现"
            app:tabTextSize="13"
            app:textColorNormal="#999999"
            app:textColorSelected="#46c01b"/>

        <com.yinglan.alphatabs.AlphaTabView
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:padding="5vp"
            ohos:weight="1"
            app:tabIconNormal="$media:mine_normal"
            app:tabIconSelected="$media:mine_selected"
            app:tabText="我"
            app:tabTextSize="13"
            app:textColorNormal="#999999"
            app:textColorSelected="#46c01b"/>
             、、、
    </com.yinglan.alphatabs.AlphaTabsIndicator>
 ```

 2. 设置角标/小红点
    
 ```
        AlphaTabsIndicator alphaTabsIndicator = (AlphaTabsIndicator) findComponentById(ResourceTable.Id_alphaIndicator);
        alphaTabsIndicator.setViewPager(pageSlider);
        alphaTabsIndicator.getTabView(0).showNumber(6); //显示数字角标
        alphaTabsIndicator.getTabView(1).showPoint(); //显示小红点
        alphaTabsIndicator.getTabView(2).removeShow(); //移除当前角标
 ```

 #### 版本迭代

 - v1.0.0

  实现功能

   1. 添加导航table.
   2. 为table添加角标.
   3. 去除table角标.
   4. 为table添加小红点.