HarmonyOS APP开发入门3——组件（六 时间组件 ）—Clock，TickTimer，TimePicker

文章目录

前言

大家好，本章是鸿蒙开发的重头戏，时间组件

Clock时钟组件

组件说明

是Text的子类，所以可以使用Text的一些属性。

常用属性

**属性名称 **功能说明
time设置开始时间（值为毫秒值）
如果写0，表示从1970年1月1日 0:0:0开始计时如果写0，表示从1970年1月1日 0:0:0开始计时
该属性不写。默认是从当前时间开始计时
time_zoom时区
包括：
GMT（格林威治标准时间）
UTC（世界标准时间）
CST（美国、澳大利亚、古巴或中国的标准时间）
DST（夏令时）
PDT（太平洋夏季时间）
mode_24_hou按照24小时显示的格式。值为指定的格式。
mode_12_hour按照12小时显示的格式。值为指定的格式。

常见方法

方法名功能说明
setTime（long time）传入时间的毫秒值
setTimeZoon（String timeZone）传入时区
set24HourModeEnabled（boolean format24Hour）设置是否按照24小时制进行显示
参数：false：不按24小时 true：按24小时
默认：true

基本用法

xml文件布局

<Clock
	ohos:height="match_content" 
	ohos:width="match_content" 
	ohos:text_size="30fp" />

Java代码

//将字符串表示的时间（2021-01-01 11:11:11）转成毫秒值
public static String dateToTimeStamp(String s) throws ParseException{ 
    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 
	Date date = simpleDateFormat.parse(s); 
	long ts = date.getTime(); 
	String res = String.valueOf(ts); 
	return res; 
}
//将时间的毫秒值转换为时间
public static String timeStampToDate(String s){ 
    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 
	long lt = new Long(s); 
	Date date = new Date(lt); 
	String res = simpleDateFormat.format(date); 
    return res; 
}

使用案例

需求：

通过点击按钮，将时钟组件中的显示方式在24小时制和12小时制之间切换。

业务分析：

页面上有时钟组件和一个按钮组件。时钟组件默认是按照24小时制显示时间。点击按钮可以切换到12小时制显示时间。再次点击按钮可以切换到24小时制显示时间。

xml文件

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
                   xmlns:ohos="http://schemas.huawei.com/res/ohos" 
                   ohos:height="match_parent" 
                   ohos:width="match_parent" 
                   ohos:orientation="vertical"> 
    <Clock
           ohos:id="$+id:clock"
           ohos:time="1861931471" 
           ohos:height="match_content" 
           ohos:width="match_content" 
           ohos:multiple_lines="true" 
           ohos:text_size="35fp" 
           ohos:text_alignment="center" 
           ohos:mode_24_hour="yyyy年MM月dd日 HH:mm:ss" 
           ohos:layout_alignment="center" />
    <Button ohos:id="$+id:but" 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:text="改为12小时制" 
            ohos:text_size="20fp" 
            ohos:background_element="#92D050" 
            ohos:top_margin="30vp" 
            ohos:layout_alignment="center"/> 
</DirectionalLayout>

Java代码

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
    
    Clock clock; 
    Button but; 
    
    @Override
	public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
        //1.找到时钟组件
	clock = (Clock) findComponentById(ResourceTable.Id_clock); 
        //找到按钮组件
	but = (Button) findComponentById(ResourceTable.Id_but); 
        //2.给按钮添加一个单击事件
	but.setClickedListener(this);
    }
    @Override
	public void onActive() { 
        super.onActive(); 
                           }
    @Override
	public void onForeground(Intent intent) { 
        super.onForeground(intent);
        }
    //如果为0，表示24小时制 //如果为1，表示12小时制 int flag = 0; @Override
	public void onClick(Component component) { 
        if(flag == 0){ 
            //表示当前为24小时，改为12小时 //默认是24小时的。 //如果我们要按照12小时进行展示，需要把24小时的展示方式给关闭
			clock.set24HourModeEnabled(false); 
            //3.指定12小时的展示格式
			clock.setFormatIn12HourMode("yyyy年MM月dd日 hh:mm:ss a"); 
            //修改按钮上的文字提示
			but.setText("改为24小时制"); 
            //修改标记 
            flag = 1; 
        }else if(flag == 1){ 
            //当前是12小时制，要改为24小时制
		 	clock.set24HourModeEnabled(true); 
            //修改展示格式
			clock.setFormatIn24HourMode("yyyy年MM月dd日 HH:mm:ss"); 
            //修改按钮上的文字提示
			but.setText("改为12小时制"); 
            //修改标记 
            flag = 0;
        } 
    } 
}
TickTimer定时器组件

