Android画个时钟玩玩

先看下最终的效果

开始实现
新建一个ClockView集成View

  public class ClockView extends View {

  }

先重写onMeasure方法,这里要先说一下View的测量模式,一共有三种:
1、EXACTLY

即精确值模式,当我们将控件的layout_width属性或layout_height属性指定为具体数值时,比如android:layout_width="100dp",或者指定为math_parent属性时(占据父View的大小),系统使用的是EXACTLY模式。

2、AT_MOST

即最大值模式,当控件的layout_width属性或layout_height属性指定为wrap_content时,控件大小一般随着控件的子控件或内容的变化而变化,此时控件的尺寸只要不超过父控件允许的最大尺寸即可。

3、UNSPECIFIED

这个属性比较奇怪——它不指定其大小测量模式,View想多大就多大,通常情况下在绘制自定义View时才会使用。

因为View的onMeasure方法只支持EXACTLY模式,当layout_width和layout_height为wrap_content时,View的大小就显得很奇怪了,如下图。

所以我们重写一下onMeasure方法可以指定View width、height的最小值

  /**
   * 当布局为wrap_content时设置默认长宽
   * @param widthMeasureSpec
   * @param heightMeasureSpec
   */
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(measure(widthMeasureSpec), measure(heightMeasureSpec));
  }

  private int measure(int origin){
    int result = DEFAULT_MIN_WIDTH;
    int specMode = MeasureSpec.getMode(origin);
    int specSize = MeasureSpec.getSize(origin);
    if(specMode == MeasureSpec.EXACTLY){
      result = specSize;
    }else{
      if(specMode == MeasureSpec.AT_MOST){
        result = Math.min(result, specSize);
      }
    }
    return result;
  }

下面就是最重要的重写onDraw方法来绘制表盘、刻度、指针……,大致流程如下
1、画表盘,用drawCircle绘制一个圆作为表盘, 圆心坐标为(getWidth()/2, getHeight()/2),半径为Math.min(getHeight()/2, getWidth()/2)。

//画外圆
float borderWidth = DEFAULT_BORDER_WIDTH;
Paint paintCircle = new Paint();
paintCircle.setStyle(Paint.Style.STROKE);
paintCircle.setAntiAlias(true);
paintCircle.setStrokeWidth(borderWidth);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, Math.min(getHeight() / 2, getWidth() / 2) - borderWidth / 2, paintCircle);

