鸿蒙OS应用开发之——Java UI框架-常用组件TimePicker

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • TimePicker的基本使用
  • TimePicker样式配置
  • 范围选择设置

二 TimePicker的基本使用

2.1 创建TimePicker

XML中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <TimePicker
        ohos:id="$+id:time_picker"
        ohos:height="match_content"
        ohos:width="match_parent"/>

</DirectionalLayout>

默认的TimePicker的效果

2.2 设置12小时制（非24小时制）

XML中配置

1
2
3
4
<TimePicker
    ...
    ohos:24_hour_mode="false"
/>

12小时制效果

2.3 获取时间

1
2
3
4
TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);
int hour = timePicker.getHour();
int minute = timePicker.getMinute();
int second = timePicker.getSecond();

2.4 设置时间

1
2
3
timePicker.setHour(19);
timePicker.setMinute(18);
timePicker.setSecond(12);

2.5 响应时间改变事件

1
2
3
4
5
6
timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {
    @Override
    public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {
        ...
    }
});

三 显示样式配置

3.1 设置字体属性

3.1.1 设置未选中字体的颜色和大小

XML中配置

1
2
3
4
<TimePicker
    ...
    ohos:normal_text_color="#007DFF"
    ohos:normal_text_size="20fp"/>

效果图

3.1.2 设置选中字体的颜色和大小

XML中配置

1
2
3
4
<TimePicker
    ...
    ohos:selected_text_color="#007DFF"
    ohos:selected_text_size="20fp"/>

设置选中字体的颜色和大小效果

3.1.3 设置操作项文本颜色

XML中配置

1
2
3
<TimePicker
    ...
    ohos:operated_text_color="#FF9912"/>

操作项文本颜色设置效果

3.2 设置TimePicker中所选文本边距与普通文本边距的比例

XML中配置

1
2
3
<TimePicker
    ...
    ohos:selected_normal_text_margin_ratio="10"/>

效果图

3.3 设置着色器颜色

XML中配置

1
2
3
<TimePicker
    ...
    ohos:shader_color="#00BFFF"/>

效果图

3.4 设置选中时间的上下边框

XML中配置

1
2
3
<TimePicker
    ...
    ohos:bottom_line_element="#00BFFF"/>

效果图

3.5 设置12小时制下显示样式

XML中配置

1
2
3
<TimePicker
    ...
    ohos:am_pm_order="1"/>

效果图

四 范围选择设置

4.1 设置隐藏或显示时分秒

4.1.1 隐藏小时的显示

代码中设置

1
timePicker.showHour(false);

小时不显示效果

4.1.2 隐藏分钟

代码中设置

1
timePicker.showMinute(false);

隐藏分钟效果

4.1.3 隐藏秒

代码中设置

1
timePicker.showSecond(false);

隐藏秒效果

4.2 设置TimePicker的selector是否可以滑动

4.2.1 设置小时selector无法滚动选择

代码中设置

1
timePicker.enableHour(false);

小时selector无法滚动选择效果

4.2.2 设置分钟selector无法滚动

代码中设置

1
timePicker.enableMinute(false);

分钟selector固定无法选择效果

4.2.3 设置秒selector无法滚动

代码中设置

1
timePicker.enableSecond(false);

秒selector无法滚动选择效果