Android自定义模拟时钟控件

本文实例为大家分享了Android自定义模拟时钟控件的具体代码,供大家参考,具体内容如下

自定义view—透明模拟时钟显示

项目中要用到模拟时钟的显示,查了一些资料根据自己的需要进行了自定义view

思路:重写view,1.根据控件的宽高进行获取模拟时钟的半径大小。2.重写onDraw方法,将画布进行不同角度的旋转进行绘制表盘 圆心 刻度 指针

这里就直接上代码了

自定义的TimeClockView:

package com.eq.viewdemo;

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.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;

import java.util.Calendar;

/**
 * Created by pc on 2017/3/29.
 */
public class TimeClockView extends View {
    private int width;
    private int height;
    private Paint mPaintLine;
    private Paint mPaintCircle;
    private Paint mPaintHour;
    private Paint mPaintMinute;
    private Paint mPaintSec;
    private TextPaint mPaintText;
    private Calendar mCalendar;
    public static final int START_ONDRAW = 0X23;

    //每隔一秒,在handler中调用一次重新绘制方法
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {

            switch (msg.what) {
                case START_ONDRAW:
                    mCalendar = Calendar.getInstance();
                    invalidate();//告诉UI主线程重新绘制
                    handler.sendEmptyMessageDelayed(START_ONDRAW, 1000);
                    break;
                default:
                    break;
            }
        }
    };

    public TimeClockView(Context context) {
        super(context);
    }

    public TimeClockView(Context context, AttributeSet attrs) {
        super(context, attrs);

        mCalendar = Calendar.getInstance();

        mPaintLine = new Paint();
        mPaintLine.setColor(Color.GREEN);
        mPaintLine.setStrokeWidth(2);
        mPaintLine.setAntiAlias(true);//设置是否抗锯齿
        mPaintLine.setStyle(Paint.Style.STROKE);//设置绘制风格

        mPaintCircle = new Paint();
        mPaintCircle.setColor(Color.RED);//设置颜色
        mPaintCircle.setStrokeWidth(2);//设置线宽
        mPaintCircle.setAntiAlias(true);//设置是否抗锯齿
        mPaintCircle.setStyle(Paint.Style.FILL);//设置绘制风格

        mPaintText = new TextPaint();
        mPaintText.setColor(Color.BLUE);
        mPaintText.setStrokeWidth(5);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(30);

        mPaintHour = new Paint();
        mPaintHour.setStrokeWidth(6);
        mPaintHour.setColor(Color.BLUE);
        mPaintHour.setAntiAlias(true);

        mPaintMinute = new Paint();
        mPaintMinute.setStrokeWidth(4);
        mPaintMinute.setColor(Color.BLUE);
        mPaintMinute.setAntiAlias(true);

        mPaintSec = new Paint();
        mPaintSec.setStrokeWidth(2);
        mPaintSec.setColor(Color.BLUE);
        mPaintSec.setAntiAlias(true);

        handler.sendEmptyMessage(START_ONDRAW);//向handler发送一个消息,让它开启重绘
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

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

        int circleRadius ; //模拟时钟的圆半径大小
        if (width > height) {
            circleRadius = height / 2 -10;
        } else {
            circleRadius = width / 2 -10;
        }
        //画出圆中心
        canvas.drawCircle(width / 2, height / 2, 5, mPaintCircle);
        //依次旋转画布,画出每个刻度和对应数字
        for (int i = 1; i <= 60; i++) {
            canvas.save();//保存当前画布
            if (i % 5 == 0) {
                //将画布进行以圆心以固定的角度旋转进行旋转
                canvas.rotate(360 / 60 * i, width / 2, height / 2);
                //设置字体大小,这里是以圆半径的十分之一大小
                mPaintText.setTextSize(circleRadius / 10);
                //如果绘制对应的数字时只进行一次旋转是不能达到目标的,需要再次以书写文字的地方在进行反向旋转这样写出来的就是正向的
                canvas.rotate(-360 / 60 * i, width / 2, height / 2 - circleRadius+5);
                canvas.drawText("" + i / 5, width / 2, height / 2 - circleRadius+circleRadius / 20 , mPaintText);
            } else {
                canvas.rotate(360 / 60 * i, width / 2, height / 2);
                //左起:起始位置x坐标,起始位置y坐标,终止位置x坐标,终止位置y坐标,画笔(一个Paint对象)
                canvas.drawCircle(width/2,height/2-circleRadius,2,mPaintCircle);
            }
            canvas.restore();
        }

        int minute = mCalendar.get(Calendar.MINUTE);//得到当前分钟数
        int hour = mCalendar.get(Calendar.HOUR);//得到当前小时数
        int sec = mCalendar.get(Calendar.SECOND);//得到当前秒数
        String time;
        if (sec < 10 && hour < 10 && minute < 10) { //都小于10
            time = "0" + hour + ":0" + minute + ":0" + sec; //02:02:02
        } else if (sec < 10 && hour < 10 && minute > 9) {//分钟大于9
            time = "0" + hour + ":" + minute + ":0" + sec; //02:12:02
        } else if (sec > 9 && hour < 10 && minute < 10) {//秒大于9
            time = "0" + hour + ":0" + minute + ":" + sec; //02:02:12
        } else if (sec < 10 && hour > 9 && minute < 10) {//时大于9
            time = hour + ":0" + minute + ":0" + sec; //12:02:02
        } else if (sec < 10 && hour > 9 && minute > 9) {//时分于9
            time = hour + ":" + minute + ":0" + sec; //12:12:02
        } else if (sec > 9 && hour > 9 && minute < 10) {//时秒大于9
            time = hour + ":0" + minute + ":" + sec; //12:02:12
        } else if (sec > 9 && hour < 10 && minute > 9) {//分秒大于9
            time = "0" + hour + ":" + minute + ":" + sec; //02:12:12
        } else {
            time = hour + ":" + minute + ":" + sec; //12:12:12
        }
        //绘制中心下方的时间显示
        mPaintText.setTextSize(circleRadius / 10 * 2);
        canvas.save();
        canvas.drawText(time, width / 2, height / 2 + circleRadius / 10 * 4, mPaintText);

        //绘制时分秒相应的指针
        float minuteDegree = minute / 60f * 360;//得到分针旋转的角度
        canvas.save();
        canvas.rotate(minuteDegree, width / 2, height / 2);
        canvas.drawLine(width / 2, height / 2 - circleRadius + circleRadius / 3, width / 2, height / 2 + circleRadius / 6, mPaintMinute);
        canvas.restore();

        float hourDegree = (hour * 60 + minute) / 12f / 60 * 360;//得到时钟旋转的角度
        canvas.save();
        canvas.rotate(hourDegree, width / 2, height / 2);
        canvas.drawLine(width / 2, height / 2 - circleRadius + circleRadius / 2, width / 2, height / 2 + circleRadius / 9, mPaintHour);
        canvas.restore();

        float secDegree = sec / 60f * 360;//得到秒针旋转的角度
        canvas.save();
        canvas.rotate(secDegree, width / 2, height / 2);
        canvas.drawLine(width / 2, height / 2 - circleRadius + 2, width / 2, height / 2 + circleRadius / 4, mPaintSec);
        canvas.restore();

    }
}

