# SpaceTabLayout

**Repository Path**: chinasoft5_ohos/SpaceTabLayout

## Basic Information

- **Project Name**: SpaceTabLayout
- **Description**: 这是一个RelativeLayout的自定义实现，您可以使用它与ViewPager一起在片段之间导航。
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-06
- **Last Updated**: 2024-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 # SpaceTabLayout

#### 项目介绍
- 项目名称：SpaceTabLayout
- 所属系列：openharmony 第三方组件适配移植
- 功能：一个DependentLayout的自定义实现，可以使用它与PageSlider一起进行导航
- 项目移植状态：主功能完成
- 调用差异：有 (TabList的Tab不支持自定义布局,缺少setTabOneView(int tabOneLayout),setTabTwoView(int tabOneLayout),setTabThreeView(int tabOneLayout),setTabFourView(int tabOneLayout),setTabFiveView(int tabOneLayout))
- 开发版本：sdk6，DevEco Studio 2.2 Beta2
- 基线版本：Release 1.0.4
#### 效果演示
![example0](./readmeSource/1.gif)

#### 安装教程

在moudle级别下的build.gradle文件中添加依赖，在dependencies标签中增加对libs目录下jar包的引用  
 ```
// 添加maven仓库
repositories {
    maven {
        url 'https://s01.oss.sonatype.org/content/repositories/releases/'
    }
}

// 添加依赖库
dependencies {
    implementation 'com.gitee.chinasoft_ohos:spacetablayout:1.0.0'
}
 ```
在sdk6，DevEco Studio2.2 Beta2下项目可直接运行
如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，
并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

#### 使用说明

| Method                                                    | Description                                                                                                 |
| ----------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|
| getTabLayout();                                           | 获取基础布局                                                                                                 |
| setTabColor(int backgroundColor);                         | 改变标签的颜色。                                                                                             |
| getCurrentPosition();                                     | 获取当前选中位置                                                                                             |
| getButton();                                              | 获取操作按钮                                                                                                 |
| setButtonColor(int backgroundColor);                      | 设置操作按钮颜色                                                                                             |
| setOnClickListener(View.OnClickListener l);               | 设置点击监听                                                                                                 |
| setTabOneOnClickListener(View.OnClickListener ll);        | 设置第一个位置点击监听                                                                                        |
| setTabTwoOnClickListener(View.OnClickListener cl);        | 设置第二个位置点击监听                                                                                        |
| getTabOneView();                                          | 获取TabList第一个Tab                                                                                         |
| setTabOneView(TabList.Tab tabOneView);                    | 设置TabList 第一个Tab                                                                                        |
| getTabTwoView();                                          | 获取TabList第二个Tab                                                                                         |
| setTabTwoView(TabList.Tab tabTwoView);                    | 设置TabList 第二个Tab                                                                                        |
| setTabOneIcon(int tabOneIcon);                            | 设置第一个Tab 图标(只支持矢量图资源Id)                                                                         |
| setTabTwoIcon(int tabTwoIcon);                            | 设置第二个Tab 图标(只支持矢量图资源Id)                                                                         |
| setTabOneIcon(Element tabOneIcon);                        | 设置第一个Tab 图标                                                                                            |
| setTabTwoIcon(Element tabOneIcon);                        | 设置第二个Tab 图标                                                                                            |

XML
在布局文件中使用这个控件，可以自定义tab 文字，图标，和颜色
```xml
 <eu.long1.spacetablayout.SpaceTabLayout
        ohos:id="$+id:spaceTabLayout"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:layout_alignment="bottom"
        app:number_of_tabs="$integer:tab_five"
        app:starting_position="$integer:one"></eu.long1.spacetablayout.SpaceTabLayout>
```

 XML 样例
```xml
<?xml version="1.0" encoding="utf-8"?>
<StackLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:app="http://schemas.huawei.com/res/ohos-auto"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <PageSlider
        ohos:id="$+id:viewPager"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:bottom_margin="56vp"
        ohos:top_margin="56vp"></PageSlider>

    <eu.long1.spacetablayout.SpaceTabLayout
        ohos:id="$+id:spaceTabLayout"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:layout_alignment="bottom"
        app:number_of_tabs="$integer:tab_five"
        app:starting_position="$integer:two"></eu.long1.spacetablayout.SpaceTabLayout>
</StackLayout>
```
 自定义样式属性
* **number_of_tabs**          标签数量
* **starting_position**       开始位置
* **tab_color**               标签颜色
* **button_color**            圆形按钮颜色
* **text_color**              文字默认颜色
* **text_one**                第一个标签文字
* **text_two**                第二个标签文字
* **text_three**              第三个标签文字
* **icon_one**                第一个标签图标
* **icon_two**                第二个标签图标
* **icon_three**              第三个标签图标
* **icon_four**               第四个标签图标
* **icon_five**               第五个标签图标

 代码实现
 

```java
    SpaceTabLayout tabLayout;
    
      @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        List<Component> componentList = new ArrayList<>();
        LayoutScatter layoutScatter = LayoutScatter.getInstance(this);
        componentList.add(layoutScatter.parse(ResourceTable.Layout_fragment_a, null, false));
        componentList.add(layoutScatter.parse(ResourceTable.Layout_fragment_b, null, false));
        componentList.add(layoutScatter.parse(ResourceTable.Layout_fragment_c, null, false));
        
        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_viewPager);
        tabLayout = (SpaceTabLayout) findComponentById(ResourceTable.Id_spaceTabLayout);
        tabLayout.initialize(pageSlider, componentList);
    
    
        //返回时清除缓存数据
        @Override
        protected void onBackPressed() {
        tabLayout.onDestroy();
        super.onBackPressed();
    }
```
#### 测试信息
CodeCheck代码测试无异常  
CloudTest代码测试无异常  
病毒安全检测通过  
当前版本demo功能与原组件基本无差异 

#### 版本迭代
- 1.0.0

#### 版权和许可信息 
    Copyright (c) 2016 Lung Răzvan

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.