鸿蒙开发(9)---TimePicker组件

简介: 鸿蒙开发(9)---TimePicker组件

TimePicker组件


有DatePicker的日期选择组件,那么也肯定有类似的事件选择组件。鸿蒙给我们提供了TimePicker组件进行时间选择操作。


下面,我们将详细讲解TimePicker组件的使用规则。


创建TimePicker组件

首先,我们来创建一个TimePicker组件。这里,我们会用到一些前面没有使用过的属性,不过读者别急,后面有表格专门列出其意义。


示例如下:

<TimePicker
    ohos:id="$+id:test_timepicker"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:normal_text_size="25fp"
    ohos:selected_text_size="30fp"
    ohos:mode_24_hour="true"
    ohos:selector_item_num="5"
    ohos:top_line_element="#FF0000"
    ohos:bottom_line_element="#FF0000"
    ohos:wheel_mode_enabled="true"
    ohos:shader_color="#00BFFF"/>
<Text
    ohos:id="$+id:test_test"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text_size="30fp"
    ohos:text_color="#FF0000"
    ohos:layout_alignment="center"/>


这里有很多的属性需要注意,下面博主专门列出了一张表格进行解析。

属性 含义
mode_24_hour 是否显示24小时制
selector_item_num 最大显示数据,表示最多显示5个数据在屏幕,只有滑动才能看到其他数据,但总数只有5个
top_line_element 选择元素的上划线颜色
bottom_line_element 选择元素的下划线颜色
wheel_mode_enabled 是否循环拨动选择时间(比如小时数据滑动到23后,又会从0开始,而不是终结)
shader_color 着色器颜色

接着,我们需要在Java代码中,设置TimePicker组件的初识选中时间为当前时间,同时监听其选中的数据变更时间。

public class MainAbilitySlice extends AbilitySlice{
    private TimePicker timePicker;
    private Text time_text;
    HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.timePicker=(TimePicker)findComponentById(ResourceTable.Id_test_timepicker);
        this.time_text=(Text)findComponentById(ResourceTable.Id_test_test);
        Calendar now = Calendar.getInstance();
        int hour=Integer.valueOf(now.get(Calendar.HOUR_OF_DAY));
        int minute=Integer.valueOf(now.get(Calendar.MINUTE));
        int second=Integer.valueOf(now.get(Calendar.SECOND));
        this.timePicker.setHour(hour);
        this.timePicker.setMinute(minute);
        this.timePicker.setSecond(second);
        this.time_text.setText(String.valueOf(hour)+":"+String.valueOf(minute)+":"+String.valueOf(second));
        this.timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker timePicker, int i, int i1, int i2) {
                time_text.setText(String.format("%02d:%02d:%2d", i, i1, i2));
            }
        });
    }
}


运行之后的效果如下首图所示。


其中属性

非24小时制

在前面的属性中,我们既然能设置24小时制,那么肯定也能选择非24小时制。比如我们在XML布局文件中,添加如下代码:

<TimePicker
    ohos:id="$+id:test_timepicker"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:normal_text_size="25fp"
    ohos:selected_text_size="30fp"
    ohos:selector_item_num="5"
    ohos:mode_24_hour="false"
    ohos:top_line_element="#FF0000"
    ohos:bottom_line_element="#FF0000"
    ohos:wheel_mode_enabled="true"
    ohos:shader_color="#00BFFF"
    ohos:am_pm_order="3"/>


这里,我们把mode_24_hour属性设置为false,同时增加了一个am_pm_order属性。也就是上下午选择。


am_pm_order取值为0或2时,上下午选择在左边;该属性取值为1或者3时,上下午选择在右边。


因为更改为12小时制,所以Java代码也要做略微的更改以替换。示例如下:

public class MainAbilitySlice extends AbilitySlice{
    private TimePicker timePicker;
    private Text time_text;
    HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.timePicker=(TimePicker)findComponentById(ResourceTable.Id_test_timepicker);
        this.time_text=(Text)findComponentById(ResourceTable.Id_test_test);
        Calendar now = Calendar.getInstance();
        int hour=Integer.valueOf(now.get(Calendar.HOUR_OF_DAY));
        int minute=Integer.valueOf(now.get(Calendar.MINUTE));
        int second=Integer.valueOf(now.get(Calendar.SECOND));
        if(hour>12){
            hour=hour-12;
        }
        this.timePicker.setHour(hour);
        this.timePicker.setMinute(minute);
        this.timePicker.setSecond(second);
        this.time_text.setText(String.valueOf(hour)+":"+String.valueOf(minute)+":"+String.valueOf(second));
        this.timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker timePicker, int i, int i1, int i2) {
                if(i>12){
                    i=i-12;
                }
                time_text.setText(String.format("%02d:%02d:%2d", i, i1, i2));
            }
        });
    }
}


运行之后,效果如下:


滚动与隐藏

在有些情况下,比如我们设置一般闹钟的时候,应该没有设置秒吧?都是设置时分就行了。所以,有些情况下我们需要隐藏秒数据。


这个时候,我们可以用到showSecond()函数,示例如下:

this.timePicker.showSecond(false);

这样设置之后,我们就不会有选择秒的选项出现。同样的showHour()与showMinute()可以隐藏小时或者分的选择。


一般情况,Picker衍生的组件都可以通过滑动或者点击选择操作。但如果你觉得需要固定但不必给用户选择的权力,可以将其禁止。示例如下:

this.timePicker.enableHour(false);

比如上面的代码,让小时选择器无法滚动,只能通过点击进行切换。


以上两种代码实现的效果如下所示:



这里,无法选择小时数据,永远固定着。

相关文章
|
12天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
60 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
49 1
|
12天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
43 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
60 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
75 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
71 2
|
12天前
|
IDE 开发工具 数据安全/隐私保护
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
67 0
|
12天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
179 0
|
12天前
|
IDE 开发工具 Windows
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
62 3
|
12天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
32 1