在布局中进行调用

activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.eq.viewdemo.MainActivity">

   <com.eq.viewdemo.TimeClockView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="#f99"/>

</RelativeLayout>

到此自定义的模拟时钟就完成了,希望对有需要的朋友起到帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-01-13

Android自定义控件实现时钟效果

在学习安卓群英传自定义控件章节的时候,有一个例子是绘制时钟,在实现了书上的例子后就想看这个时钟能不能动起来. 这里选择延迟一秒发送消息重绘view来实现的动画,对外提供了开启时钟,关闭时钟的方法,当activity执行onResume方法的时候,执行startClock()方法,当移除view或activity执行onStop方法的时候可以执行stopClock()方法. 首先根据view的宽高来确定圆心的位置,并画出一个圆.再通过view高度的一半减去圆的半径,确定刻度的起始位置,选择刻度的长

Android编程基于自定义控件实现时钟功能的方法

本文实例讲述了Android编程基于自定义控件实现时钟功能的方法.分享给大家供大家参考,具体如下: 在学习安卓群英传自定义控件章节的时候,有一个例子是绘制时钟,在实现了书上的例子后就想看这个时钟能不能动起来. 这里选择延迟一秒发送消息重绘view来实现的动画,对外提供了开启时钟,关闭时钟的方法,当activity执行onResume方法的时候,执行startClock()方法,当移除view或activity执行onStop方法的时候可以执行stopClock()方法. 首先根据view的宽高来

