Android自定义控件实现时钟效果

Android自定义控件实现时钟效果,第1张

概述Android自定义控件实现时钟效果 在学习安卓群英传自定义控件章节的时候,有一个例子是绘制时钟,在实现了书上的例子后就想看这个时钟能不能动起来. 这里选择延迟一秒发送消息重绘view来实现的动画,对外提供了开启时钟,关闭时钟的方法,当activity执行onResume方法的时候,执行startClock()方法,当移除view或activity执行onStop方法的时候可以执行stopClock()方法. 首先根据view的宽高来确定圆心的位置,并画出一个圆.再通过view高度的一半减去圆的半径,确定刻度的起始位置,选择刻度的长

在学习安卓群英传自定义控件章节的时候,有一个例子是绘制时钟,在实现了书上的例子后就想看这个时钟能不能动起来。

这里选择延迟一秒发送消息重绘vIEw来实现的动画,对外提供了开启时钟,关闭时钟的方法,当activity执行onResume方法的时候,执行startClock()方法,当移除vIEw或activity执行onStop方法的时候可以执行stopClock()方法。

首先根据vIEw的宽高来确定圆心的位置,并画出一个圆。再通过vIEw高度的一半减去圆的半径,确定刻度的起始位置,选择刻度的长度并绘制出来。然后再刻度下方绘制出数字。最终将画布进行旋转,时钟总共有60个刻度,循环旋转,每次旋转6度即可。

最后是绘制指针,通过计算算出指针对应每个刻度的X,Y坐标并绘制直线。

代码实现

自定义控件的代码:

public class ClockVIEw extends VIEw{ private Paint circlePaint,dialPaint,numberPaint; //vIEw 的宽高 private float mWIDth,mHeight; //圆的半径 private float circleRadius; //圆心X,Y坐标 private float circleX,circleY; private int second,minute; private double hour; private Handler handler = new Handler(Looper.getMainLooper()){  @OverrIDe  public voID handleMessage(Message msg) {   super.handleMessage(msg);   if(msg.what==0){    invalIDate();   }  } }; public ClockVIEw(Context context,AttributeSet attrs) {  super(context,attrs);  initPaint(); } private voID initPaint(){  //刻盘圆,小时刻度,时针和分针的画笔  circlePaint = new Paint(Paint.ANTI_AliAS_FLAG);  circlePaint.setcolor(color.BLACK);  circlePaint.setStyle(Paint.Style.stroke);  circlePaint.setstrokeWIDth(10);  //分钟刻度的画笔  dialPaint = new Paint(Paint.ANTI_AliAS_FLAG);  dialPaint.setcolor(color.BLACK);  dialPaint.setstrokeWIDth(5);  //数字的画笔  numberPaint = new Paint(Paint.ANTI_AliAS_FLAG);  numberPaint.setcolor(color.BLACK);  numberPaint.setstrokeWIDth(5);  numberPaint.setTextSize(30); } @OverrIDe protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {  super.onMeasure(wIDthMeasureSpec,heightmeasureSpec);  mWIDth = getMeasureDWIDth();  mHeight = getMeasuredHeight();  if(mWIDth<mHeight){   //圆的半径为vIEw的宽度的一半再减9,防止贴边   circleRadius = mWIDth/2-9;   circleX = mWIDth/2;   circleY = mHeight/2;  } else{   circleRadius = mHeight/2-9;   circleX = mWIDth/2;   circleY = mHeight/2;  } } @OverrIDe protected voID onDraw(Canvas canvas) {  super.onDraw(canvas);  setTimes();  drawCirclePoint(canvas);  drawCircle(canvas);  drawDial(canvas);  drawPointer(canvas); } /**圆心  * @param canvas  */ private voID drawCirclePoint(Canvas canvas){  canvas.drawCircle(circleX,circleY,5,circlePaint); } private voID drawCircle(Canvas canvas){  canvas.drawCircle(circleX,circleRadius,circlePaint); } /**画刻度及时间  * @param canvas  */ private voID drawDial(Canvas canvas){  //时钟用长一点的刻度,画笔用画圆的画笔  Point hourStartPoint = new Point(circleX,circleY-circleRadius);  Point hourEndPoint = new Point(circleX,circleY-circleRadius+40);  //分钟的刻度要稍微短一些,画笔用画圆的画笔  Point startPoint2 = new Point(circleX,circleY-circleRadius);  Point endPoint2 = new Point(circleX,circleY-circleRadius+10);  //开始画刻度和数字,总共60个刻度,12个时钟刻度,被5整除画一个时钟刻度,被其余的为分针刻度  String clockNumber;  for(int i=0;i<60;i++){   if(i%5==0){    if(i==0){     clockNumber = "12";    } else{     clockNumber = String.valueOf(i/5);    }    //时针刻度    canvas.drawline(hourStartPoint.getX(),hourStartPoint.getY(),hourEndPoint.getX(),hourEndPoint.getY(),circlePaint);    //画数字,需在时针刻度末端加30    canvas.drawText(clockNumber,circleX-numberPaint.measureText(clockNumber)/2,hourEndPoint.getY()+30,numberPaint);   } else{    //画分针刻度    canvas.drawline(startPoint2.getX(),startPoint2.getY(),endPoint2.getX(),endPoint2.getY(),circlePaint);   }   //画布旋转6度   canvas.rotate(360/60,circleX,circleY);  } } /**画指针  * X点坐标 cos(弧度)*r  * Y点坐标 sin(弧度)*r  * toradians将角度转成弧度  * 安卓坐标系与数学坐标系不同的地方是X轴是相反的,所以为了调整方向,需要将角度+270度  * @param canvas  */ private voID drawPointer(Canvas canvas){  canvas.translate(circleX,circleY);  float hourX = (float) Math.cos(Math.toradians(hour*30+270))*circleRadius*0.5f;  float hourY = (float) Math.sin(Math.toradians(hour*30+270))*circleRadius*0.5f;  float minuteX = (float) Math.cos(Math.toradians(minute*6+270))*circleRadius*0.8f;  float minuteY = (float) Math.sin(Math.toradians(minute*6+270))*circleRadius*0.8f;  float secondX = (float) Math.cos(Math.toradians(second*6+270))*circleRadius*0.8f;  float secondY = (float) Math.sin(Math.toradians(second*6+270))*circleRadius*0.8f;  canvas.drawline(0,hourX,hourY,circlePaint);  canvas.drawline(0,minuteX,minuteY,secondX,secondY,dialPaint);  //一秒重绘一次  handler.sendEmptyMessageDelayed(0,1000); } public voID startClock(){  setTimes();  invalIDate(); } private voID setTimes(){  Date date = new Date();  Calendar calendar = Calendar.getInstance();  calendar.setTime(date);  second = getTimes(date,Calendar.SECOND);  minute = getTimes(date,Calendar.MINUTE);  hour = getTimes(date,Calendar.HOUR)+minute/12*0.2; } private int getTimes(Date date,int calendarFIEld){  Calendar calendar = Calendar.getInstance();  calendar.setTime(date);  return calendar.get(calendarFIEld); } public voID stopClock(){  handler.removeMessages(0); }}

public class Point {
private float x;
private float y;

public Point(float x,float y) { this.x = x; this.y = y;}public float getX() { return x;}public voID setX(float x) { this.x = x;}public float getY() { return y;}public voID setY(float y) { this.y = y;}

Acitivity:

public class ClockActivity extends Activity{  private ClockVIEw clockVIEw;  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentVIEw(R.layout.clock_layout);   clockVIEw = (ClockVIEw) findVIEwByID(R.ID.clock);  }  @OverrIDe  protected voID onResume() {   super.onResume();   clockVIEw.startClock();  }  @OverrIDe  protected voID onStop() {   super.onStop();   clockVIEw.stopClock();  } }

xml布局:

<linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:orIEntation="vertical" androID:layout_wIDth="match_parent" androID:gravity="center" androID:layout_height="match_parent"> <com.example.customvIEw.vIEw.ClockVIEw  androID:layout_wIDth="match_parent"  androID:ID="@+ID/clock"  androID:layout_height="match_parent" /></linearLayout>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

总结

以上是内存溢出为你收集整理的Android自定义控件实现时钟效果全部内容,希望文章能够帮你解决Android自定义控件实现时钟效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1144235.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存