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">     <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;  @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里面的代码 //只不过没有页面显示而已。 Timer timer = new Timer(); timer.schedule(new TimerTask()  {      @Overridepublic void run() {//...在这里写定时任务  }); }  },0,1000); timer.cancel(); //停止计时

TimePicker组件

TimePicker主要供用户选择时间。

支持的XML属性

使用TimePicker

创建TimePicker

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BwDF0qrD-1649743901772)(G:\笔记\img\51.gif)]

获取时间

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