组件说明

是Text的子类，所以可以使用Text的一些属性。该组件目前有一些bug。这些bug黑马程序员已经反馈至鸿蒙官方，后续版本中会修复这些bug.

bug 是计时器会在程序启动的时候就开始计时，这个一个来自底层的bug

常见属性

属性名功能说明
forma设置显示的格式
count_downtrue倒着计时
false正着计时

常见方法

方法名方法名 功能说明
start()启动计时器
stop()暂停计时器
setBaseTime(long base)设置基准时间，有bug
setCountDown(boolean countDown)true：倒着计时，false：顺着计时
setFormat(String format)设置显示格式。默认格式为：分钟::秒钟
setTickListener计时监听

基本用法

xml文件

<TickTimer 
           ohos:id="$+id:my_tt" 
           ohos:height="60vp" 
           ohos:width="250vp" 
           ohos:padding="10vp" 
           ohos:text_size="20fp" 
           ohos:text_color="#ffffff" 
           ohos:background_element="#0000ff" 
           ohos:text_alignment="center" 
           ohos:layout_alignment="horizontal_center" 
           ohos:top_margin="50vp" /> 
<!--没有设置时间，默认是从1970年1月1日开始。-->

代码示例

TickTimer tickTimer = (TickTimer)findComponentById(ResourceTable.Id_my_tt); 
//可能有bug，里边的事件，时间戳，绝对时间值，测试都不对 
//没有设置时间，默认是从1970年1月1日开始。 
//设置为0，是从当前时间开始。正数减时间，负数加时间，实际写代码测试一下，是否修改了这个bug
//tickTimer.setBaseTime(时间的毫秒值); 
//设置是正着计时还是倒着计时
//tickTimer.setCountDown(false); 
//设置格式 
tickTimer.setFormat("mm:ss"); 
//对时间进行监听 
tickTimer.setTickListener(监听回调);
//开始计时 
tickTimer.start(); 
//可能有bug，执行后，后台没停止 
tickTimer.stop(); 
//纯Java实现 
//每隔1秒就执行run里面的代码 
//只不过没有页面显示而已。 T
imer timer = new Timer(); 
timer.schedule(new TimerTask() 
               { 
                   @Override
				public void run() { 
                    //...在这里写定时任务
                }); 
			} 
               },0,1000); 
timer.cancel(); //停止计时
TimePicker组件

TimePicker主要供用户选择时间。

支持的XML属性

