3.11 HarmonyOS Developer TimePicker

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:

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