ClockView时钟类

标签: 自定义控件
265人阅读 评论(0) 收藏 举报
分类:

先上图:
clockview
控件非常简单,主要是为了练习自定义控件,巧用 canvas.rotate等方法能大大简化自定义控件中一些复杂计算。上代码

public class ClockView extends View {

    private int widthAndHeight;//控件的宽高
    private int radius;//半径
    private Point center;//圆心
    private Paint mPaint;
    private Paint mTextPaint;
    private double minsRadian;//分钟弧度
    private double hoursRadian;//小时弧度

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

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

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

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(3);
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setStyle(Paint.Style.FILL);
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextSize(50);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heughtSize = MeasureSpec.getSize(heightMeasureSpec);
        //保证是个正方形
        widthAndHeight = Math.min(widthSize, heughtSize);
        radius = widthAndHeight / 2 - 5;
        center = new Point(widthAndHeight/2,widthAndHeight/2);
        setMeasuredDimension(widthAndHeight, widthAndHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //1.画外圆
        canvas.drawCircle(widthAndHeight / 2, widthAndHeight / 2, radius, mPaint);
        //2.画刻度
        int lineLength;
        for (int i = 0; i < 60; i++) {
            if (i % 5 == 0) {
                lineLength = 40;
                mPaint.setStrokeWidth(3);
                String hour = String.valueOf(i / 5);
                if (i == 0)
                    hour = "12";
                canvas.drawText(hour, widthAndHeight / 2, 100, mTextPaint);
            } else {
                lineLength = 25;
                mPaint.setStrokeWidth(2);
            }
            canvas.drawLine(widthAndHeight / 2, 5, widthAndHeight / 2, 5 + lineLength, mPaint);
            canvas.rotate(6, widthAndHeight / 2, widthAndHeight / 2);
        }
        //3.画时分针
        mPaint.setStrokeWidth(4);
        //圆心
        canvas.drawRect(widthAndHeight / 2 - 5, widthAndHeight / 2 - 5, widthAndHeight / 2 + 5, widthAndHeight / 2 + 5, mPaint);
        Point stopPoint = pointInCircle(center, radius-150, minsRadian);
        canvas.drawLine(center.x, center.y, stopPoint.x, stopPoint.y, mPaint);//分钟线
        Point stopPoint2 = pointInCircle(center, radius-200, hoursRadian);
        mPaint.setStrokeWidth(8);
        canvas.drawLine(center.x, center.y, stopPoint2.x, stopPoint2.y, mPaint);//分钟线

    }

    /**
     * 计算对应弧度圆上某个点的位置
     * @param mCenter 园心
     * @param mRadius 半径
     * @param mRadian 旋转的弧度
     * @return 对应的圆上的点
     */
    private Point pointInCircle(Point mCenter,int mRadius,double mRadian){
        Point point = new Point();
        if (mRadian<Math.PI/2){
            point.x = (int)(mCenter.x + Math.sin(mRadian)*mRadius);
            point.y = (int)(mCenter.y - Math.cos(mRadian)*mRadius);
        }else if(mRadian<Math.PI){
            point.x = (int)(mCenter.x + Math.sin(Math.PI - mRadian)*mRadius);
            point.y = (int)(mCenter.y + Math.cos(Math.PI - mRadian)*mRadius);
        }else if (mRadian < Math.PI *3 /2){
            point.x = (int)(mCenter.x - Math.sin(mRadian - Math.PI)*mRadius);
            point.y = (int)(mCenter.y + Math.cos(mRadian - Math.PI)*mRadius);
        }else if (mRadian < Math.PI *2){
            point.x = (int)(mCenter.x - Math.sin(Math.PI*2 - mRadian)*mRadius);
            point.y = (int)(mCenter.y - Math.cos(Math.PI*2 - mRadian)*mRadius);
        }
        return point;
    }

    public void setTime(Date date){
        hoursRadian = date.getHours()%12*2*Math.PI/12;
        minsRadian = date.getMinutes()*2*Math.PI/60;
        postInvalidate();
    }
查看评论

S5PV210的时钟系统-1.6.ARM裸机第六部分

本期课程主要讲述S5PV210的时钟系统,通过8节课的讲解和实战,希望大家能够彻底掌握S5PV210(以及类似复杂度的SoC)的时钟体系结构,理解MUX开关、DIV分频器、PLL倍频锁相工作电路等在时钟设置中的作用。
  • 2015年09月16日 22:21

Android-ClockView

public class ClockView extends View implements Runnable{ private Drawable mDrawable; private i...
  • goldenfish1919
  • goldenfish1919
  • 2016-04-12 16:10:41
  • 846

Android自定义View实现时钟效果ClockView

目录目录 废话不多说先上图 分析 SurfaceView注意事项 废话啰嗦完了 咱们开始实战 总结 Tips1.废话不多说先上图 录制的可能略卡,三次时间图片是因为我分别点了下面三个按钮的效果,并非b...
  • chuwe1
  • chuwe1
  • 2016-09-30 15:11:24
  • 1279

android自定义ClockView

最近由于项目需要,需要自制一个钟表视图,并加一些业务逻辑,所以根据自定义一个View的步骤,自制了一个钟表,见下图: 下面是我自定义View的代码,参考了网上大神的代码,自己做了一些项目业务的逻...
  • lcq5211314123
  • lcq5211314123
  • 2014-11-05 10:21:53
  • 1174

Android自定义ClockView实现时钟效果

Android自定义ClockView实现时钟效果
  • syc434432458
  • syc434432458
  • 2016-10-12 16:04:17
  • 94

SurfaceView打造自定义时钟ClockView

从事Android开发也一段时间了,一直有做云笔记的习惯,但是博客不怎么写。最近给自己定了个计划,坚持每周至少写三个自定义控件,所谓熟能生巧呀。作为第一篇写的博客,给大家带来用SurfaceView打...
  • b7223058
  • b7223058
  • 2016-10-13 10:36:31
  • 190

Android自定义View时钟效果

今天继续聊自定义View,当然今天的这个比较麻烦一些,如果没有自定义View的经历,建议先看看自定义文字View与水印图片View 自定义文字View 自定义水印图片View 前面的自定义文字View...
  • jinjin10086
  • jinjin10086
  • 2017-02-23 17:09:01
  • 959

Android自定义一个属于自己的时间钟表

1、概述 本文主要讲解的是如何自定义一个时间钟表,通过简单的练习可以简单学习android当中自定义view的一些常用绘图技巧,优化android绘图操作。言归正传,首先看下我们需要实现的效果: ...
  • u014741977
  • u014741977
  • 2016-12-12 14:03:39
  • 3396

Android的View类详解

在Android游戏开发之旅二中我们讲到了View和SurfaceView的区别,今天Android123从View类开始着重的介绍 Android图形显示基类的相关方法和注意点。(文/Android...
  • YUZHIBOYI
  • YUZHIBOYI
  • 2013-04-10 14:23:19
  • 1344

时钟插件TextClock的使用

TextClock是在Android API17(4.2.0)之后出现的,他是由系统托管的不会出现停止的现象(之前做一款软件的桌面插件开发–Widget)利用绘图机制将时间绘制上去,但是会发现在内存不...
  • u013243573
  • u013243573
  • 2015-12-06 12:51:41
  • 7181
    个人资料
    持之以恒
    等级:
    访问量: 5107
    积分: 229
    排名: 33万+
    文章存档
    最新评论