hanyeah-安卓原生控件做时钟

03

2017
03

安卓原生控件做时钟

最近安卓开发中需要让一个图片旋转，需要做一个圆形的进度条。为了让测试不那么枯燥，做了一个时钟。

效果图

安卓时钟效果.png

时间的显示主要用到两个功能：1、获取系统时间；2、旋转指针。

主类代码如下：

package com.example.androidtest2;

import java.util.Calendar;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * @author 作者：hanyeah
 * @date 创建时间：2017-3-1 上午11:51:48 
 */
public class MainActivity extends Activity {

	private BiaopanView biaopan;
	private BiaopanView progressView;
	private ImageView shizhen;
	private ImageView fenzhen;
	private ImageView miaozhen;
	private float x;
	private float y;
	private TextView tv;
	public MainActivity() {
		// TODO Auto-generated constructor stub
	}
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		tv=(TextView)findViewById(R.id.tv);
		shizhen=(ImageView)findViewById(R.id.shizhen);
		fenzhen=(ImageView)findViewById(R.id.fenzhen);
		miaozhen=(ImageView)findViewById(R.id.miaozhen);
		biaopan=(BiaopanView)findViewById(R.id.biaopan);
		progressView=(BiaopanView)findViewById(R.id.biaopan);

		biaopan.setOnClickListener(new View.OnClickListener() {

			@SuppressLint("NewApi")
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub

				int w=v.getWidth();
				int h=v.getHeight();
				Log.d("hanyeah",String.format("w=%d,h=%d,x=%f,y=%f", w,h,x,y));

				float angle=(float) Math.atan2(y-h/2,x-w/2);
				tv.setText("角度："+angle*180/Math.PI);
			}
		});
		biaopan.setOnTouchListener(new View.OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				// TODO Auto-generated method stub
				x=event.getX();
				y=event.getY();
				return false;
			}
		});
		hd.sendEmptyMessageDelayed(1, 1);
	}
	private Handler hd=new Handler(){
		public void handleMessage(android.os.Message msg) {
			updateBiaopan();
			hd.sendEmptyMessageDelayed(1, 1000);
		};
	};
	private float angle=0;
	@SuppressLint("NewApi")
	private void updateBiaopan(){
		Calendar c = Calendar.getInstance();
		int hour=c.get(Calendar.HOUR);
		int minute=c.get(Calendar.MINUTE);
		int secend=c.get(Calendar.SECOND);
		shizhen.setRotation(hour*30+minute*30f/60f);
		fenzhen.setRotation(minute*6);
		miaozhen.setRotation(secend*6);
		progressView.progress=secend*6;
		progressView.invalidate();
	}
}

还多测试了一个功能，点击表盘，显示点击位置与表盘中心连线的角度（相对于哪个轴不重要，按需求映射就行）。

指针旋转实现起来太简单了，一个setRotation方法就可以了。具体实现起来可能需要一些技巧，有问题的话可以下载附件。

圆形的进度条（蓝色）是重写表盘的draw方法来实现的。

代码如下：

package com.example.androidtest2;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;

/**
 * @author 作者：hanyeah
 * @date 创建时间：2017-3-1 下午4:43:09 
 */
public class BiaopanView extends ImageView {

	public BiaopanView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public BiaopanView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	public BiaopanView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
	}
	@Override
	public void draw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.draw(canvas);
		//画笔。
		Paint p = new Paint();
		p.setAntiAlias(true);//平滑
        p.setColor(Color.BLUE);// 设置红色 
        p.setStyle(Paint.Style.STROKE);//画线，不填充
        p.setStrokeWidth(10);//线的粗细
        //图片显示的宽高,根据布局计算，可能会变形
        int w=this.getMeasuredWidth();
        int h=this.getMeasuredHeight();
        //默认宽高，即图片的实际尺寸。
        int defaultW=661;
        int defaultH=618;
        float hw=defaultW/2;
        float hh=defaultH/2;
        //针的直径
        int zhenW=536;
        int hZhenW=zhenW/2;
        int zhenH=526;
        int hZhenH=zhenH/2;
        
        canvas.save();
		canvas.scale(w/(float)defaultW, h/(float)defaultH);
        RectF oval1=new RectF(hw-hZhenW,hh-hZhenH,hw+hZhenW,hh+hZhenH);
        canvas.drawArc(oval1, -90, progress, false, p);//小弧形  
        canvas.restore();
	}
	public float progress=0f;

}

这里直接在显示表盘的类里面画进度条，而不是进度条自己占用一个显示控件，这样是有好处的。

具体可以参考源码，现在看来，实现的还是比较巧妙的。自己体会吧。

不一定要继承ImageView，继承View也行，由于我在xml布局中设置了src属性，所以用的ImageView。

源码打包下载