文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android怎么实现简单时钟View的方法

2023-05-30 21:49

关注

这篇文章给大家分享的是有关Android怎么实现简单时钟View的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

通过Canvas的平移与旋转简化绘图逻辑是一个非常有用的技巧,下面的时钟view就是利用这个方法完成的,省去了使用三角函数计算坐标的麻烦。

Android怎么实现简单时钟View的方法

package com.example.swt369.simpleclock;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;import android.view.ViewTreeObserver;import android.widget.Toast;import java.util.Calendar;public class ClockView extends View { //时钟各个部件的长度 private float mScaleLengthLong; private float mScaleLengthShort; private float mTickLengthHour; private float mTickLengthMinute; private float mTickLengthSecond; //view的宽和高 private float mWidth; private float mHeight; //时钟半径 private float mRadius; //绘制各部件时用的Paint private Paint mPaintScaleLong; private Paint mPaintScaleShort; private Paint mPaintOutline; private Paint mPaintNum; private Paint mPaintTickHour; private Paint mPaintTickMinute; private Paint mPaintTickSecond; private ViewTreeObserver.OnPreDrawListener onPreDrawListener; public ClockView(final Context context, @Nullable AttributeSet attrs) {  super(context, attrs);  onPreDrawListener = new ViewTreeObserver.OnPreDrawListener() {   //获取view宽高并计算各个部件的长度   @Override   public boolean onPreDraw() {    mWidth = getMeasuredWidth();    mHeight = getMeasuredHeight();    mRadius = Math.min(mWidth,mHeight) / 2 * 0.95f;    mScaleLengthLong = mRadius * 0.1f;    mScaleLengthShort = mRadius * 0.05f;    mTickLengthHour = mRadius * 0.3f;    mTickLengthMinute = mRadius * 0.45f;    mTickLengthSecond = mRadius * 0.6f;    return true;   }  };  getViewTreeObserver().addOnPreDrawListener(onPreDrawListener);  //点击显示具体时间  setOnClickListener(new OnClickListener() {   @Override   public void onClick(View v) {    Calendar calendar = Calendar.getInstance();    String time = String.format("当前时间:%02d:%02d:%02d",      calendar.get(Calendar.HOUR_OF_DAY),calendar.get(Calendar.MINUTE),calendar.get(Calendar.SECOND));    Toast.makeText(context,time, Toast.LENGTH_SHORT).show();   }  });  //初始化所有Paint对象  initializePaints(); } @Override protected void onDraw(Canvas canvas) {  if(mWidth == 0 || mHeight == 0){   return;  }  if(onPreDrawListener != null){   getViewTreeObserver().removeOnPreDrawListener(onPreDrawListener);   onPreDrawListener = null;  }  //绘制时钟  drawClock(canvas);  //一秒后重绘  postInvalidateDelayed(1000); } private void drawClock(Canvas canvas) {  //保存原始状态  canvas.save();  //将坐标系原点移到中心,并逆时针旋转90度。完成后x轴朝上。  canvas.translate(mWidth / 2,mHeight / 2);  canvas.rotate(-90);  //画外围轮廓  canvas.drawCircle(0,0,mRadius, mPaintOutline);  //画刻度  for(int i = 0 ; i < 12 ; i++){   String num = String.valueOf(i == 0 ? 12 : i);   if(i % 3 == 0){    canvas.drawLine(mRadius,0,mRadius - mScaleLengthLong,0, mPaintScaleLong);   }else {    canvas.drawLine(mRadius,0,mRadius - mScaleLengthShort,0, mPaintScaleShort);   }   canvas.drawText(num,mRadius - mScaleLengthLong - mPaintNum.measureText(num) * 2,0, mPaintNum);   //顺时针旋转30度   canvas.rotate(30);  }  Calendar calendar = Calendar.getInstance();  //画时针  int hour = calendar.get(Calendar.HOUR);  canvas.save();  canvas.rotate(hour * 30);  canvas.drawLine(0,0,mTickLengthHour,0,mPaintTickHour);  canvas.restore();  //画分针  int minute = calendar.get(Calendar.MINUTE);  canvas.save();  canvas.rotate(minute * 6);  canvas.drawLine(0,0,mTickLengthMinute,0,mPaintTickMinute);  canvas.restore();  //画秒针  int second = calendar.get(Calendar.SECOND);  canvas.save();  canvas.rotate(second * 6);  canvas.drawLine(0,0,mTickLengthSecond,0,mPaintTickSecond);  canvas.restore();  //恢复原始状态  canvas.restore(); } private void initializePaints(){  mPaintScaleLong = new Paint();  mPaintScaleLong.setAntiAlias(true);  mPaintScaleLong.setStrokeWidth(5);  mPaintScaleShort = new Paint();  mPaintScaleShort.setAntiAlias(true);  mPaintScaleShort.setStrokeWidth(3);  mPaintOutline = new Paint();  mPaintOutline.setStyle(Paint.Style.STROKE);  mPaintOutline.setAntiAlias(true);  mPaintOutline.setStrokeWidth(5);  mPaintNum = new Paint();  mPaintNum.setTextSize(30);  mPaintTickHour = new Paint();  mPaintTickHour.setAntiAlias(true);  mPaintTickHour.setStrokeWidth(6);  mPaintTickMinute = new Paint();  mPaintTickMinute.setAntiAlias(true);  mPaintTickMinute.setStrokeWidth(4);  mPaintTickSecond = new Paint();  mPaintTickSecond.setAntiAlias(true);  mPaintTickSecond.setStrokeWidth(2); }}

代码注释已经比较详细了,下面把比较重要的部分再说明一下:

//保存原始状态canvas.save();//省略中间部分...//恢复原始状态canvas.restore();

在绘图开始时调用canvas.save(),可以保存下未经任何平移、旋转操作的原始画布状态。在所有绘图工作完成后调用canvas.restore(),可以恢复到上一次保存的状态(类似进出栈的感觉)。

//将坐标系原点移到中心,并逆时针旋转90度。完成后x轴朝上。canvas.translate(mWidth / 2,mHeight / 2);canvas.rotate(-90);

画布的平移与旋转可能比较抽象,可以想象成坐标系的平移与旋转。调用canvas.translate(dx,dy)相当于将坐标原点向x,y方向移动了dx,dy的距离,调用canvas.rotate(degree)相当于坐标系顺时针旋转了degree°。

//画刻度for(int i = 0 ; i < 12 ; i++){ String num = String.valueOf(i == 0 ? 12 : i); if(i % 3 == 0){  canvas.drawLine(mRadius,0,mRadius - mScaleLengthLong,0, mPaintScaleLong); }else {  canvas.drawLine(mRadius,0,mRadius - mScaleLengthShort,0, mPaintScaleShort); } canvas.drawText(num,mRadius - mScaleLengthLong - mPaintNum.measureText(num) * 2,0, mPaintNum); //顺时针旋转30度 canvas.rotate(30);}

根据i值决定是画大刻度(90°的倍数)还是小刻度。每次画完一条之后将坐标系顺时针旋转30°,这样保证每次画的刻度线的坐标不变。

//一秒后重绘postInvalidateDelayed(1000);

作用是在1000ms(1s)后再次执行View的draw流程,产生指针运动的效果。

感谢各位的阅读!关于“Android怎么实现简单时钟View的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