属性名称中文描述取值取值说明使用案例
am_pm_order在12小时制显示的情况下，控制上午下午排列顺序start表示am/pm列靠时间选择器起始端显示。ohos:mode_24_hour="false"
ohos:am_pm_order="start"
end表示am/pm列靠时间选择器结束端显示。ohos:mode_24_hour="false"
ohos:am_pm_order="end"
left表示am/pm列靠时间选择器左侧显示。ohos:mode_24_hour="false"
ohos:am_pm_order="left"
right表示am/pm列靠时间选择器右侧显示。ohos:mode_24_hour="false"
ohos:am_pm_order="right"
属性名称中文描述取值取值说明使用案例
mode_24_hour是否24小时制显示boolean类型可以直接设置true/false，也可以引用boolean资源。ohos:mode_24_hour=“true"ohos:mode_24_hour=”$boolean:true"
hour显示小时integer类型可以直接设置整型数值，也可以引用integer资源。小时取值范围必须在0~23。ohos:hour=“23"ohos:hour=”$integer:hour"
minute显示分钟integer类型可以直接设置整型数值，也可以引用integer资源。分钟取值范围必须在0~59。ohos:minute=“59"ohos:minute=”$integer:minute"
second显示秒integer类型可以直接设置整型数值，也可以引用integer资源。秒钟取值范围必须在0~59。ohos:second=“59"ohos:second=”$integer:second"
normal_text_color未选中文本的颜色color类型可以直接设置色值，也可以引用color资源。ohos:normal_text_color=“#FFFFFFFF"ohos:normal_text_color=”$color:black"
selected_text_color选中文本的颜色color类型可以直接设置色值，也可以引用color资源。ohos:selected_text_color=“#FF45A5FF"ohos:selected_text_color=”$color:black"
operated_text_color操作项的文本颜色color类型可以直接设置色值，也可以引用color资源。ohos:operated_text_color=“#A8FFFFFF"ohos:operated_text_color=”$color:black"
normal_text_size未选中文本的大小float类型表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。ohos:normal_text_size=“30"ohos:normal_text_size=“16fp"ohos:normal_text_size=”$float:size_value”
selected_text_size选中文本的大小float类型表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。ohos:selected_text_size=“30"ohos:selected_text_size=“16fp"ohos:selected_text_size=”$float:size_value”
selected_normal_text_margin_ratio已选文本边距与常规文本边距的比例float类型可以直接设置浮点数值，也可以引用float资源。取值需>0.0f，默认值为1.0f。ohos:selected_normal_text_margin_ratio=“0.5"ohos:selected_normal_text_margin_ratio=”$float:ratio"
selector_item_num显示的项目数量integer类型可以直接设置整型数值，也可以引用integer资源。ohos:selector_item_num=“3"ohos:selector_item_num=”$integer:num"
shader_color着色器颜色color类型可以直接设置色值，也可以引用color资源。ohos:shader_color=“#A8FFFFFF"ohos:shader_color=”$color:black"
text_am上午文本string类型可以直接设置文本字串，也可以引用string资源（推荐使用）。ohos:text_am=“8:00:00"ohos:text_am=”$string:am"
text_pm下午文本string类型可以直接设置文本字串，也可以引用string资源（推荐使用）。ohos:text_pm=“22:00:00"ohos:text_pm=”$string:pm"
top_line_element选中项的顶行Element类型可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。ohos:top_line_element=“#FFFFFFFF"ohos:top_line_element=“ c o l o r : b l a c k " o h o s : t o p l i n e e l e m e n t = " color:black"ohos:top_line_element=" color:black"ohos:topl​inee​lement="media:media_src"ohos:top_line_element=”$graphic:graphic_src”
bottom_line_element选中项的底线Element类型可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。ohos:bottom_line_element=“#FFFFFFFF"ohos:bottom_line_element=“ c o l o r : b l a c k " o h o s : b o t t o m l i n e e l e m e n t = " color:black"ohos:bottom_line_element=" color:black"ohos:bottoml​inee​lement="media:media_src"ohos:bottom_line_element=”$graphic:graphic_src”
wheel_mode_enabled选择轮是否循环显示数据boolean类型可以直接设置true/false，也可以引用boolean资源。ohos:wheel_mode_enabled=“false"ohos:wheel_mode_enabled=”$boolean:false"

使用TimePicker

创建TimePicker

<TimePicker
    ohos:id="$+id:time_picker"
    ohos:height="match_content"
    ohos:width="match_parent" />

在这里插入图片描述

获取时间

TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);
int hour = timePicker.getHour();
int minute = timePicker.getMinute();
int second = timePicker.getSecond();

设置时间

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

响应时间改变事件

timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {
    @Override
    public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {
        ...
    }
});

显示样式配置

<!--设置未选中字体的颜色和大小-->
<TimePicker
    ...
    ohos:normal_text_color="#007DFF"
    ohos:normal_text_size="20fp"
/>
<!--设置选中字体的颜色和大小-->
<TimePicker
    ...
    ohos:selected_text_color="#007DFF"
    ohos:selected_text_size="20fp"
/>
<!--设置操作项文本颜色-->
<TimePicker
    ...
    ohos:operated_text_color="#FF9912"
/>

<!--设置TimePicker中已选文本边距与常规文本边距的比例-->
<TimePicker
    ...
    ohos:selected_normal_text_margin_ratio="10"
/>
<!--设置着色器颜色-->
<TimePicker
    ...
    ohos:shader_color="#00BFFF"
/>
<!--设置选中时间的上下边框-->
<TimePicker
    ...
    ohos:bottom_line_element="#00BFFF"
/>
<!--设置12小时制下显示样式-->
<TimePicker
    ...
    ohos:mode_24_hour="false"
    ohos:am_pm_order="right"
/>
# harmonyos # java # 鸿蒙系统 # intellij-idea
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

openEuler系统通过shell脚本安装openGauss 5.0.0企业版

avatar 华为云开发者联盟
cover

一文了解npm install -g和npm install --save-dev的关系

avatar 华为云开发者联盟
cover

【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（2）

avatar 华为云开发者联盟