Android自定义View画钟表

最新推荐文章于 2021-12-14 11:09:26 发布
最新推荐文章于 2021-12-14 11:09:26 发布
阅读量312 收藏 1
点赞数
分类专栏： Android开发 文章标签： Android 自定义View 表盘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JSON_ZJS/article/details/83341430
版权

第一种使用背景表盘

主要代码：

package com.zjs.zidingyiview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import java.util.Calendar;

public class MyClock extends View {
    private Paint mPaint;
    private Calendar mCalendar;
    private int DEFAULT = 400;
    private int mSecond;
    private int mMinute;
    private int mHour;
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            mCalendar = Calendar.getInstance();
            mHour = mCalendar.get(Calendar.HOUR);
            mMinute = mCalendar.get(Calendar.MINUTE);
            mSecond = mCalendar.get(Calendar.SECOND);
//            获取时间后，重新绘制
            invalidate();
            mHandler.sendEmptyMessageDelayed(1234, 1000);

        }
    };

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mHandler.sendEmptyMessageDelayed(123, 1000);
    }

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

    public MyClock(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        switch (widthMode) {
            case MeasureSpec.AT_MOST:
                widthSize = DEFAULT;
                break;
            case MeasureSpec.EXACTLY:
                heightSize = widthSize;
                break;
        }
        switch (heightMode) {
            case MeasureSpec.AT_MOST:
                heightSize = DEFAULT;
                break;
            case MeasureSpec.EXACTLY:
                heightSize = widthSize;
                break;
        }
        setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        圆心
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, 8, mPaint);
        mPaint.setStyle(Paint.Style.STROKE);
//        绘制时针
        mPaint.setStrokeWidth(10);
        canvas.save();
        canvas.rotate((float) (360 / 12 * mHour + (mMinute * 0.5)), getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 5, mPaint);
        canvas.restore();
//         绘制分针
        mPaint.setStrokeWidth(8);
        canvas.save();
        canvas.rotate(360 / 60 * mMinute, getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 4, mPaint);
        canvas.restore();
//         绘制秒针
        mPaint.setStrokeWidth(6);
        canvas.save();
        canvas.rotate(360 / 60 * mSecond, getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 3, mPaint);
        canvas.restore()
    }
}

效果

在这里插入图片描述

自定义画表盘

package com.zjs.zidingyiview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import java.util.Calendar;

public class MyClock extends View {
    private Paint mPaint;
    private Calendar mCalendar;
    private int DEFAULT = 400;
    private int mSecond;
    private int mMinute;
    private int mHour;
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            mCalendar = Calendar.getInstance();
            mHour = mCalendar.get(Calendar.HOUR);
            mMinute = mCalendar.get(Calendar.MINUTE);
            mSecond = mCalendar.get(Calendar.SECOND);
//            获取时间后，重新绘制
            invalidate();
            mHandler.sendEmptyMessageDelayed(1234, 1000);

        }
    };

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mHandler.sendEmptyMessageDelayed(123, 1000);
    }

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

    public MyClock(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        switch (widthMode) {
            case MeasureSpec.AT_MOST:
                widthSize = DEFAULT;
                break;
            case MeasureSpec.EXACTLY:
                heightSize = widthSize;
                break;
        }
        switch (heightMode) {
            case MeasureSpec.AT_MOST:
                heightSize = DEFAULT;
                break;
            case MeasureSpec.EXACTLY:
                heightSize = widthSize;
                break;
        }
        setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setStrokeWidth(8);
//        外圆
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2 - 10, mPaint);
        mPaint.setStrokeWidth(8);
//        内圆
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, (getWidth() / 2) - 30, mPaint);
//        圆心
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, 8, mPaint);
//        刻度
//        保留 画布中已经存在的位置信息
        canvas.save();
        for (int i = 0; i < 12; i++) {
            canvas.rotate(360 / 12, getWidth() / 2, getWidth() / 2);
            canvas.drawLine(getWidth() / 2, 20, getWidth() / 2, 40, mPaint);
        }
//        将画布恢复
        canvas.restore();
        mPaint.setStyle(Paint.Style.STROKE);
//        绘制时针
        mPaint.setStrokeWidth(10);
        canvas.save();
        canvas.rotate((float) (360 / 12 * mHour + (mMinute * 0.5)), getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 5, mPaint);
        canvas.restore();
//         绘制分针
        mPaint.setStrokeWidth(8);
        canvas.save();
        canvas.rotate(360 / 60 * mMinute, getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 4, mPaint);
        canvas.restore();
//         绘制秒针
        mPaint.setStrokeWidth(6);
        canvas.save();
        canvas.rotate(360 / 60 * mSecond, getWidth() / 2, getWidth() / 2);
        canvas.drawLine(getWidth() / 2, getWidth() / 2, getWidth() / 2, getWidth() / 2 - getWidth() / 3, mPaint);
        canvas.restore();

    }
}

效果

在这里插入图片描述

背景表盘图片：
在这里插入图片描述

