# SmartTabLayout

**Repository Path**: hihopeorg/SmartTabLayout

## Basic Information

- **Project Name**: SmartTabLayout
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-10
- **Last Updated**: 2021-10-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SmartTabLayout

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

#### 项目介绍

- 项目名称：导航标签布局
- 所属系列：ohos的第三方组件适配移植
- 功能：支持自定义标签布局，搭配PageSlider实现滑动效果。
- 项目移植状态：完成
- 调用差异：无
- 项目作者和维护人：hihope
- 联系方式：hihope@hoperun.com
- 原项目Doc地址：https://github.com/ogaclejapan/SmartTabLayout
- 原项目基线版本：无
- 编程语言：Java

#### 演示效果

![Image text](/screenshot/SmartTabLayout.gif)

#### 安装教程

方法1.

1. 下载har包SmartTabLayout.har。
2. 启动 DevEco Studio，将下载的har包，导入工程目录“entry->libs”下。
3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下har包的引用。

```
repositories {
    flatDir { dirs 'libs' }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
    implementation(name: 'SmartTabLayout', ext: 'har')
    ....
}
```

方法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.ogaclejapan.smarttablayout.ohos:utils-v4:1.0.1'
    implementation 'com.ogaclejapan.smarttablayout.ohos:smarttablayout:1.0.1'
}
```

#### 使用说明

1. 布局文件定义，下面是一些使用范例：

```xml
<com.ogaclejapan.smarttablayout.SmartTabLayout
    ohos:id="$+id:viewPagerTab"
    ohos:width="match_parent"
    ohos:height="48vp"
    app:stl_indicatorWithoutPadding="false"
    app:stl_indicatorInFront="false"
    app:stl_indicatorInterpolation="smart"
    app:stl_indicatorGravity="bottom"
    app:stl_indicatorColor="#40C4FF"
    app:stl_indicatorThickness="4vp"
    app:stl_indicatorWidth="auto"
    app:stl_indicatorCornerRadius="2vp"
    app:stl_overlineColor="#4D000000"
    app:stl_overlineThickness="0vp"
    app:stl_underlineColor="#4D000000"
    app:stl_underlineThickness="1vp"
    app:stl_dividerColor="#4D000000"
    app:stl_dividerThickness="1vp"
    app:stl_defaultTabTextAllCaps="true"
    app:stl_defaultTabTextColor="#FC000000"
    app:stl_defaultTabTextSize="12fp"
    app:stl_defaultTabTextHorizontalPadding="16vp"
    app:stl_defaultTabTextMinWidth="0vp"
    app:stl_distributeEvenly="false"
    app:stl_clickable="true"
    app:stl_titleOffset="24vp"
    app:stl_drawDecorationAfterTab="false"
    />

<PageSlider
    ohos:id="$+id:pageSlider"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:below="$id:header"/>
```

2. 绑定PagerSlider，需要继承ViewPagerItemAdapter：
```java
public class MyProvider extends ViewPagerItemAdapter {

    public MyProvider(ViewPagerItems pages) {
        super(pages);
    }
    
    ....
    
}
```

3. 通过ViewPagerItems的add方法添加标签：

```java
PageSlider viewPager = (PageSlider) findComponentById(ResourceTable.Id_pageSlider);
SmartTabLayout viewPagerTab = (SmartTabLayout) findComponentById(ResourceTable.Id_viewPagerTab);
demo.setup(viewPagerTab);

ViewPagerItems pages = new ViewPagerItems(this);
for (int titleResId : demo.tabs()) {
    pages.add(ViewPagerItem.of(getString(titleResId), ResourceTable.Layout_fraction_demo));
}

MyProvider provider = new MyProvider(pages);

viewPager.setProvider(provider);
viewPagerTab.setViewPager(viewPager);
```

#### 属性

下面是一些你可以设置的属性：
| 属性名 | 描述 |
|:---|:---|
| stl_indicatorWithoutPadding | If set to true, draw the indicator without padding of tab, default false |
| stl_indicatorInFront | Draw the indicator in front of the underline, default false |
| stl_indicatorInterpolation | Behavior of the indicator: 'linear' or 'smart' |
| stl_indicatorGravity | Drawing position of the indicator: 'bottom' or 'top' or 'center', default 'bottom' |
| stl_indicatorColor | Color of the indicator |
| stl_indicatorColors | Multiple colors of the indicator, can set the color for each tab |
| stl_indicatorThickness | Thickness of the indicator |
| stl_indicatorWidth | Width of the indicator, default 'auto' |
| stl_indicatorCornerRadius | Radius of rounded corner the indicator |
| stl_overlineColor | Color of the top line |
| stl_overlineThickness | Thickness of the top line |
| stl_underlineColor | Color of the bottom line |
| stl_underlineThickness | Thickness of the bottom line |
| stl_dividerColor | Color of the dividers between tabs |
| stl_dividerColors | Multiple colors of the dividers between tabs, can set the color for each tab |
| stl_dividerThickness | Thickness of the divider |
| stl_defaultTabBackground | Background drawable of each tab. In general it set the StateListDrawable |
| stl_defaultTabTextAllCaps | If set to true, all tab titles will be upper case, default true |
| stl_defaultTabTextColor | Text color of the tab that was included by default |
| stl_defaultTabTextSize | Text size of the tab that was included by default |
| stl_defaultTabTextHorizontalPadding | Text layout padding of the tab that was included by default |
| stl_defaultTabTextMinWidth | Minimum width of tab |
| stl_customTabTextLayoutId | Layout ID defined custom tab. If you do not specify a layout, use the default tab |
| stl_customTabTextViewId | Text view ID in a custom tab layout. If you do not define with customTabTextLayoutId, does not work |
| stl_distributeEvenly | If set to true, each tab is given the same weight, default false |
| stl_clickable | If set to false, disable the selection of a tab click, default true |
| stl_titleOffset | If set to 'auto_center', the slide position of the tab in the middle it will keep to the center. If specify a dimension it will be offset from the left edge, default 24dp |
| stl_drawDecorationAfterTab | Draw the decoration(indicator and lines) after drawing of tab, default false |

#### 版本迭代

- v1.0.1

#### 版权和许可信息

- Apache License, Version 2.0