欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义钟表特效

程序员文章站 2022-03-31 14:07:32
最近该忙的都忙完了,自己自定义一直是个弱项,也一直想整个钟表玩玩,网上看了一圈,学习了不少,下面自己做做自定义 首先,制作钟表第一步,肯定是画个圆吧,这是最直接的思维了! 先创...

最近该忙的都忙完了,自己自定义一直是个弱项,也一直想整个钟表玩玩,网上看了一圈,学习了不少,下面自己做做自定义

Android自定义钟表特效

首先,制作钟表第一步,肯定是画个圆吧,这是最直接的思维了!

先创建自己的自定义类,继承view ,重写构造方法,在第一个和第二个构造中初始化画笔,设置颜色等
第一个构造器类似于咱们直接new对象,第二个就是在xml文件引用时用到的

public class watch extends view {
 private paint mpaint;
 private context context;

 public watch(context context) {
  super(context);
  this.context = context;
  init();
 }

 public watch(context context, @nullable attributeset attrs) {
  super(context, attrs);
  this.context = context;
  init();
 }


 public watch(context context, @nullable attributeset attrs, int defstyleattr) {
  super(context, attrs, defstyleattr);
 }

 private void init() {
  mpaint = new paint();
  //抗锯齿
  mpaint.setantialias(true);
  mpaint.setcolor(color.black);
  //分三种,stroke之绘制轮廓,不绘制内容;fill,只绘制内容;fill_and_stroke,内容和轮廓都绘制
  mpaint.setstyle(paint.style.stroke);
 }

开始画圆

//设置线宽,线宽默认是1 
mpaint.setstrokewidth(2);
//在屏幕中心画圆,半径为屏幕的1/3
canvas.drawcircle(getwidth() / 2, getheight() / 2, getwidth() / 3, mpaint);

画圆心

//整个屏幕中心为圆心点
mpaint.setstrokewidth(5);
canvas.drawpoint(getwidth() / 2, getheight() / 2, mpaint);

接下来开始画表里面的竖线

//安卓坐标系默认实在左上角的,现在我们需要将坐标轴移动到圆心位置,这样利于我们绘制线
mpaint.setstrokewidth(1);
//坐标原点平移到圆心的位置
canvas.translate(getwidth() / 2, getheight() / 2);
for (int i = 0; i < 360; i++) {
   //刻度线长度为20,一圈是360度,并且秒针转一圈为60秒,所以一秒就对应360度/60秒=6度,那么五秒也就是5*6 = 30度
   if (i % 30 == 0) { //长的
    canvas.drawline(getwidth() / 3 - 25, 0, getwidth() / 3, 0, mpaint);
   } else if (i % 6 == 0) { //中的
    canvas.drawline(getwidth() / 3 - 14, 0, getwidth() / 3, 0, mpaint);
   }
   //每绘制一次就旋转1度,总共绘制了360条线
   canvas.rotate(1);
  }

效果

Android自定义钟表特效

接着再绘制数字 save和restore是成对出现的,为了这一块操作不影响下面的元素,一个保存,一个取出的意思

canvas.save();
  for (int i = 0; i < 12; i++) {
   if (i == 0) {
    trans(canvas, 12 + "", i * 30, mpaint);
   } else {
    trans(canvas, i + "", i * 30, mpaint);
   }
  }
  canvas.restore();

//如果直接绘制数字的画,文字也跟着旋转了,数字有的就会倒着,所以执行下面这一系列操作,再去绘制数字就正常了
 public void trans(canvas canvas, string text, int degree, paint paint) {
  rect rect = new rect();
  paint.gettextbounds(text, 0, text.length(), rect);
  //先将原来的坐标轴旋转30度
  canvas.rotate(degree);
  //将旋转完成的坐标轴平移到上方 它只是在y轴进行的平移,所以x轴为0,y轴也就是圆心的位置减去35,35是自己固定的位置,可适当自己修改;但是为负值,因为在y轴的上方,android坐标系往下为正数
  canvas.translate(0, -(getwidth() / 3 - 35));
  //这时在将原来旋转的30都转回去,此时的坐标轴与开始的坐标轴都是直立的,只不过现在的位置处于原来坐标轴的 右上方
  canvas.rotate(-degree);
  //开始写文字 1,2,3,。。。。。12 因为文字写
  canvas.drawtext(text, -rect.width() / 2, rect.height() / 2, paint);
  //写完文字后开始将坐标轴复原 先是顺时针旋转30都,
  canvas.rotate(degree);
  //再平移到圆心的位置
  canvas.translate(0, getwidth() / 3 - 35);
  //在逆时针平移30都
  canvas.rotate(-degree);
 }

最后绘制分针、秒针、时针

//秒针
  canvas.save(); //save方法作用是将画布先保存下来,为了不影响其他的元素,例如绘制两张图片,绘制完第一张接着绘制第二张,第二张可能就会受到第一张的影响,变形啊或者压缩了
  mpaint.setcolor(color.red);
  mpaint.setstyle(paint.style.stroke);//绘制边框
  mpaint.setstrokewidth(2);//边框宽度
  canvas.rotate(seconddegree);//这三个变量在下面代码中
  canvas.drawline(0, 0, 0, -100, mpaint);//竖直的,只在y轴上,所以x轴都为0,100其实是指针的长度,因为在上方,所以为负数
  canvas.restore();

