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

来源：互联网发布：php黑客技术网站源码编辑：程序博客网时间：2024/04/28 05:31

</pre>工作后，人都变懒了。。。。<p></p><p><span style="font-size:18px">好久不更新博客了，最近工作中发现不记录一些常见问题或者是不做个学习记录的话，进步很小，于是今天又提起笔来写写博客吧。争取以后有机会就写写。</span></p><p><span style="font-size:18px">还是自定义view吧，之前公司有个需求是圆形评分，界面类似这样，把中间的想象成10分。这种界面很常见，很简单(当然要做的扩展性和适用性很好的话也不容易)。</span></p><p>                                                                                                                <img src="http://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找到的，怪不得不能更新。以后要多多注意。

综上，上效果图吧：

0 0