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

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

文章目录

• HarmonyOS APP开发入门3——组件（六 时间组件 ）---Clock，TickTimer，TimePicker
• • 前言
  • • • Clock时钟组件
      • TickTimer定时器组件
      • TimePicker组件

前言

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

Clock时钟组件

组件说明

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

常用属性

常见方法

基本用法

xml文件布局

<Clockohos: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文件

 
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <Clockohos: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; @Overridepublic 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);}@Overridepublic void onActive() { super.onActive(); }@Overridepublic void onForeground(Intent intent) { super.onForeground(intent);}//如果为0，表示24小时制 //如果为1，表示12小时制 int flag = 0; @Overridepublic 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

常见属性

常见方法

基本用法

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" /> 

代码示例

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() { @Overridepublic void run() { //...在这里写定时任务}); } },0,1000); 
timer.cancel(); //停止计时

TimePicker组件

TimePicker主要供用户选择时间。

支持的XML属性

使用TimePicker

创建TimePicker

<TimePickerohos: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() {@Overridepublic 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...ohos:selected_normal_text_margin_ratio="10"
/>

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

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

<TimePicker...ohos:mode_24_hour="false"ohos:am_pm_order="right"
/>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！