用自定义 View 绘制多彩时钟

构建自定义 View

首先，我们需要创建一个自定义 View 来绘制时钟表盘。自定义 View 是一个扩展自 View 类的类，它允许您创建自己的界面元素。在我们的例子中，我们将创建一个名为 ClockView 的自定义 View。

public class ClockView extends View {

    // 时钟表盘的半径
    private float mRadius;

    // 时针和分针的长度
    private float mHourHandLength;
    private float mMinuteHandLength;

    // 时针和分针的宽度
    private float mHourHandWidth;
    private float mMinuteHandWidth;

    // 时钟表盘的颜色
    private int mDialColor;

    // 时针和分针的颜色
    private int mHourHandColor;
    private int mMinuteHandColor;

    public ClockView(Context context) {
        super(context);
        init(context);
    }

    public ClockView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        // 获取时钟表盘的半径
        mRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, context.getResources().getDisplayMetrics());

        // 获取时针和分针的长度
        mHourHandLength = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
        mMinuteHandLength = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 75, context.getResources().getDisplayMetrics());

        // 获取时针和分针的宽度
        mHourHandWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, context.getResources().getDisplayMetrics());
        mMinuteHandWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3, context.getResources().getDisplayMetrics());

        // 获取时钟表盘的颜色
        mDialColor = Color.WHITE;

        // 获取时针和分针的颜色
        mHourHandColor = Color.BLACK;
        mMinuteHandColor = Color.BLACK;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制时钟表盘
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, new Paint() {
            {
                setColor(mDialColor);
                setStyle(Style.FILL);
            }
        });

        // 计算时针和分针的角度
        float hourAngle = (float) (Math.PI * 2 * (System.currentTimeMillis() % (12 * 60 * 60 * 1000)) / (12 * 60 * 60 * 1000));
        float minuteAngle = (float) (Math.PI * 2 * (System.currentTimeMillis() % (60 * 60 * 1000)) / (60 * 60 * 1000));

        // 计算时针和分针的坐标
        float hourX = (float) (getWidth() / 2 + mRadius * Math.cos(hourAngle));
        float hourY = (float) (getHeight() / 2 + mRadius * Math.sin(hourAngle));
        float minuteX = (float) (getWidth() / 2 + mRadius * Math.cos(minuteAngle));
        float minuteY = (float) (getHeight() / 2 + mRadius * Math.sin(minuteAngle));

        // 绘制时针和分针
        canvas.drawLine(getWidth() / 2, getHeight() / 2, hourX, hourY, new Paint() {
            {
                setColor(mHourHandColor);
                setStrokeWidth(mHourHandWidth);
                setStrokeCap(Cap.ROUND);
            }
        });
        canvas.drawLine(getWidth() / 2, getHeight() / 2, minuteX, minuteY, new Paint() {
            {
                setColor(mMinuteHandColor);
                setStrokeWidth(mMinuteHandWidth);
                setStrokeCap(Cap.ROUND);
            }
        });

        // 刷新时钟
        invalidate();
    }
}

使用自定义 View

现在我们已经创建了自定义 View，是时候将其添加到布局中了。在您的布局 XML 文件中，添加以下代码：

<com.example.clockview.ClockView
    android:layout_width="200dp"
    android:layout_height="200dp" />

运行应用程序

现在您可以运行应用程序了。您应该会看到一个时钟，时针和分针会随着时间推移而移动。

结论

恭喜您！您已经成功创建了一个自定义时钟表盘。通过本教程，您学习了如何使用 Canvas 进行绘图、创建动画以及处理用户交互。希望您能将这些知识应用到自己的项目中。