3.11 [HarmonyOS Hongmeng Development] Component TimePicker

3.11 [HarmonyOS Hongmeng Development] Component TimePicker

3.11 [HarmonyOS Hongmeng Development] Component TimePicker

Author: Han Ru

Company: Program Cafe (Beijing) Technology Co., Ltd.

Hongmeng Bus Columnist

TimePicker is mainly for users to choose the time.

1. Supported XML attributes

The common XML attributes of TimePicker are inherited from: StackLayout

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

Attribute nameChinese descriptionValueValue descriptionUse Cases
am_pm_orderMorning and afternoon order0Indicates that the am/pm column is displayed at the beginning of the time selector.ohos:am_pm_order="0"
1Indicates that the am/pm column is displayed at the end of the time selector.ohos:am_pm_order="1"
2Indicates that the am/pm column is displayed on the left side of the time selector.ohos:am_pm_order="2"
3Indicates that the am/pm column is displayed on the right side of the time selector.ohos:am_pm_order="3"
mode_24_hourWhether to display in 24-hour formatboolean typeYou can set true/false directly, or you can reference boolean resources.ohos:mode_24_hour="true"
ohos:mode_24_hour="$boolean:true"
hourDisplay hourinteger typeYou can set integer values directly, or you can reference integer resources. The hour value range must be 0~23.ohos:hour="23"
ohos:hour="$integer:hour"
minuteShow minutesinteger typeYou can set integer values directly, or you can reference integer resources. The range of minutes must be 0~59.ohos:minute="59"
ohos:minute="$integer:minute"
secondDisplay secondsinteger typeYou can set integer values directly, or you can reference integer resources. The range of seconds must be 0~59.ohos:second="59"
ohos:second="$integer:second"
normal_text_colorUncheck the color of the textcolor typeYou can set the color value directly or reference the color resource.ohos:normal_text_color="#FFFFFFFF"
ohos:normal_text_color="$color:black"
selected_text_colorThe color of the selected textcolor typeYou can set the color value directly or reference the color resource.ohos:selected_text_color="#FF45A5FF"
ohos:selected_text_color="$color:black"
operated_text_colorThe text color of the action itemcolor typeYou can set the color value directly or reference the color resource.ohos:operated_text_color="#A8FFFFFF"
ohos:operated_text_color="$color:black"
normal_text_sizeUncheck the size of the textfloat typeThe float type representing the size. It can be a floating-point value, and its default unit is px; it can also be a floating-point value with px/vp/fp units; it can also refer to float resources.ohos:normal_text_size="30"
ohos:normal_text_size="16fp"
ohos:normal_text_size="$float:size_value"
selected_text_sizeThe size of the selected textfloat typeThe float type representing the size. It can be a floating-point value, and its default unit is px; it can also be a floating-point value with px/vp/fp units; it can also refer to float resources.ohos:selected_text_size="30"
ohos:selected_text_size="16fp"
ohos:selected_text_size="$float:size_value"
selected_normal_text_margin_ratioThe ratio of the selected text margin to the normal text marginfloat typeYou can set the floating-point value directly, or you can reference the float floating-point number resource. The value needs to be >0.0f, and the default value is 1.0f.ohos:selected_normal_text_margin_ratio="0.5"
ohos:selected_normal_text_margin_ratio="$float:ratio"
selector_item_numNumber of items displayedinteger typeYou can set integer values directly, or you can reference integer resources.ohos:selector_item_num="3"
ohos:selector_item_num="$integer:num"
shader_colorShader colorcolor typeYou can set the color value directly or reference the color resource.ohos:shader_color="#A8FFFFFF"ohos:shader_color="$color:black"
text_amMorning textstring typeYou can set the text string directly or reference the string resource.ohos:text_am="8:00:00"ohos:text_am="$string:am"
text_pmAfternoon textstring typeYou can set the text string directly or reference the string resource.ohos:text_pm="22:00:00"ohos:text_pm="$string:pm"
top_line_elementTop row of selected itemElement typeThe color value can be configured directly, or the color resource or the image resource under media/graphic can be referenced.ohos:top_line_element="#FFFFFFFF"
ohos:top_line_element="color:black"<br/>ohos:toplineelement="color:black"<br/>ohos:top_line_element=" media:media_src"
ohos:top_line_element="$graphic:graphic_src"
bottom_line_elementThe bottom line of the selected itemElement typeThe color value can be configured directly, or the color resource or the image resource under media/graphic can be referenced.ohos:bottom_line_element="#FFFFFFFF"
ohos:bottom_line_element="color:black"<br/>ohos:bottomlineelement="color:black"<br/>ohos:bottom_line_element=" media:media_src"
ohos:bottom_line_element="$graphic:graphic_src"
wheel_mode_enabledChoose whether the wheel detoursboolean typeYou can set true/false directly, or you can reference boolean resources.ohos:wheel_mode_enabled="false"
ohos:wheel_mode_enabled="$boolean:false"

2. use TimePicker

1. Create TimePicker

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

Create a default TimePicker effect

2. Get the 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 code

operation result:

3. Set the time

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

Set time effect:

4. Response time to 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 code

running result:

3. 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 code

Set the effect of the color and size of the unselected font:

Set the color and size of the selected font

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

Set the color and size effect of the selected font:

Set the text color of the action item

<TimePicker ... ohos:operated_text_color= "#FF00FF" /> Copy 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 code

Selected and unselected text spacing effect

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

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

Set the color effect of the upper and lower area dividing lines

4. Set the shader color

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

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

AM/PM is placed on the left by default, if it is needed on the right:

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

Set the effect of AM/PM displayed on the right

4. range selection settings

1. Set to hide or show hours, minutes and seconds

Hide the display of hours

timePicker.showHour( false ); Copy code

No effect in hours:

Hide minutes

timePicker.showMinute( false ); Copy code

Hide minute effect

Hidden seconds

timePicker.showSecond( false ); Copy code

Hide second effect

2. Set whether the selector of TimePicker can slide

The hour selector cannot be scrolled to select

timePicker.enableHour( false ); Copy code

Hour selector cannot scroll selection effect

Set the minute selector cannot scroll

timePicker.enableMinute( false ); Copy code

Minute selector fixed cannot select effect

Set the second selector cannot scroll

timePicker.enableSecond( false ); Copy code

2.selector cannot scroll selection effect

more content:

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

2. Official account: HarmonyBus

3. Technical exchange QQ group: 714518656

4. Video lesson: www.chengxuka.com