android 等級信號狀態標識View繪制

1、前言

等級信號狀態的View在現在的Android系統中非常的常見，比如手機右上角的電池狀態的圖標就非常的經典，有幾種狀態，到了快沒電的時候有些還會閃爍提示用戶充電；還有的就是一些地圖App的GPS信號強度的提示，Wifi信號強度的也有一些，反正應用場景大概就是這樣。

2、實現目標效果圖

廢話別說這麼多，直接上干貨看圖說話

為何動態圖動不起來了~_~!<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGltZyBzcmM9"/uploadfile/Collfiles/20140518/201405180927524.png" alt="\">

我這個實現的是4種狀態的View

1、沒有中間顯示條的表示空狀態

2、有一個紅色小圓信號低的狀態

3、有一個黃色橢圓的表示一般狀態

4、充滿綠條的表示良好的狀態

在這個View種只給出三個等級的設置，當設置為一等級時，也就是顯示只有一個紅色的View，然後這個紅色的小球隔一段時間閃一次，提示用戶。其他等級就是一個簡單的繪圖顯示。

3、實現思路

其實實現過程非常簡單，只要簡單的繪圖就行了，畫布類的canvas.drawRoundRect方法可以畫圓角的長方形，所以可以用這個方法畫出白色背景框，然後在繪制兩個，一個黃色的和綠色的，只要控制一下大小和填充模式。紅色的用一個canvas.drawCircle搞定，然後就剩下這個閃爍了，剛開始還不太好想怎麼搞，其實我們開一個線程在後台，然後隔一個時間更新一下View的狀態然後重新繪制一下就可以實現跳動的效果。

4、實現代碼

package com.spring.circlview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.os.AsyncTask;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

public class GpsSigntView extends View {

	public GpsSigntView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		init();
	}
	public GpsSigntView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}
	public GpsSigntView(Context context) {
		super(context);
		init();
	}

	private void init(){
		mPaint = new Paint();
		//畫筆平滑，不然邊緣不堪入目
		mPaint.setAntiAlias(true);
		mPaint.setColor(Color.WHITE);
		//設置畫筆不填充
		mPaint.setStyle(Style.STROKE);
		//描邊的大小
		mPaint.setStrokeWidth(strokeWidth);
//		mPaint.setAlpha(0x88);
		//三個繪制的矩形范圍
		rectF = new RectF(strokeWidth, strokeWidth, width-strokeWidth, height-strokeWidth);
		yellow = new RectF(strokeWidth*2,height*2/5, width-strokeWidth*2, height-strokeWidth*2);
		green = new RectF(strokeWidth*2,strokeWidth*2, width-strokeWidth*2, height-strokeWidth*2);
		new TwinkleTask().execute(0);
	}
	
	private Paint mPaint ;
	private RectF rectF ;
	private RectF yellow ;
	private RectF green;
	private int width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics());
	private int height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
	private float radus = width/2;
	private float strokeWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics());

	private int level1_color = Color.RED;
	
	private int level2_color = Color.YELLOW;
	
	private int level3_color = Color.GREEN;
	
	private int status = 1;
	
	
	public int getStatus() {
		return status;
	}
	public void setStatus(int status) {
		this.status = status;
	}
	int Interval = 500;
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		//重置View的大小
		setMeasuredDimension(width, height);
	}
	
	//心跳線程，用來定時更新狀態
	class TwinkleTask extends AsyncTask{
		@Override
		protected Integer doInBackground(Integer... params) {
			while (true) {
				try {
					Thread.sleep(Interval);
					//不是一級以下不更新
					if(status<=1)
						publishProgress(0);
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
			}
		}
		@Override
		protected void onProgressUpdate(Integer... values) {
			super.onProgressUpdate(values);
			//更新跳動狀態，然View在0級和一級之間切換
			status = (status+1)%2;
			invalidate();
		}
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		//黑背景不一定是必須的
		canvas.drawColor(Color.BLACK);
		mPaint.setColor(Color.WHITE);
		mPaint.setStyle(Style.STROKE);
		//最外層的白色圓角方形
		canvas.drawRoundRect(rectF, radus, radus, mPaint);
		//狀態繪制
		switch (status) {
		case 0:
		{
		}
		break;
		case 1:
		{
			mPaint.setColor(level1_color);
			//設置畫筆填充
			mPaint.setStyle(Style.FILL);
			//畫一個紅色小圓
			canvas.drawCircle(this.width/2, height-this.width/2, radus-strokeWidth*2, mPaint);
		}
		break;
		case 2:
		{
			mPaint.setColor(level2_color);
			//設置畫筆填充
			mPaint.setStyle(Style.FILL);
			//繪制黃色的方形
			canvas.drawRoundRect(yellow, radus, radus, mPaint);
		}
		break;
		case 3:
		{
			mPaint.setColor(level3_color);
			//設置畫筆填充
			mPaint.setStyle(Style.FILL);
			//填充綠色框
			canvas.drawRoundRect(green, radus, radus, mPaint);
		}
		break;
		}
	}
	
}

VIew的核心代碼就是上面，非常簡短，看看大家應該讀能懂了

layout代碼：

Main文件調用代碼

GpsSigntView level2 = (GpsSigntView) this.findViewById(R.id.level2);
		level2.setStatus(2);
		GpsSigntView level3 = (GpsSigntView) this.findViewById(R.id.level3);
		level3.setStatus(3);

項目文件就不用上傳了吧。直接貼View的代碼到項目種就可以用了。