时钟的布局实现

这个案例是通过view来制作一个Android时钟

//创建一个类继承view

public class ClockView extends View {

   private static final String TAG = "ClockView";

   private final Paint mPaint2;

   private final Paint mPaint3;

   private final Paint mPaint4;

   private final Paint mPaint5;

   private int mCx;

   private int mCy;

   private int mRadius;

   private final Paint mPaint;

   private final Paint mPaint1;

   private int CIRCLESIZE=3; //环到外边框的距离

   private int DIGITSLONG=20;//长刻度距离

   private int DIGISTSHART=10;//断刻度距离

   private int mTextsize=20;//文本的大小

   private Bitmap mbitmap;

   private int mHourDegree;

   private int mMinuteDegree;

   private int mSecondDegree;

   private Paint mBackgroundPaint;

   public ClockView(Context context, AttributeSet attrs) {

       super(context, attrs);

       //圆环的笔

       mPaint = new Paint();

       mPaint.setStrokeWidth(5);

       mPaint.setStyle(Paint.Style.STROKE);

       mPaint.setAntiAlias(true);

       mPaint.setColor(Color.GRAY);

       //刻度的笔

       mPaint1 = new Paint();

       mPaint1.setColor(Color.GRAY);

       mPaint1.setAntiAlias(true);

       mPaint1.setStrokeWidth(3);

       //loge的笔

       mbitmap= BitmapFactory.decodeResource(getResources(),R.mipmap.heima);

       mPaint2 = new Paint();

       //指针的笔

       mPaint3 = new Paint();

       mPaint3.setColor(Color.WHITE);

       mPaint3.setStrokeWidth(5);

       mPaint3.setAntiAlias(true);

       mPaint4 = new Paint();

       mPaint4.setColor(Color.WHITE);

       mPaint4.setStrokeWidth(4);

       mPaint4.setAntiAlias(true);

       mPaint5 = new Paint();

       mPaint5.setColor(Color.WHITE);

       mPaint5.setStrokeWidth(3);

       mPaint5.setAntiAlias(true);

   }

   @Override

   protected void onSizeChanged(int w, int h, int oldw, int oldh) {

       //原点

       mCx = w/2;

       mCy = h/2;

       //环半径

       mRadius = w/2-CIRCLESIZE;

       initBackgroundPaint();

   }

   private void initBackgroundPaint() {

       mBackgroundPaint = new Paint();

       mBackgroundPaint.setColor(Color.LTGRAY);

       int[] colors = {Color.BLACK, Color.LTGRAY, Color.WHITE, Color.LTGRAY};

//    float[] positions = {0.0f, 0.5f, 0.75f, 1};

       Shader shader = new RadialGradient(mCx, mCy, mRadius, colors, null, Shader.TileMode.CLAMP);

       mBackgroundPaint.setShader(shader);

   }

   @Override

//开始绘制

   protected void onDraw(Canvas canvas) {

       //    6. 画背景

       canvas.drawCircle(mCx, mCy, mRadius, mBackgroundPaint);

       //1.画环

       canvas.drawCircle(mCx,mCy,mRadius,mPaint);

       //2.画刻度

     /* int startX=mCx;

       int startY=5;

       int stopX=mCx;

       int stopY=20;

       canvas.rotate(30,mCx,mCy);

       canvas.drawLine(startX,startY,stopX,stopY,mPaint1);*/

       drawDigits(canvas);

       //3画数字

       drawText(canvas);

       //画loge

       drawLoge(canvas);

       //画指针

       drawArrows(canvas);

       //指针动起来 调用onAttachedToWindow  当view绑定到window的时候调用

   }

