关闭

ClockView时钟类

标签: 自定义控件
214人阅读 评论(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();
    }
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Qt5常用控件初步介绍(2)-制作LCD时钟

QT5控件介绍(2)-制作LCD时钟输入部件组(Input Widgets) - Combo Box :组合框 - Font Combo Box :字体组合框 - Line Edit...
  • kkecin97
  • kkecin97
  • 2017-01-04 14:19
  • 973

SurfaceView打造自定义时钟ClockView

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

ClockView——简单的Android时钟控件

ClockView —— 简单的Android时钟控件GitHub地址:https://github.com/LanceShu/ClockView使用前:先在项目中的build.gradle中添加ma...
  • shu_lance
  • shu_lance
  • 2017-11-14 22:33
  • 90

Android 自定义View(四) 时钟clockView

模仿To_be_Designer的自定义时钟,主要是强化自己的技能,和写一点感悟 实现目标:       绘制直线: drawLine(float startX, float startY, fl...
  • a752602882
  • a752602882
  • 2016-06-24 12:27
  • 156

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

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

【JAVA语言程序设计基础篇】--图形-- 三种时钟--增强对类的理解和应用

1.显示任意时间时钟 2.设置三个可见性属性 分别表示时针,分针,秒针的可见性 3.一个精细的时钟  主类:StillClock  @SuppressWarnings("serial") clas...
  • qq_24653023
  • qq_24653023
  • 2016-08-12 21:09
  • 1318

C++编程入门系列之十三(类与对象:类的声明、成员的访问控制和对象)

C++编程入门系列之十三(类与对象:类的声明、成员的访问控制和对象) 鸡啄米上讲中介绍了面向对象设计的基本思想和特点,主要是让大家在编程入门时于思维中初步建立面向对象设计的概念。这一讲开始讲面向对象...
  • Snail_zhan
  • Snail_zhan
  • 2016-09-05 15:03
  • 396

浙大Java进阶mooc第二周作业---------有秒针计时的数字时钟

有秒针计时的数字时钟 题目内容: 这一周的编程题是需要你在课程所给的时钟程序的基础上修改而成。但是我们并不直接给你时钟程序的代码,请根据视频自己输入时钟程序的Display...
  • sinat_27184083
  • sinat_27184083
  • 2015-08-20 09:09
  • 2516

STM32F4时钟设置分析

STM32F4时钟设置分析 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发...
  • jdh99
  • jdh99
  • 2014-03-25 14:06
  • 28247

HTML5 简单页面实现时钟效果

界面显示: html代码: JSP Page canvas{ border...
  • u012716909
  • u012716909
  • 2016-05-19 10:31
  • 2904
    个人资料
    • 访问:4351次
    • 积分:218
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    最新评论