JSON_ZJS
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android自定义View之钟表绘制
论一个程序员的自我修养
07-13 5441
Android自定义View之钟表绘制 自定义view一直是Android进阶路上的一块石头，跨过去就是垫脚石，跨不过去就是绊脚石。作为一个攻城狮，怎么能被他绊倒，一定要跟它死磕到底，这段时间看到自定义View新手实战-一步步实现精美的钟表界面特别漂亮，咱们也来手撸一个。 先看下效果图 咱们先写一个类WatchBoard继承View,并重写他的构造方法 public class...
Android----绘制时钟
来了就为晚--的博客
02-25 557
绘制时钟——Java 绘制的效果图如下所示： 绘制步骤 绘制外圆 绘制数字 绘制刻度点 绘制时针 绘制分针 绘制秒针 备注： 最外红框是控件的大小 绘制圆的知识点 弧度和角度关系 绘制外圆 先获取控件的宽度和高度，宽高各一半作为圆心。即 x = 宽度 / 2 y = 高度 / 2 r ：半径 绘制数字 private void dra...
安卓自定义View实现钟表
05-06
安卓自定义View实现钟表.
【Android 自定义 View】--＞ 绘制时钟（表）效果
Kevin Learn Android
01-07 978
本篇文章主要介绍使用自定义 View 来实现时钟效果，灵活地使用 Android 的 Canvas，Paint, Path 的 API 以及理清 Canvas 的 save 和 restore 的意义。
Android 自定义View实现动画时钟
06-09
该项目使用AS开发，通过获取当前系统时间,然后通过自定义View加自定义的属性动画ValueAnimator实现了一个带动画效果的时钟，对学习自定义View是一个很好的例子
android自定义view实现钟表效果
08-25
Android自定义View实现钟表效果 Android自定义View实现钟表效果是一种复杂的UI组件实现，需要使用Canvas来绘制钟表的各个组成部分。下面是实现细节的知识点： 一、测量和布局 在自定义View中，我们需要重写...
Android自定义钟表特效
08-25
总之，Android自定义钟表特效的实现涉及到了自定义View的基本原理，图形绘制技术，坐标变换，以及动画实现。开发者需要理解Android图形系统的工作方式，并熟练运用这些技术来创造出独特而吸引人的用户体验。通过实践...
Android 自定义View实现时钟表盘效果
05-28
在Android开发中，自定义View是一项重要的技能，它允许开发者创造出独特且富有创意的用户界面。本篇文章将探讨如何实现一个时钟表盘效果的自定义View，这涉及到图形绘制、时间更新机制以及动画效果等多个方面的知识...
Android自定义一个属于自己的时间钟表
12-12
这涉及到对Android自定义视图（Custom View）的理解和使用，以及掌握一些高效的绘图技巧。本文将深入探讨如何在Android中实现一个自定义的时间钟表，同时优化绘图操作。 首先，自定义视图是Android开发中的一个重要...
Android自定义View绘制时钟（二）
楊帥
06-13 387
GitHub地址 承接上文：Android自定义View绘制时钟（一） 练手第二版，解决问题： 表盘数字不居中 时分秒联动不平滑 解决问题： 表盘数字不居中 时分秒联动不平滑 1. 表盘数字不居中 //获取text绘制区域顶部以及底部的拓展值，该拓展值是相对给定坐标的坐标。 float textTop = mPaint.getFontMetrics().top; float text...
Android自定义View之会走动的时钟
09-12
Android自定义View，自定义一个钟表，而且可以自己走的
自定义View之钟表
01-02
通过自定义 View ，实现一个钟表； 难点主要在画刻度上，解决方案是画一次刻度后，通过旋转画布接着画下一个刻度.zip
android自定义View之钟表诞生记
weixin_30566111的博客
04-24 94
很多筒子觉得自定义View是高手的象征，其实不然。大家觉得自定义View难很多情况下可能是因为自定义View涉及到了太多的类和API，把人搞得晕乎乎的，那么今天我们就从最简单的绘图API开始，带大家来一步一步深入自定义View的世界。先来看看我们今天要实现的一个效果图：整个效果很简单，就是在屏幕上显示一个钟表，该钟表可以自动走动。OK，那就开始动工吧。1.准备工作首先，要实现这个时钟，我得继承...
效果炸了··Android自定义View实现一个炫酷的时钟
Android_XG的博客
12-14 1216
一、背景 1.1、控件效果 要实现的自定义控件效果大致如下，实现过程中用到了比较多的自定义View的API，觉得比较有代表性，就分享出来也当做学习总结 项目代码已上传github :https://github.com/DaLeiGe/AndroidSamples/tree/master/ProgressView 1.2、从功能上分析一下这个控件，大致有以下特点 随机运动粒子从圆周向圆心运动，并与切线方向有正负30°的角度差，粒子透明度、半径、运动速度随机，运动超过一定距离或者时间消失 背景圆有一个.
自定义View之绘制钟表
violinlinlin的博客
06-24 632
Android中为我们提供了很多的功能强大的视图控件，但是有些时候我们需要特定效果的控件。这时我们就需要自定义View来实现需要的效果。关于自定义视图的内容很多，我也在慢慢研究，这里绘制了一个简单的钟表视图和大家一起分享学习。
Android中使用Canvas绘制简单的图形(二) 进阶 绘制钟表
daweibalang717的专栏
06-29 2230
此文是http://blog.csdn.net/daweibalang717/article/details/51776446 的进阶版 通过上文可以学会简单的图形绘制，我们来进行一个钟表的绘制。 效果图： 布局文件： <RelativeLayout xmlns:android="http://schemas.android.com/a
Android自定义View——绘制一个会动的时钟
David-Kuper的专栏
01-15 2104
绘制时钟的时候将时钟拆分为外圆、刻度、指针三个组成部分，使得绘制的流程变得清晰，便于代码结构管理和修改；在绘制图形的时候进行坐标系的变换以简化计算复杂度。
android 自定义钟表View
jqt1208216303的博客
02-12 270
  1. 自定义clockview 继承view import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import andro...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值