Android编程简单实现拨号器功能的方法

本文实例讲述了Android编程简单实现拨号器功能的方法.分享给大家供大家参考,具体如下: 学习Android已经有2天时间了,没学习的时候觉得android可能很枯燥,但是学过之后我发觉其实这个比什么javaweb好玩多了.学习android可以见到一些很有趣的东西,这里呢也建议学习javaME的人不要在煎熬了,学习android吧.在写程序之前也需要知道android的工作原理 1.获取组件清单 2.登记或注册组件 3.将组件封装成意图 4.把意图交给意图处理器进行处理 5.把界面显示给用户

Android编程实现自定义ImageView圆图功能的方法

本文实例讲述了Android编程实现自定义ImageView圆图功能的方法.分享给大家供大家参考,具体如下: 首先很感谢开源项目Universal Image Loader图片加载框架.之前也看过一段时间框架源码,但是却没有时间进行知识点的总结. 今天项目遇到了需要实现圆头像的编辑显示,Universal就已经提供了这个显示RoundedBitmapDisplayer这个类实现了圆图功能.看它的代码可以发现是实现的Drawable public static class RoundedDrawa

Android编程基于自定义View实现绚丽的圆形进度条功能示例

本文实例讲述了Android编程基于自定义View实现绚丽的圆形进度条功能.分享给大家供大家参考,具体如下: 本文包含两个组件,首先上效果图: 1.ProgressBarView1(支持拖动): 2.ProgressBarView2(不同进度值显示不同颜色,不支持拖拽):   代码不多,注释也比较详细,全部贴上了: (一)ProgressBarView1: /** * 自定义绚丽的ProgressBar. */ public class ProgressBarView1 extends View

Android编程基于重力传感器实现横竖屏放向切换功能

本文实例讲述了Android编程基于重力传感器实现横竖屏放向切换功能.分享给大家供大家参考,具体如下: 最近项目中用到了vr视频播放,因为自己实现,同时要实现横竖屏自动切换屏幕,核心代码如下: package com.d1ev.touch.App.helper; import android.app.Activity; import android.content.pm.ActivityInfo; import android.util.Log; import android.view.Orie

Android编程实现的微信支付功能详解【附Demo源码下载】

本文实例讲述了Android编程实现的微信支付功能.分享给大家供大家参考,具体如下: 最近公司弄Ionic框架,项目中需要微信支付,无奈,把我调过去弄,期间也是几近崩溃,好在皇天不负有心人,在看别人的文档,终于是在项目中集成了微信支付,下面作为一个小白的我,想要把我的经验分享给大家,希望对大家有所帮助. 先给一个可用的demo吧(运行前先看txt文件) demo代码点击此处本站下载. 这个demo是基于eclipse开发的,博主也在Android Studio开发过微信支付,原理都是一样的,大家

Android编程基于距离传感器控制手机屏幕熄灭的方法详解

本文实例讲述了Android编程基于距离传感器控制手机屏幕熄灭的方法.分享给大家供大家参考,具体如下: 在现实生活中,打电话的时候手机挨着自己的头,屏幕会熄灭,这是为了不让自己的头按到什么手机键~ 这个功能可以使用距离传感器来实现 P-Sensor距离感应器,可以感应手机和人体距离.具体使用用途是在通话过程中打开P-Sensor,那么当手机屏幕贴近用户脸部时,就会自动感应出手机和人体距离是多少.当小于某一个值时,就会熄灭屏幕,不再接收用户触摸屏幕事件,从而有效的防止通话过程中误触摸事件的出现.

Android编程实现两点触控功能示例

本文实例讲述了Android编程实现两点触控功能.分享给大家供大家参考,具体如下: 下面是一个两点触控的案例代码: package com.zzj; import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; public class AndroidTestActivity extends Activity { private float x0, y0; private float

Android编程实现调用系统分享功能示例

本文实例讲述了Android编程实现调用系统分享功能.分享给大家供大家参考,具体如下: /** * 调用系统的分享功能 * Created by admin on 15-4-13. */ public class ShareActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV

Android编程调用Camera和相册功能详解

本文实例讲述了Android编程调用Camera和相册功能.分享给大家供大家参考,具体如下: xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="