3.11 HarmonyOS Developer TimePicker

Author: Han Ru

Company: Program Ka (Beijing) Technology Co., LTD

Hong Meng Bus columnist

TimePicker allows the user to select a time.

Supported XML attributes

The common XML attribute of TimePicker is inherited from StackLayout

TimePicker’s own XML attributes are shown in the following table:

The attribute name Product description The values The values that Use case
am_pm_order Order in the morning and afternoon 0 Indicates that the AM/PM column is displayed starting from the time picker. ohos:am_pm_order=”0″
1 Indicates that the AM/PM column is displayed at the end of the time selector. ohos:am_pm_order=”1″
2 The AM/PM column is displayed to the left of the time picker. ohos:am_pm_order=”2″
3 The AM/PM column is displayed to the right of the time picker. ohos:am_pm_order=”3″
mode_24_hour Whether 24-hour display Boolean type You can set true/false directly or refer to a Boolean resource. ohos:mode_24_hour=”true”

ohos:mode_24_hour=”$boolean:true”
hour Shows hours The integer types You can set integer values directly or refer to an INTEGER resource. The value of hour must range from 0 to 23. ohos:hour=”23″

ohos:hour=”$integer:hour”
minute minutes The integer types You can set integer values directly or refer to an INTEGER resource. The value of minute ranges from 0 to 59. ohos:minute=”59″

ohos:minute=”$integer:minute”
second According to second The integer types You can set integer values directly or refer to an INTEGER resource. The value of second must range from 0 to 59. ohos:second=”59″

ohos:second=”$integer:second”
normal_text_color Deselect the color of the selected text Color type You can set the color value directly or reference the color resource. ohos:normal_text_color=”#FFFFFFFF”

ohos:normal_text_color=”$color:black”
selected_text_color Select the color of the text Color type You can set the color value directly or reference the color resource. ohos:selected_text_color=”#FF45A5FF”

ohos:selected_text_color=”$color:black”
operated_text_color The text color of the action item Color type You can set the color value directly or reference the color resource. ohos:operated_text_color=”#A8FFFFFF”

ohos:operated_text_color=”$color:black”
normal_text_size Deselect the size of selected text A float A float type representing the size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced. ohos:normal_text_size=”30″

ohos:normal_text_size=”16fp”

ohos:normal_text_size=”$float:size_value”
selected_text_size Select the size of the text A float A float type representing the size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced. ohos:selected_text_size=”30″

ohos:selected_text_size=”16fp”

ohos:selected_text_size=”$float:size_value”
selected_normal_text_margin_ratio Ratio of selected text margins to normal text margins A float Floating-point values can be set directly, or float floating-point resources can be referenced. The value must be greater than 0.0F. The default value is 1.0F. Ohos: selected_normal_text_margin_ratio = “0.5”

ohos:selected_normal_text_margin_ratio=”$float:ratio”
selector_item_num The number of items displayed The integer types You can set integer values directly or refer to an INTEGER resource. ohos:selector_item_num=”3″

ohos:selector_item_num=”$integer:num”
shader_color Shader color Color type You can set the color value directly or reference the color resource. ohos:shader_color=”#A8FFFFFF”ohos:shader_color=”$color:black”
text_am The text in the morning Type string You can set a text string directly, or you can reference a String resource. ohos:text_am=”8:00:00″ohos:text_am=”$string:am”
text_pm The text in the afternoon Type string You can set a text string directly, or you can reference a String resource. ohos:text_pm=”22:00:00″ohos:text_pm=”$string:pm”
top_line_element The top row of the selected item Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:top_line_element=”#FFFFFFFF”

ohos:top_line_element=”
c o l o r : b l a c k ” < b r / > o h o s : t o p l i n e e l e m e n t = ” color:black”<br />ohos:top_line_element=” media:media_src”

ohos:top_line_element=”$graphic:graphic_src”
bottom_line_element The bottom line of the selected item Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:bottom_line_element=”#FFFFFFFF”

ohos:bottom_line_element=”
c o l o r : b l a c k ” < b r / > o h o s : b o t t o m l i n e e l e m e n t = ” color:black”<br />ohos:bottom_line_element=” media:media_src”

ohos:bottom_line_element=”$graphic:graphic_src”
wheel_mode_enabled Select whether the wheel goes around Boolean type You can set true/false directly or refer to a Boolean resource. ohos:wheel_mode_enabled=”false”

ohos:wheel_mode_enabled=”$boolean:false”

Use TimePicker

Create TimePicker

<TimePicker
        ohos:id="$+id:time_picker"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="#22ff0000"
        />
Copy the code

Create a default TimePicker effect

2. Get time

    TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);
    int hour = timePicker.getHour();
    int minute = timePicker.getMinute();
    int second = timePicker.getSecond();
    System.out.println("hour:"+hour+",minute:"+minute+",second:"+second);
Copy the code

Running results:

3. Set the time

  timePicker.setHour(19);
  timePicker.setMinute(18);
  timePicker.setSecond(12);
Copy the code

Set time effect:

4. Response time change events

timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {
                new ToastDialog(getContext())
                        .setText("Time:"+hour+":"+minute+":"+second) .show(); }});Copy the code

Operation effect:

Third, display style configuration

1. Set font properties

Set the color and size of the unselected font:

<TimePicker
    ...
    ohos:normal_text_color="#007DFF"
    ohos:normal_text_size="20fp"
/>
Copy the code

The effect of setting the color and size of an unselected font:

Sets the color and size of the selected font

<TimePicker
    ...
    ohos:selected_text_color="#007DFF"
    ohos:selected_text_size="20fp"
/>
Copy the code

Set the color and size effect of the selected font:

Sets the text color of the action item

<TimePicker
    ...
    ohos:operated_text_color="#FF00FF"
/>
Copy the code

Action Item Text color setting effect

2. Set the ratio of the selected text margin in TimePicker to the normal text margin

<TimePicker
    ...
    ohos:selected_normal_text_margin_ratio="10"
/>
Copy the code

Selected and unselected text spacing effects

3. Set the upper and lower borders for the selected time

<TimePicker
    ...
    ohos:bottom_line_element="#00BFFF"
/>
Copy the code

Sets the upper and lower area separator color effect

4. Set the shader color

<TimePicker
    ...
    ohos:shader_color="#00BFFF"
/>
Copy the code

5. Set the display style under the 12-hour system

AM/PM is placed on the left by default, or on the right if necessary:

<TimePicker
    ...
    ohos:am_pm_order="1"
/>
Copy the code

Sets AM/PM to be displayed on the right

Iv. Range selection Settings

1. Set the hidden or display time

Hide hours of display

timePicker.showHour(false);
Copy the code

Hours do not display effect:

Hide the minutes

timePicker.showMinute(false);
Copy the code

Hidden Minute Effect

Hide the seconds

timePicker.showSecond(false);
Copy the code

Hidden second effect

2. Set whether the selector of TimePicker can slide

When the selector is set, it cannot scroll

timePicker.enableHour(false);
Copy the code

When the selector is small, it can’t scroll to select the effect

Setting minutes selector does not scroll

timePicker.enableMinute(false);
Copy the code

Minute selector fixed unable to select effect

Set the second selector to not scroll

timePicker.enableSecond(false);
Copy the code

The second selector cannot scroll to select the effect

More:

1. Community: Hongmeng Bus www.harmonybus.net/

2. HarmonyBus

3, technical exchange QQ group: 714518656

4. Video courses: www.chengxuka.com