android自定义View之(六)------高仿华为荣耀3C的圆形刻度比例图(ShowPercentView)

     为什么写这篇文章：   

     显示当前的容量所占的比例，表现当前计划的进度，一般都会采用百分比的方式，而图形显示，以其一目了然的直观性和赏心悦目的美观形成为了我们的当然的首选。

     在图形表示百分比的方法中，我们有用画圆的圆形进度条的方法<<android自定义View之(二)------简单进度条显示样例篇>>，也有用画弧形的进度条的方法<<android自定义View之(三)------视频音量调控样例>>，今天看到华为荣耀3C的一个界面：

   个人觉得这个表示比例的圆形刻度圆有一种小清新的感觉，也觉得不难，所以就把他实现了：

效果图：

详细代码：

(1)定义属性(res/values/attr.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>  
    <declare-styleable name="ShowPercentView">
        <attr name="percent" format="integer"></attr>
        <attr name="allLineColor" format="color" />  
        <attr name="percentLineColorLow" format="color" />  
        <attr name="percentLineColorHight" format="color" /> 
    </declare-styleable>
</resources>

(2)自定义圆形刻度比例图(ShowPercentView)

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class ShowPercentView extends View{
	
	private Paint percentPaint;
	
	private Paint textPaint;
	private int textSize = 30;
	
	private int percent;
	private int allLineColor;
	private int percentLineColorLow;
	private int percentLineColorHight;

	private int allLineWidth = 2;
	private int percentLineWidth = 4;
	private int lineHeight = 10;
	

	public ShowPercentView(Context context) {  
		super(context);  
		init(null, 0);  
	}  
  
	public ShowPercentView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        init(attrs, 0);  
    }  
  
    public ShowPercentView(Context context, AttributeSet attrs, int defStyle) {  
        super(context, attrs, defStyle);  
        init(attrs, defStyle);  
    }  

	private void init(AttributeSet attrs, int defStyle) {
		// TODO Auto-generated method stub
		final TypedArray a = getContext().obtainStyledAttributes(  
                attrs, R.styleable.ShowPercentView, defStyle, 0);   
		percent = a.getInt(R.styleable.ShowPercentView_percent, 0);
		allLineColor = a.getColor(R.styleable.ShowPercentView_allLineColor, Color.GRAY);  
		percentLineColorLow = a.getColor(R.styleable.ShowPercentView_percentLineColorLow, Color.GREEN);
		percentLineColorHight = a.getColor(R.styleable.ShowPercentView_percentLineColorHight, Color.RED);
		
        a.recycle();  
        
        percentPaint = new Paint();
        percentPaint.setAntiAlias(true);
        
        
        
        textPaint = new Paint();  
        textPaint.setTextSize(textSize);  
        textPaint.setAntiAlias(true); 
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		
		int width = getMeasuredWidth();  
        int height = getMeasuredHeight();  
        int pointX =  width/2;  
        int pointY = height/2; 		
		
		float textWidth = textPaint.measureText(percent + "%");  
        if(percent < 50){  
            //textPaint.setColor(oxbf3800);  
            textPaint.setColor(Color.BLACK);  
        }else{  
            //textPaint.setColor(new Color(ox6ec705));  
            textPaint.setColor(Color.RED);  
        }  
        canvas.drawText(percent+"%",pointX - textWidth/2,pointY + textPaint.getTextSize()/2 ,textPaint);  
		
        
        percentPaint.setColor(allLineColor);
        percentPaint.setStrokeWidth(allLineWidth);
          
        float degrees = (float) (320.0/100);
        
    	canvas.save();	
    	canvas.translate(0,pointY); 
    	canvas.rotate(-70, pointX, 0);  	
        for(int i = 0;i<100;i++){      
        	canvas.drawLine(0, 0, lineHeight, 0, percentPaint);
        	canvas.rotate(degrees, pointX, 0);       	      	
        }    
        canvas.restore(); 
		
        if(percent<60){
        	percentPaint.setColor(percentLineColorLow);
        }else{
        	percentPaint.setColor(percentLineColorHight);
        }
        
        percentPaint.setStrokeWidth(percentLineWidth);
    	canvas.save();	
    	canvas.translate(0,pointY); 
    	canvas.rotate(-70, pointX, 0);  	
        for(int i = 0;i<percent;i++){      
        	canvas.drawLine(0, 0, lineHeight, 0, percentPaint);
        	canvas.rotate(degrees, pointX, 0);       	      	
        }    
        canvas.restore(); 
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		//super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
        int width = MeasureSpec.getSize(widthMeasureSpec);  
        int height = MeasureSpec.getSize(heightMeasureSpec);  
        int d = (width >= height) ? height : width;  
        setMeasuredDimension(d,d);  
	}

	public void setPercent(int percent) {
		// TODO Auto-generated method stub
		this.percent = percent;
		postInvalidate();
	}	
}

(3)activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <com.example.showpercentview.ShowPercentView  
        android:layout_width="200dp"  
        android:layout_height="200dp"  
        android:id="@+id/myShowPercentView"  
        android:background="#fdda6f"  
        app:percent="82"
        app:allLineColor="#ebebeb"
        app:percentLineColorLow="#8acb55"
        app:percentLineColorHight="#8acb55"
    /> 
    
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="set_percent_40"  
        android:id="@+id/set_percent_40"  
        android:layout_below="@+id/myShowPercentView"  
        android:layout_alignParentLeft="true"  
        android:layout_alignParentStart="true" />  
        
 	<Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="set_percent_80"  
        android:id="@+id/set_percent_80" 
        android:layout_below="@+id/set_percent_40"  
        android:layout_alignParentLeft="true"  
        android:layout_alignParentStart="true" />  
               
</RelativeLayout>

(4)MainActivity.java

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.app.Activity;

public class MainActivity extends Activity implements OnClickListener {

	private ShowPercentView myShowPercentView;  
    private Button set_percent_40;  
    private Button set_percent_80;  
	    
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		init();
	}

	private void init() {
		// TODO Auto-generated method stub
		myShowPercentView = (ShowPercentView) findViewById(R.id.myShowPercentView);  
		set_percent_40 = (Button) findViewById(R.id.set_percent_40);  
		set_percent_40.setOnClickListener(this);  
		set_percent_80 = (Button) findViewById(R.id.set_percent_80);  
		set_percent_80.setOnClickListener(this);  
	}

	@Override
	public void onClick(View view) {
		// TODO Auto-generated method stub
		 if(view == set_percent_40){  
			 myShowPercentView.setPercent(40);  
		 }else if(view == set_percent_80){  
			 myShowPercentView.setPercent(80);  
		 }  
	}
}

源码下载：

http://download.csdn.net/detail/hfreeman2008/8413975