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);
  }

效果

接着再绘制数字 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();

效果

最后让三个针跑起来

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();

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

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

(0)

相关推荐

  • Android多功能时钟开发案例(实战篇)

    上一篇为大家介绍的是Android多功能时钟开发基础内容,大家可以回顾一下,Android多功能时钟开发案例(基础篇) 接下来进入实战,快点来学习吧. 一.时钟 在布局文件中我们看到,界面上只有一个TextView,这个TextView的作用就是显示一个系统的当前时间,同时这个时间还是一秒一秒跳的,要实现一秒一秒的跳就需要我们每隔一秒就要刷新一下,同时我们这里还考虑了切换到另一个Tab的时候,这个时间就不跳动了,这样就会减少这个对系统的占用,考虑到了这点我们在这里用到了Handler,通过han

  • Android多功能时钟开发案例(基础篇)

    本文我们进入Android多功能时钟开发实战学习,具体的效果可以参考手机上的时钟,内容如下 首先我们来看一看布局文件layout_main.xml 整个布局: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/container" android:layout_width="match_parent" androi

  • android实现widget时钟示例分享

    一.在 AndroidManifest.xml文件中配置Widgets: 复制代码 代码如下: <manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.widget"    android:versionCode="1"    android:versionName="1.0" >   

  • Android获取设备CPU核数、时钟频率以及内存大小的方法

    本文实例讲述了Android获取设备CPU核数.时钟频率以及内存大小的方法.分享给大家供大家参考,具体如下: 因项目需要,分析了一下 Facebook 的开源项目 - Device Year Class. Device Year Class 的主要功能是根据 CPU核数.时钟频率 以及 内存大小 对设备进行分级.代码很简单,只包含两个类: DeviceInfo -> 获取设备参数, YearClass -> 根据参数进行分级. 下表是 Facebook 公司提供的分级标准,其中 Year 栏表

  • Android打造属于自己的时间钟表

    1.概述 本文主要讲解的是如何自定义一个时间钟表,通过简单的练习可以简单学习Android当中自定义view的一些常用绘图技巧,优化android绘图操作.言归正传,首先看下我们需要实现的效果: 当我们看到这个效果的时候脑子里应该有一定的思路了,我们应该把它分解成以下几个步骤: 1.仪表盘(圆) 2.刻度线(长 中 短) 3.刻度值(1-12) 4.指针(时  分  秒) 5.移动指针,计算指针位置 现在我们已经很清楚自己的思路了,那么我们一个一个来. 第一步:1.自定义View的属性,首先在r

  • Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果

    废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧数字相比较来切换数字变换的,大致使用方法如下: //获取输入框中的数字 int newNumber = Integer.parseInt(etInput.getText().toString()); //获取个.十.百位数字 int nbai = newNumber / 100; int nshi

  • Android实现简单时钟View的方法

    通过Canvas的平移与旋转简化绘图逻辑是一个非常有用的技巧,下面的时钟view就是利用这个方法完成的,省去了使用三角函数计算坐标的麻烦. package com.example.swt369.simpleclock; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.support.annotation.Nullable; i

  • Android实现时钟特效

    本文实例为大家分享了Android实现时钟特效的具体代码,供大家参考,具体内容如下 效果展示: 功能介绍: 如果您想换一张背景图,可以点击左下角按按钮切换背景图片. 如果您不想看见右上方的日期,可以点击它,他就会随即隐藏.如果你想 再次查看,请点击左下角切换壁纸按钮他就会被再次展示. Demo 下载地址: 点击此处跳转:AndroidClockDemo 部分代码展示: mainActivity部分: 实现切换,获得事件并显示等功能. public class MainActivity exten

  • android高仿小米时钟(使用Camera和Matrix实现3D效果)

    继续练习自定义View..毕竟熟才能生巧.一直觉得小米的时钟很精美,那这次就搞它~这次除了练习自定义View,还涉及到使用Camera和Matrix实现3D效果. 一个这样的效果,在绘制的时候最好选择一个方向一步一步的绘制,这里我选择由外到内.由深到浅的方向来绘制,代码步骤如下: 1.首先老一套~新建attrs.xml文件,编写自定义属性如时钟背景色.亮色(用于分针.秒针.渐变终止色).暗色(圆弧.刻度线.时针.渐变起始色),新建MiClockView继承View,重写构造方法,获取自定义属性值

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

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

随机推荐