2、画刻度线在这里我们可以利用一个`canvas.rotate'方法就可以不用计算角度了

//画刻度线
float degreeLength = 0f;
Paint paintDegree = new Paint();
paintDegree.setAntiAlias(true);
for(int i=0;i<60;i++){
  if(i % 5 == 0){
    paintDegree.setStrokeWidth(6);
    degreeLength = DEFAULT_LONG_DEGREE_LENGTH;
  }else{
    paintDegree.setStrokeWidth(3);
    degreeLength = DEFAULT_SHORT_DEGREE_LENGTH;
  }
  canvas.drawLine(getWidth()/2, Math.abs(getWidth()/2 - getHeight()/2), getWidth()/2, Math.abs(getWidth()/2 - getHeight()/2) + degreeLength, paintDegree);
  canvas.rotate(360/60, getWidth()/2, getHeight()/2);
}

3、画刻度上的数字

//刻度数字
int degressNumberSize = 30;
canvas.translate(getWidth() / 2, getHeight() / 2);
Paint paintDegreeNumber = new Paint();
paintDegreeNumber.setTextAlign(Paint.Align.CENTER);
paintDegreeNumber.setTextSize(degressNumberSize);
paintDegreeNumber.setFakeBoldText(true);
for(int i=0;i<12;i++){
  float[] temp = calculatePoint((i+1)*30, r - DEFAULT_LONG_DEGREE_LENGTH - degressNumberSize/2 - 15);
  canvas.drawText((i+1)+"", temp[2], temp[3] + degressNumberSize/2-6, paintDegreeNumber);
}

/**
 * 根据角度和长度计算线段的起点和终点的坐标
 * @param angle
 * @param length
 * @return
 */
private float[] calculatePoint(float angle, float length){
  float[] points = new float[4];
  if(angle <= 90f){
    points[0] = -(float) Math.sin(angle*Math.PI/180) * DEFAULT_POINT_BACK_LENGTH;
    points[1] = (float) Math.cos(angle*Math.PI/180) * DEFAULT_POINT_BACK_LENGTH;
    points[2] = (float) Math.sin(angle*Math.PI/180) * length;
    points[3] = -(float) Math.cos(angle*Math.PI/180) * length;
  }else if(angle <= 180f){
    points[0] = -(float) Math.cos((angle-90)*Math.PI/180) * DEFAULT_POINT_BACK_LENGTH;
    points[1] = -(float) Math.sin((angle-90)*Math.PI/180) * DEFAULT_POINT_BACK_LENGTH;
    points[2] = (float) Math.cos((angle-90)*Math.PI/180) * length;
    points[3] = (float) Math.sin((angle-90)*Math.PI/180) * length;
  }else if(angle <= 270f){
    points[0] = (float) Math.sin((angle-180)*Math.PI/180) * DEFAULT_POINT_BACK_LENGTH;
    points[1] = -(float) Math.cos((angle-180)*Math.PI/180) * DEFAULT_POINT_BACK_LENGTH;
    points[2] = -(float) Math.sin((angle-180)*Math.PI/180) * length;
    points[3] = (float) Math.cos((angle-180)*Math.PI/180) * length;
  }else if(angle <= 360f){
    points[0] = (float) Math.cos((angle-270)*Math.PI/180) * DEFAULT_POINT_BACK_LENGTH;
    points[1] = (float) Math.sin((angle-270)*Math.PI/180) * DEFAULT_POINT_BACK_LENGTH;
    points[2] = -(float) Math.cos((angle-270)*Math.PI/180) * length;
    points[3] = -(float) Math.sin((angle-270)*Math.PI/180) * length;
  }
  return points;
}

4、画指针

//画指针
Paint paintHour = new Paint();
paintHour.setAntiAlias(true);
paintHour.setStrokeWidth(15);
Paint paintMinute = new Paint();
paintMinute.setAntiAlias(true);
paintMinute.setStrokeWidth(10);
Paint paintSecond = new Paint();
paintSecond.setAntiAlias(true);
paintSecond.setStrokeWidth(5);
Calendar now = Calendar.getInstance();
float[] hourPoints = calculatePoint(now.get(Calendar.HOUR_OF_DAY)%12/12f*360, hourPointerLength);
canvas.drawLine(hourPoints[0], hourPoints[1], hourPoints[2], hourPoints[3], paintHour);
float[] minutePoints = calculatePoint(now.get(Calendar.MINUTE)/60f*360, minutePointerLength);
canvas.drawLine(minutePoints[0], minutePoints[1], minutePoints[2], minutePoints[3], paintMinute);
float[] secondPoints = calculatePoint(now.get(Calendar.SECOND)/60f*360, secondPointerLength);
canvas.drawLine(secondPoints[0], secondPoints[1], secondPoints[2], secondPoints[3], paintSecond);

5、画圆心

//画圆心
Paint paintCenter = new Paint();
paintCenter.setColor(Color.WHITE);
canvas.drawCircle(0, 0, 2, paintCenter);
最后只要启动一个无限循环的线程,每隔1秒针重绘一下View就能让指针动起来了
private Thread timeThread = new Thread() {
  @Override
  public void run() {
    try {
      while(true){
        updateHandler.sendEmptyMessage(0);
        Thread.sleep(1000);
      }
    } catch (InterruptedException e) {
      e.printStackTrace();
    }
  }
};

private Handler updateHandler = new Handler() {
  @Override
  public void handleMessage(Message msg) {
    invalidate();
  }
};

以上就是教大家如何利用Android画个时钟的详细步骤代码,希望对大家的学习Android软件编程有所帮助。

(0)

相关推荐

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

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

  • Android ActionBar制作时钟实例解析

    本文实例为大家分享了Android ActionBar制作时钟的具体代码,供大家参考,具体内容如下 1. MainActivity.java   package com.example.days19actionbar07custom; import com.example.days19actionbar07custom.R; import android.app.Activity; import android.os.Bundle; import android.view.Menu; impor

  • Android仿小米时钟效果

    我在一个[博客] android高仿小米时钟(使用Camera和Matrix实现3D效果)上面看到了小米时钟实现.特别感兴趣.就认真的看了一遍.并自己敲了一遍.下面说下我自己的理解和我的一些改进的地方效果真的特别棒就发布了自己的时钟应用. 先上图(电脑没有gif截图软件.大家凑合看.哪个软件好也可以给我推荐下) 话不多说,首先自定义控件XimiClockView继承view  并做一些初始化的操作 看到的漂亮时钟图片我自己画的效果图(以后妈妈再也不用担心我迟到了) public XimiCloc

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

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

  • 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 仿日历翻页、仿htc时钟翻页、数字翻页切换效果

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

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

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

  • Android通过Path实现搜索按钮和时钟复杂效果

    在Android中复杂的图形的绘制绝大多数是通过path来实现,比如绘制一条曲线,然后让一个物体随着这个曲线运动,比如搜索按钮,比如一个简单时钟的实现: 那么什么是path呢! 定义:path  就是路径,就是图形的路径的集合,它里边包含了路径里边的坐标点,等等的属性.我们可以获取到任意点的坐标,正切值. 那么要获取Path上边所有点的坐标还需要用到一个类,PathMeasure; PathMesure: PathMeasure是一个用来测量Path的类,主要有以下方法: 构造方法 公共方法 可

  • 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实现简单时钟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

随机推荐