1. TickTimer Timer components:

  • Is a subclass of Text, so you can use some of the properties of Text
  • This component currently has some bugs, which will be fixed in a future release

Common attributes:

The property name Functional specifications
format Set the display format
count_down True times backwards, false times forwards

Common methods:Basic usage:

  1. The XML file:
<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" />// No time is set. The default date is January 1, 1970.Copy the code
  • mm:ssMinutes and seconds, respectively

2. Implementation case — Timers

  • Counting how much you’ve done over a period of time, that’s where a timer comes in
  • Add two buttons to start and end the timer respectively

  • New project:TickTimerApplication

ability_main


      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <TickTimer
        ohos:id="$+id:ticktimer"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#0000FF"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        />

    <Button
        ohos:id="$+id:start"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Start"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="# 666600"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:top_margin="30vp"
        />

    <Button
        ohos:id="$+id:end"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="The end"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="# 666600"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:top_margin="30vp"
        />

</DirectionalLayout>
Copy the code
  • ohos:text_alignment="center": indicates that the text is centered relative to the component
  • ohos:layout_alignment="center": indicates thatTickTimerComponents are central in the layout

MainAbilitySlice

package com.xdr630.ticktimerapplication.slice;

import com.xdr630.ticktimerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TickTimer;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {

    TickTimer tickTimer;
    Button start;
    Button end;

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

        //1. Find the timer component
        tickTimer = (TickTimer) findComponentById(ResourceTable.Id_ticktimer);
        // Find the start and end button components
        start = (Button) findComponentById(ResourceTable.Id_start);
        end = (Button) findComponentById(ResourceTable.Id_end);

        //2. Bind the click events to the start and end buttons
        start.setClickedListener(this);
        end.setClickedListener(this);

        //3. Perform some basic Settings for the timer
        //false: forward timing 0 1 2 3 4...
        //true: reverse timing 10 9 8 7 6...
        tickTimer.setCountDown(false);

        // Set the timing format
        tickTimer.setFormat("mm:ss ");
    }

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    // The argument represents the button object to click
    public void onClick(Component component) {
        if (component == start){
            // Enable the timer
            tickTimer.start();
        }else if (component == end){
            // End the timertickTimer.stop(); }}}Copy the code
  • Run:

  • Click the “Start” button

  • Click the “End” button to stop the timer

3. TickTimer component — Bug summary:

  1. Don’t usesetBaseTimerTo set the baseline time
  2. You don’t have to start again after you stop
  • If the base time is not set, set the time format as follows, and you will see when the time starts

  • Run and find that it starts at the time origin

  • So, if the base time is not set, the timing starts from the time origin by default
  • If the baseline time is set, the parameter is 0

  • Run:

  • After clicking the “Start” button, it instantly changes to the current time to start timing

  • So, if the base time is set, the argument is 0 and the timing starts from the current time
  • If the baseline time is set, the parameter is non-0, and the specific value is:3600 * 1000(represents the value of milliseconds in one hour)

  • Run, click the “Start” button, and instead of making an increase to the current time, make a decrease to the current time

  • Therefore, if the baseline time is set and the parameter is non-0, the timing starts from the current time and the corresponding increased time will be reduced, indicating a bug

Conclusion:

  • If the baseline time is not set, the timing starts from the time origin by default

  • If the baseline time is set, the parameter is 0 and the time starts from the current time

  • If the baseline time is set, the parameter is non-0 and also starts from the current time

  • So, tickTimer setBaseTime (); This method is buggy, do not use this method for the time being, we believe that HarmonyOS will fix this bug in the future update

  • There is also a bug that sets the time format to minute-second timing

  • After running, it is not from0When you click the “Start” button, you will find that the time has started. Press the end to start again, not from the time just paused to start the time, but from the back

  • Although click “End”, time no longer beats in the APP interface, but at the bottom of the system, time does not stop

Advice:

  1. This component is currently buggy
  2. Once the timer is finished, do not restart the timer, that is, use each timer only once

4. TickTimer Timer case: Counts the number of button clicks within 10 seconds

  • Use timer to count how many times you press the button in 10 seconds?

Requirements:

  • At the top is theTickTimerTimer, the middle is the number of times the text is displayed, and the following is”Start the time“Button. When the button is clicked, the text on the button becomes”Please be crazy about me“, and then constantly click this button, click once, the text displayed above will increase a count, at this time, the timer will also constantly walking state, when arrived10Seconds later,”Please be crazy about meThe text inside the button will sayGame over“And the button in the middle will show you where I am10How many button clicks per second

  • New project:TickTimerPracticeApplication

ability_main


      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <TickTimer
        ohos:id="$+id:ticktimer"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#0000FF"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        />

    <Text
        ohos:id="$+id:count"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="10vp"
        ohos:text="Zero"
        ohos:text_size="30fp"
        />

    <Button
        ohos:id="$+id:but"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="10vp"
        ohos:text_size="30fp"
        ohos:text="Start the clock."
        ohos:background_element="#FF0000"
        />



</DirectionalLayout>
Copy the code
  • Timer format:00:01onsaturday (UK time), you can useticktimer.setText();Gets the current time of the timer, but now as a string representation, such as:00:01onsaturday (UK time)“, so you also need to change it to a millisecond value
  • Add a method to transform

MainAbilitySlice

package com.xdr630.ticktimerpracticeapplication.slice;

import com.xdr630.ticktimerpracticeapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.agp.components.TickTimer;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

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

        TickTimer ticktimer;
        Text text;
        Button but;

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

        //1. Find three component objects
        ticktimer = (TickTimer) findComponentById(ResourceTable.Id_ticktimer);
        text = (Text) findComponentById(ResourceTable.Id_count);
        but = (Button) findComponentById(ResourceTable.Id_but);

        //2. Bind the click event to the button
        but.setClickedListener(this);

        //3. Perform some basic Settings for the timer
        //false: forward timing 1 2 3 4...
        //true: reverse timing 10 9 8 7...
        ticktimer.setCountDown(false);

        // Set the timing format
        ticktimer.setFormat("mm:ss");

        //4. Bind scheduled events to the timer
        ticktimer.setTickListener(this);
    }

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }


    // Check if it is the first click
    //true: indicates the first click
    //false, not the first click
    boolean first = true;

    // Define a variable by counting the number of clicks
    int count = 0;

    // Record the start time of the game
    long startTime = 0;

    @Override
    public void onClick(Component component) {
        // When this method is called, the button is clicked once
        count++;

        // Check whether the current is the first click
        if (first){
            // First click
            // Record the start time of the game
            // To get the current timer time
            //ticktimer.getText(); / / "00:01onsaturday (UK time)"
            startTime = StringToLong(ticktimer.getText());
            // Modify the text content inside the button
            but.setText("Please be crazy about me.");
            // Modify the tag
            first = false;
            // Start the timer
            ticktimer.start();
        }
        // If not the first click
        // Then you don't need to do the above things, just modify the content of the text
        text.setText(count + "Time");
    }

    // The onTickTimerUpdate method is constantly called when the timer starts
    //tickTimer represents the timer object
    @Override
    public void onTickTimerUpdate(TickTimer tickTimer) {
        //1. Obtain the time of the current timer and change it to ms
        long nowTime = StringToLong(tickTimer.getText());
        //2. Check whether the difference between nowTime and startTime is more than 10 seconds
        if ((nowTime - startTime) >= 10000){
            tickTimer.stop();
            text.setText("The final grade is:" + count + "Time");
            but.setText("Game over.");
            // Cancel the button click event
            but.setClickable(false); }}// Change the time of the string type to a millisecond value (long)
    public long StringToLong(String time) {
        SimpleDateFormat sdf = new SimpleDateFormat("mm:ss");
        Date  date = null;
        try {
            date = sdf.parse(time);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        long result = date.getTime();
        returnresult; }}Copy the code
  • Run: