鸿蒙App开发---TimePicker组件

Posted 2021-06-28 一天一篇Python库

目录

• TimePicker组件
• • 创建TimePicker组件
  • 其中属性
  • • 非24小时制
    • 滚动与隐藏

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);

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

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

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