返回发烧友论坛
发 帖  

[文章]HarmonyOS实战——TickTimer定时器组件基本使用

兮动人
2021-09-13 11:23:59
阅读量0
HarmonyOS鸿蒙系统鸿蒙OS
0
1
1. TickTimer定时器组件说明：
  • 是Text的子类，所以可以使用Text的一些属性
  • 该组件目前有一些bug，后续版本中会修复这些bug的
常见属性：
属性名功能说明
format设置显示的格式
count_downtrue倒着计时，false正着计时
常见方法：
基本用法：
  • xml文件：
  1. <TickTimer
  2.         ohos:id="$+id:my_tt"
  3.         ohos:height="60vp"
  4.         ohos:width="250vp"
  5.         ohos:padding="10vp"
  6.         ohos:text_size="20fp"
  7.         ohos:text_color="#ffffff"
  8.         ohos:background_element="#0000ff"
  9.         ohos:text_alignment="center"
  10.         ohos:layout_alignment="horizontal_center"
  11.         ohos:top_margin="50vp" />
  12.         //没有设置时间，默认是从1970年1月1日开始。
复制代码

  • mm:ss 分别表示分钟和秒钟

2. 实现案例——计时器
  • 统计一段时间之类做了多少事情，这个时候就需要计时器了
  • 在定时器下面分别添加开始和结束计时的两个按钮
  • 新建项目：TickTimerApplication

ability_main
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">

  9.     <TickTimer
  10.         ohos:id="$+id:ticktimer"
  11.         ohos:height="match_content"
  12.         ohos:width="match_content"
  13.         ohos:text_size="30fp"
  14.         ohos:text_color="#FFFFFF"
  15.         ohos:background_element="#0000FF"
  16.         ohos:text_alignment="center"
  17.         ohos:layout_alignment="center"
  18.         />

  20.     <Button
  21.         ohos:id="$+id:start"
  22.         ohos:height="match_content"
  23.         ohos:width="match_content"
  24.         ohos:text="开始"
  25.         ohos:text_size="30fp"
  26.         ohos:text_color="#FFFFFF"
  27.         ohos:background_element="#666600"
  28.         ohos:text_alignment="center"
  29.         ohos:layout_alignment="center"
  30.         ohos:top_margin="30vp"
  31.         />

  33.     <Button
  34.         ohos:id="$+id:end"
  35.         ohos:height="match_content"
  36.         ohos:width="match_content"
  37.         ohos:text="结束"
  38.         ohos:text_size="30fp"
  39.         ohos:text_color="#FFFFFF"
  40.         ohos:background_element="#666600"
  41.         ohos:text_alignment="center"
  42.         ohos:layout_alignment="center"
  43.         ohos:top_margin="30vp"
  44.         />

  46. </DirectionalLayout>
复制代码

  • ohos:text_alignment="center"：表示的是文本相对于组件是居中的
  • ohos:layout_alignment="center"：表示的是TickTimer组件在布局里面是居中的
MainAbilitySlice
  1. package com.xdr630.ticktimerapplication.slice;

  3. import com.xdr630.ticktimerapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8. import ohos.agp.components.TickTimer;

  10. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {

  12.     TickTimer tickTimer;
  13.     Button start;
  14.     Button end;

  16.     @Override
  17.     public void onStart(Intent intent) {
  18.         super.onStart(intent);
  19.         super.setUIContent(ResourceTable.Layout_ability_main);

  21.         //1.找到定时器组件
  22.         tickTimer = (TickTimer) findComponentById(ResourceTable.Id_ticktimer);
  23.         //找到开始和结束两个按钮组件
  24.         start = (Button) findComponentById(ResourceTable.Id_start);
  25.         end = (Button) findComponentById(ResourceTable.Id_end);

  27.         //2.给开始和结束按钮绑定单击事件
  28.         start.setClickedListener(this);
  29.         end.setClickedListener(this);

  31.         //3.给定时器做一些基本设置
  32.         //false：正向计时 0 1 2 3 4 ...
  33.         //true：反向计时 10 9 8 7 6 ...
  34.         tickTimer.setCountDown(false);

  36.         //设置一下计时的格式
  37.         tickTimer.setFormat("mm:ss ");
  38.     }

  40.     @Override
  41.     public void onActive() {
  42.         super.onActive();
  43.     }

  45.     @Override
  46.     public void onForeground(Intent intent) {
  47.         super.onForeground(intent);
  48.     }

  50.     @Override
  51.     //参数表示点击的按钮对象
  52.     public void onClick(Component component) {
  53.         if (component == start){
  54.             //开启定时
  55.             tickTimer.start();
  56.         }else if (component == end){
  57.             //结束计时
  58.             tickTimer.stop();
  59.         }
  60.     }
  61. }
