鸿蒙开源组件——分段器自定义UI组件

jacksky

发布于 2021-8-11 11:14

浏览

2收藏

SHSegmentControl

项目介绍

项目名称：SHSegmentControl
所属系列：openharmony 第三方组件适配移植
功能：分段器自定义组件
项目移植状态：主功能完成
调用差异：有
- 方法 setSelectedTextColors 和 setColors：参数 ColorStateList 改为 StateElement
- 方法 setTextSize：第一个参数从 int 改为 Text.TextSizeType sizeType
开发版本：sdk5，DevEco Studio2.1 Release
基线版本：Release 1.17

效果演示

安装教程

在moudle级别下的build.gradle文件中添加依赖，在dependencies标签中增加对libs目录下jar包的引用。

// 添加maven仓库
repositories {
    maven {
        url 'https://s01.oss.sonatype.org/content/repositories/snapshots/'
    }
}

// 添加依赖库
dependencies {
    implementation 'com.gitee.chinasoft_ohos:SHSegmentControl:0.0.1-SNAPSHOT'
}

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

使用说明

相关属性:

selectedColor 设置选中后的颜色
normalColor 设置未选中的颜色
textColors 设置文字内容的颜色，可以使用ColorStateList来设置选中和未选中的颜色，这个属性设置以后，之前设置的selectedColor和normalColor对文字内容失去作用
backgroundColors 设置边框、选中的背景和分割线的颜色，可以使用ColorStateList来同事设置选中和未选中的颜色，和textColors一样，设置这个属性后，selectedColor和normalColor会对边框和背景失去作用
cornerRadius 设置背景的圆角半径
boundWidth 设置边框的粗细
separatorWidth 设置分割线的粗细
texts 设置文字内容，通过'|'分隔开
verticalGap 纵向上的边距
horizonGap 横向的边距

<com.sevenheaven.segmentcontrol.SegmentControl    
    ohos:id="$+id/segment_control"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:top_margin="20vp"                       	
    ohos:textSize="18fp"
    app:block_direction="horizontal"
    app:selectedColor="#32ADFF"
    app:normalColor="#FFFFFF"
    app:textColors="$graphic:text_colors"
    app:backgroundColors="$graphic:background_color"
    app:cornerRadius="5vp"
    app:separatorWidth="2vp"
    app:boundWidth="4vp"
    app:texts="啊啊|啦啦啦|哈哈哈|顶顶顶顶"
    app:verticalGap="10vp"
    app:horizonGap="10vp"
    />

使用OnSegmentControlClickListener来监听选中的变换

mSegmentHorzontal = (SegmentControl) findViewById(ResourceTable.Id_segment_control);
mSegmentHorzontal.setOnSegmentControlClickListener(new SegmentControl.OnSegmentControlClickListener() {
    @Override
    public void onSegmentControlClick(int index) {
        Log.i(TAG, "onSegmentControlClick: index = " + index);
    }
});