为什么写这篇文章：

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

在图形表示百分比的方法中，我们有用画圆的圆形进度条的方法<<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 stubfinal 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); }@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubsuper.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(); }@Overrideprotected 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 stubthis.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;  @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);init();}private void init() {// TODO Auto-generated method stubmyShowPercentView = (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);  }@Overridepublic void onClick(View view) {// TODO Auto-generated method stubif(view == set_percent_40){  myShowPercentView.setPercent(40);  }else if(view == set_percent_80){  myShowPercentView.setPercent(80);  }  }
}

源码下载：

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

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

小马哥-----高仿华为荣耀3c 6572芯片详细拆机主板图开真假机鉴别
此机外观与行货一模一样芯片不一样仔细对比高仿华为荣耀3c版本很多 w216 t7216 w858 s241等主板机型.外观一样,主板不一样,谨慎.
小马哥----高仿华为荣耀3c 6572拆机图刷机完美
高仿刷机遇到的高仿华为的版本很多注意看版本.
小马哥---高仿华为荣耀畅玩4x 实战详细拆机主板图与开机界面图展讯芯片 4.2系统版本
高仿华为荣耀畅玩4x版展讯8825芯片 4.2系统版本详细拆机主板图与开机界面图
精通Android自定义View(十六)invalidate方法和requestLayout方法
1 简述 requestLayout方法会导致View的onMeasure.onLayout.onDraw方法被调用:invalidate方法则只会导致View的onDraw方法被调用 2 reque ...
【Android自定义View实战】之仿去哪儿网App图片按压显示指纹并缩放效果TouchFingerImageView
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52986713 [DylanAndroid的csdn博客] 我们发现去哪儿网ap ...
【Android自定义View实战】之仿QQ运动步数圆弧及动画，Dylan计步中的控件StepArcView
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52936609 [DylanAndroid的csdn博客] 在之前的Androi ...
android 自定义特效,Android自定义View之高仿QQ健康
我们都知道自定义View一般有三种直接继承View.继承原有的控件对控件的进行修改.重新拼装组合,最后一种主要针对于ViewGroup.具体的怎么做不是本文的所涉及的内容(本文是基于第一种方式实现的) ...
android 高仿探探卡片滑动,Android自定义View仿探探卡片滑动效果
Android自定义View仿探探卡片滑动这种效果网上有很多人已经讲解了实现思路,大多都用的是RecyclerView来实现的,但是我们今天来换一种实现思路,只用一个自定义的ViewGroup来搞定这 ...
android 自定义取色器,【Android自定义View】仿Photoshop取色器ColorPicker(二)
ColorPicker 一款仿Photoshop取色器的Android版取色器. 前言上一篇已经简单介绍了ColorPicker的项目结构以及两种颜色空间,接下来我们详细解析一下ColorPicke ...

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