   private void drawArrows(Canvas canvas) {

     /* mpath=new Path();

       mpath.moveTo(mCx,mCy+DIGITSLONG);

       mpath.lineTo(mCx,mCy-DIGITSLONG);*/

       //canvas.drawPath(mpath,mPaint3);

       //进行指针动画

       canvas.rotate(mHourDegree,mCx,mCy);

       canvas.drawLine(mCx,mCy+DIGISTSHART,mCx,CIRCLESIZE*3+DIGITSLONG+mTextsize,mPaint3);

       canvas.rotate(-mHourDegree,mCx,mCy);

       canvas.rotate(mMinuteDegree,mCx,mCy);

       canvas.drawLine(mCx,mCy+DIGISTSHART,mCx,CIRCLESIZE+DIGITSLONG+mTextsize,mPaint4);

       canvas.rotate(-mMinuteDegree,mCx,mCy);

       canvas.rotate(mSecondDegree,mCx,mCy);

       canvas.drawLine(mCx,mCy+DIGISTSHART,mCx,DIGISTSHART+mTextsize,mPaint5);

       canvas.rotate(-mSecondDegree,mCx,mCy);

   }

   private void drawLoge(Canvas canvas) {

       canvas.drawBitmap(mbitmap,mCx-mTextsize/2,CIRCLESIZE+DIGITSLONG+mTextsize,mPaint2);

   }

   private void drawText(Canvas canvas) {

       for (int i=1;i<=12;i++){

           canvas.rotate(30,mCx,mCy);

           //调整位置

           canvas.rotate(-30*i,mCx,CIRCLESIZE+DIGITSLONG+mTextsize/2);

           canvas.drawText(i+"",mCx-CIRCLESIZE,CIRCLESIZE*2+DIGITSLONG+mTextsize/2,mPaint1);

           canvas.rotate(30*i,mCx,CIRCLESIZE+DIGITSLONG+mTextsize/2);

       }

   }

   private void drawDigits(Canvas canvas) {

       for (int i=0 ;i<60;i++) {

           int startX = mCx;

           int startY = CIRCLESIZE;

           int stopX = mCx;

           int stopY;

           if(i%5==0){

               stopY = DIGITSLONG;

           }else{

               stopY=DIGISTSHART;

           }

           canvas.drawLine(startX, startY, stopX, stopY, mPaint1);

           canvas.rotate(6, mCx, mCy);

       }

   }

   @Override

   //当view绑定到window的时候调用

   protected void onAttachedToWindow() {

       super.onAttachedToWindow();

       //开启指针动画

       startTick();

   }

   private void startTick() {

       //1秒执行一次

       postDelayed(runnable,1000);

   }

   private Runnable runnable=new Runnable() {

       @Override

       public void run() {

           //计算指针便宜角度

           calculateDegree();

           //重新绘制

           invalidate();

           //递归

           startTick();

       }

   };

   private void calculateDegree() {

       //获取当前时间

       Calendar instance = Calendar.getInstance();

       instance.setTimeInMillis(System.currentTimeMillis());

       int hour = instance.get(Calendar.HOUR);

       int minute = instance.get(Calendar.MINUTE);

       int second = instance.get(Calendar.SECOND);

       //计算角度

       mHourDegree = hour * 30;

       mMinuteDegree = minute * 6;

       mSecondDegree = second * 6;

   }

}

//布局中的代码

   android:layout_centerInParent="true"

   android:layout_width="200dp"

   android:layout_height="200dp"

   android:background="#ffffff"/>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,647评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,690评论 2 374
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,739评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,692评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,552评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,410评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,819评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,463评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,752评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,789评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,572评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,414评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,833评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,054评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,345评论 1 254
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,810评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,016评论 2 337

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载 前言 Canvas 本意是画布的意思,然而将它理解为绘制工具一...
    cc荣宣阅读 41,502评论 1 47
  • 一、概述 1. 四线格与基线 小时候,我们在刚开始学习写字母时,用的本子是四线格的,我们必须把字母按照规则写在四线...
    addapp阅读 7,572评论 2 17
  • 前言: 在接触Android这么长时间,看到很多大牛都在和大家分享自己的知识,深有体会,刚好前段时间写了一个Dem...
    杨艳伟阅读 1,248评论 0 5
  • 花开五瓣粉漆雪,风动三春玉点枝。碧波推起胭脂梦,胭脂梦醒眷卿痴。
    茗香酒影阅读 174评论 0 0
  • 目前手上定投有四款主要基金,接下来准备逐一分析下,也算是重新学习和再次梳理。 交银优势行业混合(519697),目...
    子非_似是而非阅读 697评论 0 0