カスタムView_PercentagerRing

>       View              ，               。
    
http://blog.csdn.net/wingichoy/article/details/50334595
       

実装手順1、まず大きな円を描く2、扇形を描く3、最後に小さな円を覆う

//    View
public class PercentagerRing extends View{
    //        
     public PercentagerRing(Context context) {
        this(context,null);
    }

    public PercentagerRing(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PercentagerRing(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }
}
             

 //   Paint
    private Paint bigCirclePaint;
    private int bigCircleColor;
    //   Paint
    private Paint smallCirclePaint;
    private int smallCircleColor;
    //   Paint
    private Paint arcPaint;
    private int arcColor;
    //   Paint
    private Paint textPaint;
    private int testSize;
    //       
    private int nowPercent;
    //     
    private int percent;

    private int width;

    private int height;
    //  
    private int radius;

    //  
    private int angle;

                   styles              

     "PercentagerRing">
        "bigCircleColor" format="color"/>
        "smallCircleColor" format="color"/>
        "arcColor" format="color"/>
        "testSize" format="integer"/>
        "percent" format="integer"/>
    

3つのパラメータの構築方法でカスタム属性を取得

 public PercentagerRing(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.PercentagerRing,defStyleAttr,0);
            bigCircleColor = typedArray.getColor(R.styleable.PercentagerRing_bigCircleColor, Color.BLACK);
            smallCircleColor = typedArray.getColor(R.styleable.PercentagerRing_smallCircleColor,Color.BLACK);
            arcColor = typedArray.getColor(R.styleable.PercentagerRing_arcColor,Color.GRAY);
            testSize = typedArray.getInt(R.styleable.PercentagerRing_testSize, 40);
            percent = typedArray.getInt(R.styleable.PercentagerRing_percent,0);

            //    
            init();
        }

ブラシの設定

 private void init() {
        bigCirclePaint = new Paint();
        bigCirclePaint.setAntiAlias(true);
        bigCirclePaint.setColor(bigCircleColor);
        bigCirclePaint.setStyle(Paint.Style.FILL);

        smallCirclePaint = new Paint();
        smallCirclePaint.setAntiAlias(true);
        smallCirclePaint.setColor(smallCircleColor);
        smallCirclePaint.setStyle(Paint.Style.FILL);

        arcPaint = new Paint();
        arcPaint.setAntiAlias(true);
        arcPaint.setColor(arcColor);
        arcPaint.setStyle(Paint.Style.FILL);

        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(testSize);
        textPaint.setColor(Color.WHITE);
    }

書き換えonMeasure()

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureWidth(widthMeasureSpec);
        height = MeasureHeight(heightMeasureSpec);

        //              
        radius = Math.min(width,height)/2;

        setMeasuredDimension(width, height);
    }

    private int MeasureHeight(int heightMeasureSpec) {
        int result;
        int size = MeasureSpec.getSize(heightMeasureSpec);
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        if(mode == MeasureSpec.EXACTLY){
            result = size;
        }else{
            result = 200;
            if(mode==MeasureSpec.AT_MOST){
                result = Math.min(size,result);
            }
        }
        return result;
    }
    private int MeasureWidth(int widthMeasureSpec) {
        int result;
        int size = MeasureSpec.getSize(widthMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        if(mode == MeasureSpec.EXACTLY){
            result = size;
        }else{
            result = 200;
            if(mode==MeasureSpec.AT_MOST){
                result = Math.min(size,result);
            }
        }
        return result;
    }

書き換えonDraw()メソッド

@Override
    protected void onDraw(Canvas canvas) {

        //  360°       100          3.6°
        angle = (int) (percent*3.6);
        //  
        canvas.drawCircle(width / 2, height / 2, radius, bigCirclePaint);
        //  
        RectF rectF = new RectF(0,0,width,height);
        canvas.drawArc(rectF, 270, angle, true, arcPaint);
        //  
        canvas.drawCircle(width / 2, height / 2, radius*9/10, smallCirclePaint);

        //  
        String text = percent+"%";

        float textLength = textPaint.measureText(text);
        canvas.drawText(text,width/2-textLength/2,height/2,textPaint);

        super.onDraw(canvas);
    }

今はこんな感じ

クリックして描画効果を追加

`public void setPercent(int percent){
        if(percent>100){
            throw new IllegalArgumentException("percent must less than 100!");
        }
        setCurrentPercent(percent);
    }

    public void setCurrentPercent(final int currentPercent) {
        percent = currentPercent;
        new Thread(new Runnable() {
            @Override
            public void run() {
                for(int i =0;i<=percent;i++){
                    try {
                        Thread.sleep(10);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    nowPercent =i;
                    PercentagerRing.this.postInvalidate();
                }
            }
        }).start();
    }`

Activityにボタンを追加して効果を表示

 Button button = (Button) findViewById(R.id.button);
        percentagerRing = (PercentagerRing) findViewById(R.id.percent_ring);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                percentagerRing.setPercent(99);
            }
        });