  //分针
  canvas.save();
  mpaint.setcolor(color.black);
  mpaint.setstyle(paint.style.stroke);//绘制边框
  mpaint.setstrokewidth(4);//边框宽度 比指针粗点
  canvas.rotate(minutedegree);
  canvas.drawline(0, 0, 0, -80, mpaint);
  canvas.restore();

  //时针
  canvas.save();
  //mpaint.setcolor(color.green);
  mpaint.setstyle(paint.style.stroke);//绘制边框
  mpaint.setstrokewidth(6);//边框宽度 比指分针粗点
  canvas.rotate(hourdegree);
  canvas.drawline(0, 0, 0, -60, mpaint);
  canvas.restore();

效果

Android自定义钟表特效

最后让三个针跑起来

private float seconddegree;
private float minutedegree;
private float hourdegree;
private timer timer = new timer();
private timertask timertask = new timertask() {
  @override
  public void run() {
   if (seconddegree == 360) {
    seconddegree = 0;
   }
   if (minutedegree == 360) {
    minutedegree = 0;
   }
   if (hourdegree == 360) {
    hourdegree = 0;
   }

   //这三个变量的换算方式,变量名起分针和秒针起反了,也无所谓了
   //第一个360/60=6,也就是一秒钟走六度
   //第二个6/60 分针一秒针走0.1度
   //时针,一秒钟走1/120度
   seconddegree = seconddegree + 6;
   minutedegree = minutedegree + 0.1f;
   hourdegree = hourdegree + 1 / 120f;
   /**
    * 自定义view 刷新界面有三种
    * 1:invalidate() 如果只是内容变动,可使用此方法
    * 2:postinvalidate() 涉及到线程切换的
    * 3:requestlayout() view位置变动,需要调用此方法 涉及到radiogroup
    */
   postinvalidate();//涉及到线程,界面刷新需要使用此方法
  }
 };

 public void start() {
  timer.schedule(timertask, 0, 1000);
 }

在下面的旋转角度里调用三个变量,重复的上面的代码 星星部分

 //秒针
  canvas.save(); 
  mpaint.setcolor(color.red);
  mpaint.setstyle(paint.style.stroke);
  mpaint.setstrokewidth(2);
  **canvas.rotate(seconddegree);**
  canvas.drawline(0, 0, 0, -100, mpaint);
  canvas.restore();

  //分针
  canvas.save();
  mpaint.setcolor(color.black);
  mpaint.setstyle(paint.style.stroke);
  mpaint.setstrokewidth(4);
  **canvas.rotate(minutedegree);**
  canvas.drawline(0, 0, 0, -80, mpaint);
  canvas.restore();

  //时针
  canvas.save();
  //mpaint.setcolor(color.green);
  mpaint.setstyle(paint.style.stroke);
  mpaint.setstrokewidth(6);
  **canvas.rotate(hourdegree);**
  canvas.drawline(0, 0, 0, -60, mpaint);
  canvas.restore();

最后在activity界面调用

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.liuguijie.customwatch.mainactivity">
 <com.liuguijie.customwatch.watch
  android:id="@+id/watch"
  android:layout_centerinparent="true"
  android:layout_width="300dp"
  android:layout_height="300dp" />
</relativelayout>
//调用start方法
watch watchview = findviewbyid(r.id.watch);
watchview.start();

基本就是这么多,跑起来就可以了!

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