自定义view学习系列之圆形进度条

</pre>工作后，人都变懒了。。。。<p></p><p><span style="font-size:18px">好久不更新博客了，最近工作中发现不记录一些常见问题或者是不做个学习记录的话，进步很小，于是今天又提起笔来写写博客吧。争取以后有机会就写写。</span></p><p><span style="font-size:18px">还是自定义view吧，之前公司有个需求是圆形评分，界面类似这样，把中间的想象成10分。这种界面很常见，很简单(当然要做的扩展性和适用性很好的话也不容易)。</span></p><p>                                                                                                                <img src="https://img-blog.csdn.net/20150925235432388?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-size:18px" /></p><p><span style="font-size:18px">这种界面不用多想了，就是画弧了，根据评分大小，计算她的比例然后画弧度就行了。</span></p><p><span style="font-size:18px">当然今天我们不做这个，我们做个更常见的百分比进度条。做到末尾的时候发现csdn上也有一篇博客跟这个类似，当然人家讲的的比我的好一些，但是原理是一样的。略有参考。</span></p><p><span style="font-size:18px"></span></p><p><span style="font-size:18px">自定义view的过程和自定义属性就不贴了。这个大家应该都知道，直接贴代码吧</span></p><pre name="code" class="java">package com.example.administrator.helloword;

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

import java.net.ConnectException;

/**
 * Created by lyd on 2015/9/5 0005.
 */
public class CustomCirlce extends View {

    private String mText = null;
    private float mPercent = 0;
    private int i = 0;

    private Paint mPercentPaint;//百分比
    private Paint mOutCircle;//外层大圆
    private Paint mInArc;//圆弧
    private Canvas mCanvas;

    public CustomCirlce(Context context) {
        this(context, null);
    }

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

    public CustomCirlce(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setWillNotDraw(false);
        //外层大圆
        mOutCircle = new Paint();
        mOutCircle = new Paint();
        mOutCircle.setColor(Color.parseColor("#E9E9E9"));
        mOutCircle.setStyle(Paint.Style.STROKE);
        mOutCircle.setAntiAlias(true);
        mOutCircle.setStrokeWidth(20.0f);

        //圆弧
        mInArc = new Paint();
        mInArc = new Paint();
        mInArc.setAntiAlias(true);
        mInArc.setColor(Color.parseColor("#6BCFA2"));
        mInArc.setStyle(Paint.Style.STROKE);
        mInArc.setStrokeWidth(20.0f);

        //百分比
        mPercentPaint = new Paint();
        mPercentPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPercentPaint.setAntiAlias(true);
        mPercentPaint.setColor(Color.BLUE);
        mPercentPaint.setStrokeWidth(1.0f);
        mPercentPaint.setTextSize(70);
        mPercentPaint.setTextAlign(Paint.Align.CENTER);//设置文本水平居中
        init(context, attrs);

    }


    private void init(Context context,AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.CustomCirlce);
        int count = array.getIndexCount();
        for (int i = 0;i<count;i++)
        {
            int a  = array.getIndex(i);
            switch (a)
            {
                case  R.styleable.CustomCirlce_CirclePercent1:
                    mPercent =array.getInt(a,0);
                case R.styleable.CustomCirlce_CircleText1 :
                    mText = array.getString(a);
            }
        }

        array.recycle();
    }

    public void setCurrentText(int text) {
        this.mPercent = text;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        i++;
        Log.i("===","ondraw"+i);
        super.onDraw(canvas);
        drawCircle(canvas);
        drawArc(canvas);
        drawText(canvas);
    }

    private void drawCircle(Canvas canvas) {
        RectF rectF = new RectF(10,100,300,390);
        canvas.drawArc(rectF, 0, 360, false, mOutCircle);
    }

    private void drawArc(Canvas canvas) {

        RectF rectF = new RectF(10,100,300,390);
        canvas.drawArc(rectF, -90,(float)(mPercent*3.6f),false,mInArc);

    }

    private void drawText(Canvas canvas) {
        Log.i("===",mPercent+"");
        canvas.drawText(mPercent+"%",0,(mPercent+"%").length(),150,250,mPercentPaint);

    }

}

主mainActivity函数

public class MainActivity extends ActionBarActivity{
    private CustomCirlce customCirlce;
    private int mCurrent = 0;
    private Button mButton;
    private android.os.Handler mHandler = new android.os.Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what)
            {
                case 0:
                    mCurrent++;
                    if (mCurrent<=100){
                        customCirlce.setCurrentText(mCurrent);
                        sendEmptyMessageDelayed(0, 1000);
                    }
                    break;
            }

        }
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        customCirlce = (CustomCirlce) findViewById(R.id.myprogress);
        Button button = (Button) findViewById(R.id.button_start);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mHandler.sendEmptyMessageDelayed(0, 1000);

            }
        });

    }

}

布局文件就不写了。很简单。

不过这里我要说一个bug，一开始的时候我发现ondraw函数只执行一次，上网查了很多资料，有的说是因为安卓4.1之后默认开启了硬件加速，这样的话就算你调用invalidate函数，也不会再执行ondraw函数，解决办法是在mainfest文件中添加

android:hardwareAccelerated="false" 这条命令，但是我添加后没用。。。

后来参考了一下另一篇博客，发现原来是自定义的view引用错了，我是直接new的，而不是通过findViewById找到的，怪不得不能更新。以后要多多注意。

综上，上效果图吧：