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>

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

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

(0)

相关推荐

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

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

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

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

  • Android自定义模拟时钟控件

    本文实例为大家分享了Android自定义模拟时钟控件的具体代码,供大家参考,具体内容如下 自定义view—透明模拟时钟显示 项目中要用到模拟时钟的显示,查了一些资料根据自己的需要进行了自定义view 思路:重写view,1.根据控件的宽高进行获取模拟时钟的半径大小.2.重写onDraw方法,将画布进行不同角度的旋转进行绘制表盘 圆心 刻度 指针 这里就直接上代码了 自定义的TimeClockView: package com.eq.viewdemo; import android.content

  • Android自定义播放器控件VideoView

    介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actvity里了,写完一看我靠代码好乱,于是就写了个自定义的播放器控件,支持指定大小,可以横竖屏切换,手动左右滑动快进快退.好了,下面开始. 效果图有点卡,我也不知道为啥..... VideoView介绍 这个是我们实现视频播放最主要的控件,详细的介绍大家百度就去看,这里介绍几个常用的方法. 用于播放视频

  • Android 自定义View时使用TypedArray配置样式属性详细介绍

     Android 自定义View时使用TypedArray配置样式属性详细介绍 在自定义view时为了提高复用性和扩展性,可以为自定义的view添加样式属性的配置,比如自定义图片资源.文字大小.控件属性等,就这需要用到TypedArray类,下面以一个自定义的可点击扩展和收缩的TextView为例记录下这个类的简单使用. 先上效果图: 点击以后为 再贴代码: 1.自定义view类: /** * @title ExpandTextView * @description 可扩展TextView,可以

  • Android自定义圆环倒计时控件

    本文实例为大家分享了Android自定义圆环倒计时控件的具体代码,供大家参考,具体内容如下 先来一张最终效果图: 主要思路: 在画渐变色圆环的时候,设置一个属性动画,根据属性动画的执行时长,来作为倒计时的时长.监听属性动画的进度,来达到 倒计时的目的. 二话不说,直接贴代码.具体实现思路都在注释上. 自定义属性: <declare-styleable name="CountDownProgressBar"> <attr name="countDown_cir

  • Android自定义双向滑动控件

    本文实例为大家分享了Android自定义双向滑动控件的具体代码,供大家参考,具体内容如下 先看一下效果图 1.SeekBarPressure工具类 public class SeekBarPressure extends View {     private static final String TAG = "SeekBarPressure";     private static final int CLICK_ON_LOW = 1;      //点击在前滑块上     priv

  • Android自定义加载控件实现数据加载动画

    本文实例为大家分享了Android自定义加载控件,第一次小人跑动的加载效果眼前一亮,相比传统的PrograssBar高大上不止一点,于是走起,自定义了控件LoadingView去实现动态效果,可直接在xml中使用,具体实现如下 package com.*****.*****.widget; import android.content.Context; import android.graphics.drawable.AnimationDrawable; import android.util.

  • Android自定义日历滑动控件

    本文实例为大家分享了Android自定义日历滑动控件的使用方法,供大家参考,具体内容如下 最近公司项目需要做这个需求,自己才疏学浅,总算能写出个大概来,遂在这里记录下来. 分析 先来分析一下: 首先,我们的需求是可以左右点击查看跳转到下一个月,中间的日历控件可以水平滚动选择日期,所以我们中间的日历控件用一个RecycleView来做,左右两位的为ImageVeiw. LRCalendarView 总体流程: 编写LRCalendarView的布局R.layout.calendar_view 新建

  • Android自定义实现日历控件

    本文实例为大家分享了Android自定义实现日历控件的具体代码,供大家参考,具体内容如下 1. Calendar类 2. 布局 创建calendar_layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:padding="20sp" android:orientation="vertical" android:l

  • Android自定义折线图控件的完整步骤

    目录 前言 概述 原点 计算Y轴宽度 计算X轴高度 X轴 绘制轴线 X轴刻度间隔 网格线.文本 Y轴 计算Y轴分布 刻度间隔.网格线.文本 折线 代码 总结 前言 日前,有一个“折现图”的需求,如下图所示: 概述 如何自定义折线图?首先将折线图的绘制部分拆分成三部分: 原点 X轴 Y轴 折线 原点 第一步,需要定义出“折线图”原点的位置,由图得: 可以发现,原点的位置由X轴.Y轴所占空间决定: OriginX:Y轴宽度OriginY:View高度 - X轴高度 计算Y轴宽度 思路:遍历Y轴的绘制

  • Android自定义滑动解锁控件使用详解

    最近的项目里用到了,在网上找不到合适的,于是自己写了个简单的,带回弹效果: 可以自定义的属性有: <!-- 滑动解锁控件 xml配置属性 --> <declare-styleable name="SlideToUnlockView"> <attr name="slideImageViewWidth" format="dimension"/><!-- 滑块宽度 --> <attr name=&q

随机推荐