一、布局中设置拖动条 Slider 组件

注意该 Slider 组件与进度条 Progressbar 组件的区别 , Progressbar 不能拖动 , 只有显示功能 ;

布局中设置的 Slider 拖动条 :

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Sliderohos:id="$+id:button"ohos:height="match_content"ohos:width="match_parent"ohos:layout_alignment="horizontal_center"ohos:top_margin="200"ohos:orientation="horizontal"ohos:min="0"ohos:max="100"ohos:progress="66"ohos:background_element="#000000"ohos:progress_color="#00FF00"ohos:text="更新当前进度值"ohos:text_size="100"/><Buttonohos:id="$+id:button"ohos:height="match_content"ohos:width="match_content"ohos:top_margin="200"ohos:layout_alignment="horizontal_center"ohos:text="更新当前进度值按钮"ohos:text_size="50"/><Textohos:id="$+id:text"ohos:height="match_content"ohos:width="match_content"ohos:top_margin="200"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="当前进度值 : 66"ohos:text_size="100"/></DirectionalLayout>

Slider 相关标签属性说明 :

设置拖动条方向 : ohos:orientation=“horizontal” , 水平方向 ;

设置最小值 : ohos:min=“0” , 0 ;

设置最大值 : ohos:max=“100” , 100 ;

设置当前值 : ohos:progress=“66” , 66 ;

设置背景颜色 : ohos:background_element="#000000" , 黑色 ;

设置进度条颜色 : ohos:progress_color="#00FF00" , 绿色 ;

纯布局效果展示 :

二、代码中控制拖动条 Slider 组件

代码中控制拖动条 Slider 组件 :

界面中有 Slider , Button , Text 三个组件, 点击按钮 , 将 Slider 中的进度值显示到 Text 组件中 ;

package com.example.slider.slice;import com.example.slider.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Slider;
import ohos.agp.components.Text;public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);// 获取布局文件中的拖动条 SliderSlider slider = (Slider) findComponentById(ResourceTable.Id_slider);// 获取布局文件中的按钮 ButtonButton button = (Button) findComponentById(ResourceTable.Id_button);// 获取布局文件中的文本 TextText text = (Text) findComponentById(ResourceTable.Id_text);// 设置按钮点击事件button.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {// 获取当前属性值int progress = slider.getProgress();text.setText("当前进度值 : " + progress);}});}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )相关推荐

Flash与组件：制作Slider组件
利用as3,我们可以尝试制作一些有趣的组件,虽然现在已经有很多实用的组件,但是自己尝试写一下也是不错的.利用as3语法,借用了绘图Api我们尝试制作一下这个组件.因为我们不需要很强大的功能,对此我们只 ...
【鸿蒙 HarmonyOS】UI 组件 ( 进度条 ProgressBar 和 RoundProgressBar 组件 )
文章目录一.布局中设置 ProgressBar.RoundProgressBar 进度条二.代码中设置 ProgressBar.RoundProgressBar 进度条三.完整代码示例四.Gi ...
【鸿蒙 HarmonyOS】UI 组件 ( Text 组件 )
文章目录一.Text 组件二.Module 准备三.代码示例四.GitHub 地址一.Text 组件 Text 组件是在 UI 界面中显示文本的组件 ; 1. 布局文件中设置 Text : ...
【鸿蒙 HarmonyOS】Ability 中使用纯代码绘制布局及 UI 组件
文章目录一.Ability 与 Slice 简介二.Ability 中使用纯代码绘制布局及 UI 组件三.Ability 中使用纯代码绘制布局及 UI 组件代码示例四.GitHub 地址一. ...
【鸿蒙 HarmonyOS】UI 组件 ( Button 组件 )
文章目录一.布局文件中设置 Button 组件属性二.代码中修改 Button 组件属性三.Button 点击事件四.完整代码示例五.执行结果六.GitHub 地址一.布局文件中设置 B ...
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件绘制布局及 UI 组件
文章目录一.创建 XML 布局文件二.XML 布局文件中添加子组件三.创建 Ability 四.配置 Ability 五.Ability 加载布局文件六.完整代码及效果展示四.GitHub ...
UI组件之ProgressBar及其子类（二）SeekBar拖动条和RatingBar星级评分条的使用
拖动条采用拖动滑块的位置来表示数值 SeekBar的常用xml属性值: 重要的android:thumb制定一个Drawable对象,改变滑块外观通过滑块来改变图片的透明度: main.xml &l ...
八、华为鸿蒙HarmonyOS应用开发之Java UI框架、常用TextField组件使用
一.TextField组件二.TextField组件实例测试 1.新建基于empty ability(Java)手机应用程序的TextField工程.运行出现如下结果 2.在resources-&g ...
鸿蒙os事例代码,鸿蒙HarmonyOS App开发造轮子之自定义圆形图片组件的实例代码
一.背景在采用Java配合xml布局编写鸿蒙app页面的时候,发现sdk自带的Image组件并不能将图片设置成圆形,反复了翻阅了官方API手册(主要查阅了Compont和Image相关的API),起 ...

【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )

文章目录

一、布局中设置拖动条 Slider 组件

二、代码中控制拖动条 Slider 组件

【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )相关推荐

最新文章

热门文章