复制代码

  • 运行：

  • 点击“开始”按钮

  • 点击“结束”按钮后就停止计时了

3. TickTimer组件——bug汇总：
  • 不要用 setBaseTimer 去设置基准时间
  • 停止之后不用重新开始
  • 如果没有设置基准时间，把时间格式设置如下，就会看到是从什么时候开始计时的了
  • 运行，发现是从时间原点开始
  • 所以，如果没有设置基准时间，默认是从时间原点开始计时的
  • 如果设置了基准时间，参数为 0
  • 运行：
  • 点击“开始”按钮后，瞬间变成了当前的时间开始计时
  • 所以，如果设置了基准时间，参数为 0，是从当前时间开始计时的
  • 如果设置了基准时间，参数为非 0 ，具体数值：3600*1000（表示一小时的毫秒值）
  • 运行，点击“开始”按钮后，并没有对当前时间做一个增加，反而对当前时间做一个减少
  • 所以，如果设置了基准时间，参数为非 0，也是从当前时间开始计时的，并且还会减少对应增加的时间，说明有 bug
总结：
  • 如果没有设置基准时间，默认是从时间原点开始计时的
  • 如果设置基准时间，参数为0，是从当前时间开始计时的
  • 如果设置基准时间，参数为非0，也是从当前时间开始计时的
  • 所以，tickTimer.setBaseTime(); 这个方法是有 bug 的，暂时不要用这个方法，相信以后HarmonyOS在更新的时候会修复这个 bug
  • 还有一个 bug，把时间格式设置为分秒计时
  • 运行后，它不是从 0 秒开始计时的，而是从运行开始项目后就开始了，当你点击“开始”按钮后，就会发现已经开始计时了，按下结束再开始，也不是从刚刚暂停的时间再开始计时的，而是一直往后面计时
  • 虽然点击了结束，在这个APP界面当中时间不再跳动，但是在系统的底层，时间并没有停止

建议：
  • 该组件目前还是有 bug 的
  • 计时器一旦点击结束之后，就不要重新开始再计时了，也就是说每个计时器只用一次就行了
4. TickTimer定时器案例——统计10秒内按钮点击的次数
  • 使用定时器统计10秒之内按了多少次?
需求：
  • 最上面是TickTimer定时器，中间的是文本显示次数，下面是“开始计时”按钮，当点击了这个按钮之后，按钮上面的文字就会变成“请疯狂点我”，然后就不断的点击这个按钮，点击一次，上面显示的文本就会增加一次计数，此时，定时器也会不断走动的状态，当到达10秒钟之后，“请疯狂点我”按钮里面的文字就会显示“游戏结束了”，中间的按钮就会展示我在 10秒之内一共点击了多少按钮次数

  • 新建项目：TickTimerPracticeApplication

ability_main
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">

  9.     <TickTimer
  10.         ohos:id="$+id:ticktimer"
  11.         ohos:height="match_content"
  12.         ohos:width="match_content"
  13.         ohos:text_size="30fp"
  14.         ohos:text_color="#FFFFFF"
  15.         ohos:background_element="#0000FF"
  16.         ohos:text_alignment="center"
  17.         ohos:layout_alignment="center"
  18.         />

  20.     <Text
  21.         ohos:id="$+id:count"
  22.         ohos:height="match_content"
  23.         ohos:width="match_content"
  24.         ohos:top_margin="10vp"
  25.         ohos:text="0次"
  26.         ohos:text_size="30fp"
  27.         />

  29.     <Button
  30.         ohos:id="$+id:but"
  31.         ohos:height="match_content"
  32.         ohos:width="match_content"
  33.         ohos:top_margin="10vp"
  34.         ohos:text_size="30fp"
  35.         ohos:text="开始计时"
  36.         ohos:background_element="#FF0000"
  37.         />



  41. </DirectionalLayout>
