# XTabLayout

**Repository Path**: xujianhong/XTabLayout

## Basic Information

- **Project Name**: XTabLayout
- **Description**: No description available
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-05-28
- **Last Updated**: 2021-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XTabLayout

#### 项目介绍
- 项目名称：XTabLayout
- 所属系列：openharmony的第三方组件适配移植
- 功能：基于design包中的TabLayout进行了功能的扩展，增加了修改选中项字体大小、修改指示器高度以及限制屏幕显示范围内显示的Tab个数。
- 项目移植状态：主功能完成
- 调用差异：无
- 开发版本：sdk6，DevEco Studio 2.2 Beta1
- 基线版本：master分支

#### 效果演示

<img src="gif/recorder_gif.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:XTabLayout:1.0.0')
    ......  
 }
```

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

#### 使用说明

组件主要由ScrollView控件和自定义DirectionalLayout组成。

1.XML中添加XTabLayout控件:

```xml
<com.ohoskun.xtablayout.XTabLayout
        ohos:id="$+id:tab_layout"
        ohos:height="50vp"
        ohos:width="match_parent"
        app:xTabBackgroundColor="#fff000"
        app:xTabDisplayNum="5"
        app:xTabDividerColor="#000000"
        app:xTabDividerHeight="15vp"
        app:xTabIndicatorColor="#1d953f"
        app:xTabIndicatorHeight="4vp"
        app:xTabDividerWidth="2vp"
        app:xTabSelectedBackgroundColor="#fff000"
        app:xTabSelectedTextColor="#d71345"
        app:xTabSelectedTextSize="20fp"
        app:xTabTextColor="#000000"
        app:xTabTextSize="15fp"
        app:xTabTextSelectedBold="true"
        app:xTabTextBold="false"
        />
```

2.初始化:

```java
        //将TabLayout和PageSlider关联起来。
        XTabLayout mTabLayout = (XTabLayout) findComponentById(ResourceTable.Id_tab_layout);
        mTabLayout.setupWithViewPager(mPageSlider);
```

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

| name                    | type      | info                                                   |
|-------------------------|-----------|--------------------------------------------------------|
| xTabBackgroundColor     | color     | TabLayout背景颜色                                      |
| xTabTextColor   | color | 没有选中的Tab字体颜色        |
| xTabTextSize | dimension | 没有选中的Tab字体大小          |
| xTabDisplayNum          | integer   | 一屏要显示的Tab个数                                    |
| xTabDividerColor        | color     | 分割线颜色                                             |
| xTabDividerHeight       | dimension | 分割线高度                                             |
| xTabDividerWidth        | dimension | 分割线宽度                                             |
| xTabIndicatorColor      | color     | 指示器颜色                                             |
| xTabIndicatorHeight     | dimension | 指示器高度                                             |
| xTabSelectedBackgroundColor | color | 选中的Tab背景颜色        |
| xTabSelectedTextColor        | color | 选中的Tab字体颜色                 |
| xTabSelectedTextSize    | dimension | 选中的Tab字体大小             |
| xTabTextSelectedBold    | boolean | 选中的Tab字体是否粗体           |
| xTabTextBold    | boolean | 未选中的Tab字体是否粗体             |

2.分割线设置:
```java
        //不设置xTabDividerWidth属性或者属性值为0vp 则分割线不显示
        app:xTabDividerWidth="2vp"
```
<img src="gif/tablayout_no_line.PNG"></img>

#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

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

#### 版本迭代

- 1.0.0