1. Clock Basic use of the Clock component

Component description: Text subclass, so you can use some properties of Text.
Common attributes:

Common methods:

Basic usage:

XML file layout:

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

The default is to use the current time as a presentation, and time is constantly moving

ohos:time_zone="GMT"Is the default
24-hour format

	<Clock
		ohos:height="match_content"
		ohos:width="match_content"
		ohos:time_zone="GMT"
		ohos:mode_24_hour="Yyyy yyyy MM dd day HH: MM :ss"
		ohos:text_size="30fp"
	/>
Copy the code

12 hours format, the Clock component is set to 24 hours by default, so turn off the default 24 hours and use the following 12 hours display
aIt’s morning or afternoon

	<Clock
		ohos:height="match_content"
		ohos:width="match_content"
		ohos:time_zone="GMT"
		ohos:mode_24_hour="false"
		ohos:mode_12_hour="Yyyy: MM: SS A"
		ohos:text_size="30fp"   
	/>
Copy the code

After running, a bug appears

Because the Clock component is just launched by Huawei, if you use XML to directly specify its attributes, there will be some small bugs, but 24 hours is no problem. If you use attributes to specify the 12-hour calculation method, the above bugs will appear. The following can be used in the form of Java code to achieve 12-hour display.

Java code implementation:

To implement the 12-hour system,aIt’s morning or afternoon

ability_main

MainAbilitySlice

	//1. Find the clock component
	Clock clock = (Clock) findComponentById(ResourceTable.Id_clock);
	
	//2. Modify the expansion mode of the clock component
	// The default is 24 hours
	// If you want to display for 12 hours, you need to turn off the 24 hours display first
	clock.set24HourModeEnabled(false);
	
	//3. Specify a 12-hour display format
	clock.setFormatIn12HourMode("Yyyy: MM: SS A");
Copy the code

Run:

No problems were found

The Clock case — switching between 24 and 12 hours

Click the button and the 24 hour time will change to 12 hours. Click again and the display format will change to 24 hours

Requirements:

Switch the display mode in the clock module between 24 hours and 12 hours by clicking the button

Business analysis:

The page has a clock component and a button component
By default, the clock component displays the time in the 24-hour system
Click the button to switch to 12-hour display time
Click the button again to switch to 24-hour display time

Layout analysis:

Layout text is quite large, so you can use the newline property:ohos:multiple_lines="true"This property is also a property of the Text component. The Clock component is a subclass of the Text component, so you can use it directly

ability_main


      
<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:height="match_content"
        ohos:width="match_content"
        ohos:multiple_lines="true"
        ohos:text_size="35fp"
        ohos:text_alignment="center"
        ohos:mode_24_hour="Yyyy yyyy MM dd day HH: MM :ss"
        ohos:layout_alignment="center"
        />

    <Button
        ohos:id="$+id:but"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Switch to a 12-hour schedule."
        ohos:text_size="40fp"
        ohos:background_element="#92D050"
        ohos:top_margin="30vp"
        ohos:layout_alignment="center"
        />

</DirectionalLayout>
Copy the code

When you click the button, the text content in the button will also change accordingly. After you click the button, the time system above and the text in the button are opposite. For example, the default time system is 24 hours, and the text content in the button is “change to 12 hours”. When the time is changed to 12 hours, the text inside the button will say “change to 24 hours.”
It’s like switching back and forth between 24 hours and 12 hours
Because the clock object is used in your code, you need to put it in a member position
The 12-hour code shown in the Java implementation above can be reused

Run:

After clicking the button:

Another problem: when you click the button again, the 12-hour schedule changes back to 24 hours, and the message in the button changes to “Change to 24 teams.”
inonClickMethods are evaluated in two ways, with a tag outside the method that the type can be usedbooleanorintType,booleanThe type has two values and can only represent two states, used here for later extensionsintType to mark

This is the time to be inonClickMethod.butTo change the text content on the button, so thebutIs a member variable

Execute when the button is clickedonClickMethod, in the method to determine the state of both on the line

In a 24-hour system, hours are usedHI don’t have toa 的

MainAbilitySlice

package com.xdr630.clockapplication.slice;

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

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. Find the clock component

        clock = (Clock) findComponentById(ResourceTable.Id_clock);
        // Find the button component
        but = (Button) findComponentById(ResourceTable.Id_but);

        // add a click event to the button
        but.setClickedListener(this);



    }

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

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

    // If the value is 0, it indicates the 24-hour system
    // If the value is 1, it indicates the 12-hour system
    int flag = 0;

    @Override
    public void onClick(Component component) {

        if (flag == 0) {// Indicates that the current system is 24 hours
            // If the current system is 24 hours, change the system to 12 hours
            // The default is 24 hours
            // If you want to display for 12 hours, you need to turn off the 24 hours display first
            clock.set24HourModeEnabled(false);

            //3. Specify a 12-hour display format
            clock.setFormatIn12HourMode("Yyyy: MM: SS A");
            // Modify the text on the button
            but.setText("Change to a 24-hour system.");
            // Change the state of the tag
            flag = 1;

        }else if (flag == 1) {// The current system is 12 hours. Change to 24 hours
            clock.set24HourModeEnabled(true);
            // Modify the presentation format
            clock.setFormatIn24HourMode("Yyyy yyyy MM dd day HH: MM :ss");
            // Modify the text on the button
            but.setText("Switch to a 12-hour schedule.");
            // Modify the tag
            flag = 0; }}}Copy the code

Run:

Click the button “Change to 12 hours”

Click the button “Change to 24 hours” again

3. Clock component extension — Specifies when to start running

In the future, most of the time used is the current time of the system, but in some cases, the specified time is displayed
Add attributes to the XML filetime, add the attribute value (millisecond value or timestamp) to the end

0: indicates that the time is from the originThe 1970-01-01 08:00:00The criteria for starting the calculation is1970-01-01 00:00:00The standard time of the 8th Zone is 8 hours ahead of Coordinated Universal Time (UTC)/Greenwich Mean Time (GMT), which is equivalent to standard time8Hour time difference

Run:

Sets the time to the specified time

Baidu: Time stamp

Timestamp: How many milliseconds elapsed from the time origin to the specified time
Copy the timestamp you just converted totimeProperty there

After running, it starts from the time specified by itself

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

HarmonyOS – Basic use of the Clock component

1. Clock Basic use of the Clock component

The Clock case — switching between 24 and 12 hours

3. Clock component extension — Specifies when to start running

HarmonyOS – Basic use of the Clock component

1. Clock Basic use of the Clock component

The Clock case — switching between 24 and 12 hours

3. Clock component extension — Specifies when to start running

Related Posts

wanliyang1990/wlplayer

Android OpenCV (55) : ORB feature point detection

Chinese Developers Conference 2021