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

转载自：http://blog.csdn.net/lmj623565791/article/details/24500107

一个朋友今天有这么个需求（下图），我觉得那自定义View来做还是很适合的，就做了下，顺便和大家分享下，对于自定义View多练没坏处么。如果你看了前两篇，那么这篇一定so easy 。

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

还是我们自定View的那几个步骤：

1、自定义View的属性

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

[ 3、重写onMesure ]

4、重写onDraw

-------------------------------------------------------------------------------------------------------------------

1、自定义属性：

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

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

3、直接重写onDraw，这不需要重写onMeasure

package zdd.customview.hongyangview.circle;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.RectF;import android.util.AttributeSet;import android.util.TypedValue;import android.view.View;import zdd.customview.R;/** * Created by ZDD on 2016/8/2. */public class CustomViewCircle extends View {    // 第一种圆环颜色    private int firstColor;    // 第二种圆环颜色    private int secondColor;    // 圆环宽度    private int circleWidth;    // 速度    private int speed;    // 画笔    private Paint paint;    // 当前进度    private int progress;    // 是否绘制下一个圆环    private boolean isNext = false;    public CustomViewCircle(Context context) {        this(context, null);    }    public CustomViewCircle(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CustomViewCircle(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        // 获取到自定义的属性        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomViewCircle);        // 获取自定义属性的数量        int typeCount = typedArray.getIndexCount();        for (int i = 0; i < typeCount; i++) {            int position = typedArray.getIndex(i);            switch (position) {                case R.styleable.CustomViewCircle_firstColor:                    firstColor = typedArray.getColor(position, 0);                    break;                case R.styleable.CustomViewCircle_secondColor:                    secondColor = typedArray.getColor(position, 0);                    break;                case R.styleable.CustomViewCircle_circleWidth:                    circleWidth = (int) typedArray.getDimension(position, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));                    break;                case R.styleable.CustomViewCircle_speed:                    speed = typedArray.getIndex(position);                    break;            }        }        typedArray.recycle();        // 初始化画笔        paint = new Paint();        new Thread() {            @Override            public void run() {                while (true) {                    progress++;                    if (progress == 360) {                        progress = 0;                        if (!isNext)                            isNext = true;                        else                            isNext = false;                    }                    // 重绘view                    postInvalidate();                    try {                        Thread.sleep(speed);                    } catch (InterruptedException e) {                        e.printStackTrace();                    }                }            }        }.start();    }    @Override    protected void onDraw(Canvas canvas) {        // 获取圆心的x坐标        int circle = getWidth() / 2;        // 获取半径        int radius = circle - circleWidth / 2;        // 设置圆环的宽度        paint.setStrokeWidth(circleWidth);        // 消除锯齿        paint.setAntiAlias(true);        // 设置空心样式        paint.setStyle(Paint.Style.STROKE);        // 定义圆弧的大小和界限 参数为上下左右的坐标值        RectF rectF = new RectF(circle - radius, circle - radius, circle + radius, circle + radius);        if (!isNext) {            paint.setColor(firstColor);            // 画出圆环 参数为圆环的x坐标y坐标半径和画笔            canvas.drawCircle(circle, circle, radius, paint);            // 设置圆环的颜色。根据进度绘制圆环            paint.setColor(secondColor);            // oval :指定圆弧的外轮廓矩形区域。            // startAngle: 圆弧起始角度，单位为度。            // sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。            // useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。            // paint: 绘制圆弧的画板属性，如颜色，是否填充等。            canvas.drawArc(rectF, -90, progress, false, paint);        } else {            paint.setColor(secondColor);            canvas.drawCircle(circle, circle, radius, paint);            paint.setColor(firstColor);            canvas.drawArc(rectF, -90, progress, false, paint);        }    }}

4.书写activity

package zdd.customview.hongyangview.circle;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v7.app.AppCompatActivity;import zdd.customview.R;/** * Created by ZDD on 2016/8/2. */public class CustomActivityThred extends AppCompatActivity {    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.three_activity_custom_circle);    }}

5.定义xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <zdd.customview.hongyangview.circle.CustomViewCircle        android:layout_width="100dp"        android:layout_height="100dp"        app:circleWidth="8px"        app:firstColor="#ff00ff"        app:secondColor="#ffff00"        app:speed="8" />    <zdd.customview.hongyangview.circle.CustomViewCircle        android:layout_width="200dp"        android:layout_height="200dp"        app:circleWidth="18px"        app:firstColor="#ff00ff"        app:secondColor="#ffff00"        app:speed="18" /></LinearLayout>

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