透过鸿蒙时钟，凝视时间的美妙画卷

前端

2023-11-02 22:44:02

透过鸿蒙时钟，凝视时间的美妙画卷

在日常生活中，我们常常会用到时钟来查看时间。然而，市面上常见的时钟大多是千篇一律的设计，缺少新意。如果你也想拥有一款独一无二的时钟，不妨动手制作一款鸿蒙App时钟屏保。

本教程将教你如何使用鸿蒙App开发工具创建一个带有背景色黑白渐变呼吸效果和翻转卡片动效的数字时钟屏保。随着时间流逝，屏保的背景色会随着时间有节奏地变化，秒钟卡片也会随之翻转，给人一种时间飞逝的压迫感，仿佛在催促着人们珍惜时间。

准备工作

在开始制作时钟屏保之前，你需要先确保已经安装了鸿蒙App开发工具。同时，你还需要准备一张背景图片和一张秒钟卡片图片。

背景图片的大小建议为10801920像素，秒钟卡片图片的大小建议为200200像素。

创建鸿蒙App项目

打开鸿蒙App开发工具，点击“新建项目”。
在“项目名称”中输入“TimeScreenSaver”，在“项目路径”中选择一个合适的文件夹，然后点击“创建”。
在弹出的“新建项目”窗口中，选择“空项目”，然后点击“确定”。

添加背景图片和秒钟卡片图片

将准备好的背景图片和秒钟卡片图片复制到项目根目录下的“res”文件夹中。
在“res”文件夹中创建一个新的文件夹，命名为“drawable”。
将背景图片和秒钟卡片图片分别复制到“drawable”文件夹中。

创建时钟屏保布局

在项目根目录下创建一个新的文件夹，命名为“layout”。
在“layout”文件夹中创建一个新的布局文件，命名为“main_layout.xml”。
在“main_layout.xml”文件中添加以下代码：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

        <variable
            name="background"
            type="android.graphics.drawable.Drawable" />

        <variable
            name="secondCard"
            type="android.graphics.drawable.Drawable" />

        <variable
            name="minute"
            type="String" />

        <variable
            name="second"
            type="String" />

    </data>

    <androidx.constraintlayout.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/background_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@{background}" />

        <androidx.constraintlayout.ConstraintLayout
            android:id="@+id/clock_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:background="@drawable/clock_background"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/minute_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@{minute}"
                android:textColor="@android:color/white"
                android:textSize="48sp"
                app:layout_constraintBottom_toTopOf="@id/second_card"
                app:layout_constraintEnd_toEndOf="@id/clock_container"
                app:layout_constraintStart_toStartOf="@id/clock_container"
                app:layout_constraintTop_toTopOf="@id/clock_container" />

            <ImageView
                android:id="@+id/second_card"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:src="@{secondCard}"
                app:layout_constraintBottom_toBottomOf="@id/clock_container"
                app:layout_constraintEnd_toEndOf="@id/clock_container"
                app:layout_constraintStart_toStartOf="@id/clock_container"
                app:layout_constraintTop_toBottomOf="@id/minute_text" />

        </androidx.constraintlayout.ConstraintLayout>

    </androidx.constraintlayout.ConstraintLayout>

</layout>

创建时钟屏保Activity

在项目根目录下创建一个新的文件夹，命名为“java”。
在“java”文件夹中创建一个新的Activity文件，命名为“MainActivity.java”。
在“MainActivity.java”文件中添加以下代码：

package com.example.timescreensaver;

import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.timescreensaver.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding binding;
    private AnimationDrawable animationDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        ImageView backgroundImage = findViewById(R.id.background_image);
        ImageView secondCard = findViewById(R.id.second_card);
        TextView minuteText = findViewById(R.id.minute_text);

        backgroundImage.setImageResource(R.drawable.background);
        secondCard.setImageResource(R.drawable.second_card);

        animationDrawable = (AnimationDrawable) backgroundImage.getDrawable();
        animationDrawable.start();

        // 定时更新时间
        new Thread() {
            @Override
            public void run() {
                while (true) {
                    try {
                        Thread.sleep(1000);
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                updateTime();
                            }
                        });
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }.start();
    }

    private void updateTime() {
        // 获取当前时间
        Calendar calendar = Calendar.getInstance();
        int minute = calendar.get(Calendar.MINUTE);
        int second = calendar.get(Calendar.SECOND);

        // 将时间转换为字符串
        String minuteString = String.format("%02d", minute);
        String secondString = String.format("%02d", second);

        // 更新UI
        binding.setMinute(minuteString);
        binding.setSecond(secondString);

        // 翻转秒钟卡片
        if (second % 2 == 0) {
            secondCard.setImageResource(R.drawable.second_card_front);
        } else {
            secondCard.setImageResource(R.drawable.second_card_back);
        }
    }
}