Android自定义View自定义圆形Dialog

还是对鸿洋老师博客的温习，实现了一个自定义的圆形的Dialog，东西很简单，还是跟之前的很像，就不说了，直接上代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="oneColor" format="color" />
    <attr name="twoColor" format="color" />
    <attr name="circleWidth" format="dimension" />
    <attr name="speed" format="integer" />

    <declare-styleable name="DialogCustom" >
        <attr name="oneColor" />
        <attr name="twoColor" />
        <attr name="circleWidth" />
        <attr name="speed" />
    </declare-styleable>
</resources>

自定义属性 第一个圆的颜色，第二个圆的颜色，圆形的宽度，绘制速度（后面用来延迟，所以是越小越快）

package com.example.customdialog.view;

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.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.example.customdialog.R;

/**
 * Created by aotuman on 2016/7/22.
 */
public class DialogCustom extends View {
    private int onrColor;

    private int twoColor;

    private int speed;

    private int circleWidth;

    private Paint mPaint;

    private int mProgress;

    public Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            mProgress++;
            if(mProgress >= 720){
                mProgress = 0;
            }
            postInvalidate();
            handler.sendEmptyMessageDelayed(0,speed);
        }
    };
    public DialogCustom(Context context) {
        this(context, null);
    }

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

    public DialogCustom(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DialogCustom, defStyleAttr, 0);
        int count = typedArray.getIndexCount();
        for (int i = 0; i < count; i++) {
            int content = typedArray.getIndex(i);
            switch (content) {
                case R.styleable.DialogCustom_circleWidth:
                    circleWidth = typedArray.getDimensionPixelSize(content, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.DialogCustom_oneColor:
                    onrColor = typedArray.getColor(content, Color.GREEN);
                    break;
                case R.styleable.DialogCustom_twoColor:
                    twoColor = typedArray.getColor(content, Color.BLUE);
                    break;
                case R.styleable.DialogCustom_speed:
                    speed = typedArray.getInt(content, 20);
                    break;
            }
        }

        typedArray.recycle();
        mPaint = new Paint();
        // 绘图线程
        handler.sendEmptyMessageDelayed(0,speed);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        int centre = getWidth() / 2; // 获取圆心的x坐标
        int radius = centre - circleWidth / 2;// 半径
        mPaint.setStrokeWidth(circleWidth); // 设置圆环的宽度
        mPaint.setAntiAlias(true); // 消除锯齿
        mPaint.setStyle(Paint.Style.STROKE); // 设置空心
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限

        //两个圆都绘制完是一个流程，0~360绘制第一个圆，361~720绘制第二个圆
        if (mProgress <= 360) {// 第一颜色的圈完整，第二颜色跑
            mPaint.setColor(onrColor); // 设置圆环的颜色
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
            mPaint.setColor(twoColor); // 设置圆环的颜色
            canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
        } else {
            mPaint.setColor(twoColor); // 设置圆环的颜色
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
            mPaint.setColor(onrColor); // 设置圆环的颜色
            canvas.drawArc(oval, -90, mProgress - 360, false, mPaint); // 根据进度画圆弧
        }

    }
}

一上来还是获取属性的数值，绘制部分也有注释，很详细
下面我们来看一下绘制进度的代码

 public Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            mProgress++;
            if(mProgress >= 720){
                mProgress = 0;
            }
            postInvalidate();
            handler.sendEmptyMessageDelayed(0,speed);
        }
    };

我利用的是Handle，把我们设置的速度作为变化绘制角度的参数，从而来改变绘制速度，也很简单吧。
最后是布局和效果图：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:zxf="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.example.customdialog.view.DialogCustom
        android:layout_width="80dp"
        android:layout_height="80dp"
        zxf:oneColor="@android:color/darker_gray"
        zxf:twoColor="@android:color/black"
        zxf:speed="10"
        zxf:circleWidth="5dp"/>

    <com.example.customdialog.view.DialogCustom
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        zxf:oneColor="@android:color/holo_green_dark"
        zxf:twoColor="@android:color/holo_red_dark"
        zxf:speed="5"
        zxf:circleWidth="30dp"/>
</LinearLayout>

最后又疑问和意见的都可以在这里交流，大家也可以研究一下变速的绘制