显示当前的容量所占的比例，表现当前计划的进度，一般都会采用百分比的方式，而图形显示，以其一目了然的直观性和赏心悦目的美观形成为了我们的当然的首选。
在图形表示百分比的方法中，我们有用画圆的圆形进度条的方法<<android自定义View之(二)------简单进度条显示样例篇>>，也有用画弧形的进度条的方法<<android自定义View之(三)------视频音量调控样例>>，今天看到华为荣耀3C的一个界面：
个人觉得这个表示比例的圆形刻度圆有一种小清新的感觉，也觉得不难，所以就把他实现了：
<?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>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();
}
}<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>
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);
}
}
}源码下载：
android自定义View之(六)------高仿华为荣耀3C的圆形刻度比例图(ShowPercentView)
原文地址：http://blog.csdn.net/hfreeman2008/article/details/43369961