复制代码

  • 定时器的格式：00:01 ，可以用 ticktimer.setText(); 获取到定时器现在的时间，不过现在是字符串的表示，如：“00:01”，所以还需要把它变为毫秒值
  • 添加一个方法进行转换

MainAbilitySlice
  1. package com.xdr630.ticktimerpracticeapplication.slice;

  3. import com.xdr630.ticktimerpracticeapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8. import ohos.agp.components.Text;
  9. import ohos.agp.components.TickTimer;

  11. import java.text.ParseException;
  12. import java.text.SimpleDateFormat;
  13. import java.util.Date;

  15. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener, TickTimer.TickListener {

  17.         TickTimer ticktimer;
  18.         Text text;
  19.         Button but;

  21.     @Override
  22.     public void onStart(Intent intent) {
  23.         super.onStart(intent);
  24.         super.setUIContent(ResourceTable.Layout_ability_main);

  26.         //1.找到三个组件对象
  27.         ticktimer = (TickTimer) findComponentById(ResourceTable.Id_ticktimer);
  28.         text = (Text) findComponentById(ResourceTable.Id_count);
  29.         but = (Button) findComponentById(ResourceTable.Id_but);

  31.         //2.给按钮绑定单击事件
  32.         but.setClickedListener(this);

  34.         //3.给定时器做一些基本设置
  35.         //false：正向计时 1 2 3 4 ...
  36.         //true：反向计时 10 9 8 7 ...
  37.         ticktimer.setCountDown(false);

  39.         //设置计时格式
  40.         ticktimer.setFormat("mm:ss");

  42.         //4.给定时器绑定定时事件
  43.         ticktimer.setTickListener(this);
  44.     }

  46.     @Override
  47.     public void onActive() {
  48.         super.onActive();
  49.     }

  51.     @Override
  52.     public void onForeground(Intent intent) {
  53.         super.onForeground(intent);
  54.     }


  57.     //判断是否是第一次被点击
  58.     //true：表示第一次被点击
  59.     //false，表示不是第一次被点击
  60.     boolean first = true;

  62.     //定义一个变量用了统计点击的次数
  63.     int count = 0;

  65.     //记录游戏开始的时间
  66.     long startTime = 0;

  68.     @Override
  69.     public void onClick(Component component) {
  70.         //当该方法被调用，证明按钮被点击了一次
  71.         count++;

  73.         //判断当前是否是第一次被点击
  74.         if (first){
  75.             //第一次点击了
  76.             //记录游戏开始的时间
  77.             //要获取定时器现在的时间
  78.             //ticktimer.getText();//”00:01“
  79.             startTime = StringToLong(ticktimer.getText());
  80.             //修改按钮里面的文本内容
  81.             but.setText("请疯狂点我");
  82.             //修改标记
  83.             first = false;
  84.             //开启定时器
  85.             ticktimer.start();
  86.         }
  87.         //如果不是第一次点击
  88.         //那么就不需要做上面的事情，直接修改文本的内容就可以了
  89.         text.setText(count + "次");
  90.     }

  92.     //当定时器开始计时的时候，就会不断去调用onTickTimerUpdate这个方法
  93.     //tickTimer表示计时器的对象
  94.     @Override
  95.     public void onTickTimerUpdate(TickTimer tickTimer) {
  96.         //1.获取当前定时器的时间，并把时间变为毫秒值
  97.         long nowTime = StringToLong(tickTimer.getText());
  98.         //2.判断nowTime跟startTime之间的差有没有超过10秒
  99.         if ((nowTime - startTime) >= 10000){
  100.             tickTimer.stop();
  101.             text.setText("最终成绩为：" + count + "次");
  102.             but.setText("游戏结束了");
  103.             //取消按钮的点击事件
  104.             but.setClickable(false);
  105.         }
  106.     }

  108.     //作用：把字符串类型的时间变成毫秒值(long)
  109.     public long StringToLong(String time) {
  110.         SimpleDateFormat sdf = new SimpleDateFormat("mm:ss");
  111.         Date  date = null;
  112.         try {
  113.             date = sdf.parse(time);
  114.         } catch (ParseException e) {
  115.             e.printStackTrace();
  116.         }
  117.         long result = date.getTime();
  118.         return result;
  119.     }
  120. }

复制代码


  • 运行：


举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友