Android custom View (6) ------ high imitation Huawei honor 3C circular scale diagram (ShowPercentView), android high imitation WeChat

Android custom View (6) ------ high imitation Huawei honor 3C circular scale diagram (ShowPercentView), android high imitation
Why write this article:

Display the proportion of the current capacity to show the progress of the current plan. The percentage is usually used, and the graphic display, with its clear intuition and pleasing appearance, it is our first choice.

In the percentage representation method, we can use the circular progress bar to draw a circle <android custom View (ii) ------ simple progress bar display example>, you can also use this method to draw an arc progress bar. <android custom View (3) ------ video volume control example> today, we see an interface for Huawei honor 3C:

I personally think that the circular scale circle that represents the proportion has a small fresh feeling, and it is not difficult, so I realized it:

:

Code details: (1) define attributes (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 stub if(view == set_percent_40){   myShowPercentView.setPercent(40);   }else if(view == set_percent_80){   myShowPercentView.setPercent(80);   }  }}

Download source code:

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