时钟的布局实现

这个案例是通过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"/>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

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