Android 自定义View 圆环交替等待效果

来源：互联网发布：java源码阅读工具编辑：程序博客网时间：2024/05/17 22:54

转载至：http://blog.csdn.net/lmj623565791/article/details/24500107
并在此做了相关优化：

1、新开线程画线，离开页面时线程未关闭优化
2、mSpeed 值越大,速度越快
3、用户宽高若设置wrap_content时默认为200dp

我们还是来看一下我们要达到的效果图：

这里写图片描述

对于自定义View多练没坏处么。如果你看了前两篇，那么这篇一定so easy 。

分析了一下，大概有这几个属性，两个颜色，一个速度，一个圆环的宽度。

1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[ 3、重写onMesure ]
4、重写onDraw

1、自定义属性：

<?xml version="1.0" encoding="utf-8"?><resources><!--CustomProgressBar-->    <attr name="firstColor" format="color" />    <attr name="secondColor" format="color" />    <attr name="circleWidth" format="dimension" />    <attr name="speed" format="integer" />    <declare-styleable name="CustomProgressBar">        <attr name="firstColor" />        <attr name="secondColor" />        <attr name="circleWidth" />        <attr name="speed" />    </declare-styleable></resources>

2、在View的构造方法中获得我们自定义的属性

// 第一种颜色    int mFirstColor;    // 第二种颜色    int mSecondColor;    // 圆环宽度    int mCircleWidth;    // 速度    private int mSpeed;    // 当前进度    private int mProgress;    // 是否开始下一步    private boolean isNext;    // 画笔    private Paint mPaint;    // 用来开关线程    private boolean isContinue;    private int width;    /**     * 2、在View的构造方法中获得我们自定义的属性     */    public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        final TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyleAttr, 0);        int indexCount = typedArray.getIndexCount();        for (int i = 0; i < indexCount; i++) {            int arr = typedArray.getIndex(i);            switch (arr) {                case R.styleable.CustomProgressBar_firstColor://第一种颜色                    mFirstColor = typedArray.getColor(arr, Color.BLUE);                    break;                case R.styleable.CustomProgressBar_secondColor://第二种颜色                    mSecondColor = typedArray.getColor(arr, Color.BLUE);                    break;                case R.styleable.CustomProgressBar_circleWidth://圆环宽度                    mCircleWidth = typedArray.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));                    break;                case R.styleable.CustomProgressBar_speed://速度                    mSpeed = typedArray.getInt(arr, 20);                    break;            }        }        typedArray.recycle();        mPaint = new Paint();        isContinue = true;        // 绘图线程        new Thread() {            public void run() {                while (isContinue) {                    mProgress++;                    if (mProgress == 360) {                        mProgress = 0;                        isNext = !isNext;                    }                    Log.e("--------", "在执行..");                    postInvalidate();                    try {                        Thread.sleep(100 / mSpeed);// 这里优化了一下,值越大,速度越快                    } catch (InterruptedException e) {                        e.printStackTrace();                    }                }            }        }.start();    }

// 用来关闭线程    public void setContinue(boolean aContinue) {        isContinue = aContinue;    }

这里加载线程时，设置了一个变量 isContinue，用来控制是否加载，只需在对应的Activity生命周期onStop()里设置就好了：

@Override    protected void onStop() {        super.onStop();        customProgressBar01.setContinue(false);        customProgressBar02.setContinue(false);        customProgressBar03.setContinue(false);    }

3、重写onMesure

原文是没有重写onMesure的，不重写也是可以的，但为了防止用户误操作，设置会比较保险一些：

@Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);        if (modeWidth == MeasureSpec.EXACTLY) {            width = sizeWidth;        } else {//默认宽度200dp            width = (int) getContext().getResources().getDimension(R.dimen.width);        }        setMeasuredDimension(width, width);    }

4、重写onDraw

@Override    protected void onDraw(Canvas canvas) {//        super.onDraw(canvas);        // 这里使用width主要是用来防止用户使用wrap_content,会占满整个屏幕宽,默认为200dp        int center = width / 2;// 获取圆心的x坐标             int radius = center - mCircleWidth / 2;// b半径        mPaint.setStrokeWidth(mCircleWidth);//设置圆环的宽度        mPaint.setAntiAlias(true);//抗锯齿        mPaint.setStyle(Paint.Style.STROKE);//设置空心        // 用于定义圆弧的形状和大小的界限        RectF rectF = new RectF(center - radius, center - radius, center + radius, center + radius);        if (!isNext) {// 第一个颜色的圈跑完,第二个颜色跑            mPaint.setColor(mFirstColor);// 设置圆环的颜色            canvas.drawCircle(center, center, radius, mPaint);// 画圆环            mPaint.setColor(mSecondColor);// 设置圆环的颜色            canvas.drawArc(rectF, -90, mProgress, false, mPaint);// 根据进度画圆弧        } else {            mPaint.setColor(mSecondColor);            canvas.drawCircle(center, center, radius, mPaint);            mPaint.setColor(mFirstColor);            canvas.drawArc(rectF, -90, mProgress, false, mPaint);        }    }

5、最后布局文件引用

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:progressBar="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_custom_progress_bar"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center_horizontal"    android:orientation="vertical"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.example.jingbin.customview.activity.CustomProgressBarActivity">    <com.example.jingbin.customview.view.CustomProgressBar        android:id="@+id/custom_progress_bar_01"        android:layout_width="100dp"        android:layout_height="100dp"        progressBar:circleWidth="30dp"        progressBar:firstColor="@color/colorPrimary"        progressBar:secondColor="@color/colorAccent"        progressBar:speed="10" />    <com.example.jingbin.customview.view.CustomProgressBar        android:id="@+id/custom_progress_bar_02"        android:layout_width="150dp"        android:layout_height="150dp"        android:layout_margin="20dp"        progressBar:circleWidth="30dp"        progressBar:firstColor="@android:color/black"        progressBar:secondColor="@android:color/white"        progressBar:speed="12" />    <!--测试不是 EXACTLY的情况-->    <com.example.jingbin.customview.view.CustomProgressBar        android:id="@+id/custom_progress_bar_03"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        progressBar:circleWidth="30dp"        progressBar:firstColor="@android:color/holo_red_light"        progressBar:secondColor="@android:color/holo_blue_light"        progressBar:speed="15" /></LinearLayout>

大功完成了，当然了，唯一比较纠结的地方就是两个颜色何时切换，如何切换，我采用上面的办法，你也可以自己想想怎么实现。

源码点击这里查看

0 0