需求：

類(lèi)似滴滴打車(chē)，呼叫車(chē)，但是司機(jī)還未接單，等待計(jì)時(shí)的自定義View

要達(dá)到的效果：

轉(zhuǎn)圈圈.jpeg

相關(guān)代碼：

1.attrs.xml(這個(gè)文件里放的是自定義view的屬性)

<?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"/>
    <attr name="textSize" format="dimension"/>
    <attr name="textColorFirst" format="color"/>
    <attr name="textColorSecond" format="color"/>

    <declare-styleable name="circle">
        <attr name="firstColor"/>
        <attr name="secondColor"/>
        <attr name="circleWidth"/>
        <attr name="speed"/>
        <attr name="textSize"/>
        <attr name="textColorFirst"/>
        <attr name="textColorSecond"/>
    </declare-styleable>
</resources>

2.自定義的View 我給它起名叫CircleView（反正就是個(gè)圓）

package weekimwee.cn.circleviewdemo;

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.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import java.math.BigDecimal;
import java.text.SimpleDateFormat;

/**
 * Created by Wee Kim Wee on 2017/10/23.
 */

public class CircleView extends View {
    private int firstColor;
    private int secondColor;
    private int circleWidth;
    private int speed;
    private int textSize;
    private float progress;
    private boolean isNext;
    private String bigCircleText;
    private int bigCircleTextColor;
    private int time;
    private DrawThread drawThread;
    private SimpleDateFormat formatter = new SimpleDateFormat("mm分ss秒");
    private final String LOADING ="已等待";
    private Paint paint;
    public CircleView(Context context) {
        this(context,null);
    }

    public CircleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.circle, defStyleAttr, 0);
        int n = a.getIndexCount();
        for(int i = 0; i < n; i++){
            int attr = a.getIndex(i);
            switch (attr){
                case R.styleable.circle_firstColor:
                    firstColor = a.getColor(attr, Color.GRAY);
                    break;
                case R.styleable.circle_secondColor:
                    secondColor = a.getColor(attr,Color.GRAY);
                    break;
                case R.styleable.circle_circleWidth:
                    circleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.circle_speed:
                    speed=a.getInt(attr, 20);
                    break;
                case R.styleable.circle_textSize:
                    textSize =a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.circle_textColorFirst:
                    bigCircleTextColor = a.getColor(attr,Color.BLACK);
                    break;
            }
        }
        a.recycle();
        bigCircleText = "00分00秒";

        paint = new Paint();
        drawThread = new DrawThread();
        drawThread.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //大圓
        int centre = getWidth() / 2; // 獲取圓心的x坐標(biāo)
        int radius = (centre - circleWidth / 2)-25;// 半徑
        paint.setStrokeWidth(circleWidth); // 設(shè)置圓環(huán)的寬度
        paint.setAntiAlias(true); // 消除鋸齒
        paint.setStyle(Paint.Style.STROKE); // 設(shè)置空心
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限

        //跟著跑的小圓
        float h = (float) (2*( Math.PI / 360) * progress);
        float x = (float) ( radius+25+Math.sin(h) * radius);
        float y = (float) (radius+25-Math.cos(h) * radius);
        //在180度位置上的圓
        //float hc = (float) (2*( Math.PI / 360) * 180);
        //float xc = (float) ( radius+25+Math.sin(hc) * radius);
        //float yc = (float) (radius+25-Math.cos(hc) * radius);

        //大圓邊框繪制顏色
        if (!isNext) {// 第一顏色的圈完整，第二顏色跑
            paint.setColor(firstColor); // 設(shè)置圓環(huán)的顏色
            canvas.drawCircle(centre, centre, radius, paint); // 畫(huà)出圓環(huán)
            paint.setColor(secondColor); // 設(shè)置圓環(huán)的顏色
            canvas.drawArc(oval, -90, progress, false, paint); // 根據(jù)進(jìn)度畫(huà)圓弧

            paint.setColor(secondColor);
            paint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(x,y,10,paint);
            //paint.setColor(firstColor);
            //paint.setStyle(Paint.Style.FILL);
            //canvas.drawCircle(xc,yc,10,paint);
        } else {
            paint.setColor(secondColor); // 設(shè)置圓環(huán)的顏色
            canvas.drawCircle(centre, centre, radius, paint); // 畫(huà)出圓環(huán)
            paint.setColor(firstColor); // 設(shè)置圓環(huán)的顏色
            canvas.drawArc(oval, -90, progress, false, paint); // 根據(jù)進(jìn)度畫(huà)圓弧

            paint.setColor(firstColor);
            paint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(x,y,8,paint);
            //paint.setColor(secondColor);
            //paint.setStyle(Paint.Style.FILL);
            //canvas.drawCircle(xc,yc,10,paint);
        }


        paint.setTextSize(textSize);
        //已等待
        float loadingTextWidth = paint.measureText(LOADING);
        paint.setColor(Color.GRAY);
        paint.setStrokeWidth(1);
        canvas.drawText(LOADING,centre-loadingTextWidth/2,centre-textSize,paint);
        //幾分幾秒
        float bigCircleTextWidth = paint.measureText(bigCircleText);
        paint.setColor(bigCircleTextColor);
        canvas.drawText(bigCircleText, centre - bigCircleTextWidth / 2, centre + textSize , paint);
    }

    public void stop(){
        drawThread.close();
    }

    class DrawThread extends Thread {

        private boolean isRun = true;

        @Override
        public void run() {
            while (isRun) {
                BigDecimal b1 = new BigDecimal(Float.toString(progress));
                BigDecimal b2 = new BigDecimal(Float.toString(0.3f));
                progress = b1.add(b2).floatValue();
                if (progress == 360) {
                    progress = 0;
                    if (!isNext)
                        isNext = true;
                    else
                        isNext = false;
                }
                time = time+speed;
                postInvalidate();
                bigCircleText = formatter.format(time);
                try {
                    Thread.sleep(speed);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }

        public void close() {
            isRun = false;
        }
    }
}

3.activity_main.xml布局中使用上述View

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="weekimwee.cn.circleviewdemo.MainActivity">

    <TextView
        android:layout_alignParentTop="true"
        android:padding="20dp"
        android:id="@+id/helloworld"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <weekimwee.cn.circleviewdemo.CircleView
        android:id="@+id/view"
        android:layout_centerInParent="true"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:firstColor="#ff4500"
        app:secondColor="#d3d3d3"
        app:circleWidth="2dp"
        app:speed="25"
        app:textSize="20sp"
        app:textColorFirst ="#ff4500"
        app:textColorSecond="#d3d3d3"
        />
</RelativeLayout>

4.MainActivity.java中使用View開(kāi)始計(jì)時(shí)

package weekimwee.cn.circleviewdemo

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        helloworld.setOnClickListener {
            view.stop()
        }
    }
}

實(shí)現(xiàn)思路：

必要條件：

• 空心大圓，兩種顏色
• 實(shí)心的小圓，也是兩種顏色
• 計(jì)時(shí)線程，30秒小圓要繞著大圓走一圈并更換顏色，大圓中間的text顯示計(jì)時(shí)

具體代碼中的實(shí)現(xiàn)：

• 在構(gòu)造方法中把屬性獲取下來(lái)
• 計(jì)時(shí)的線程開(kāi)始啟動(dòng)，線程中的邏輯：
  360度的大圓，每25毫秒轉(zhuǎn)0.3f度，轉(zhuǎn)1200次剛好轉(zhuǎn)完，剛好30秒（因?yàn)槲覜](méi)有用動(dòng)畫(huà)，直接是在View中重繪的，如果是3度這樣的，會(huì)顯的一卡一卡的不平滑）
• onDraw方法：
  （1）先畫(huà)大圓（大圓位置是固定的）
  （2）計(jì)算小圓的位置（每次重繪角度已經(jīng)變了，所以要重新計(jì)算小圓的位置）
  （3）大圓邊框繪制顏色，以及繪制小圓（小圓顏色與大圓邊框一致）
  （4）繪制大圓中間的字
• stop方法
  這個(gè)方法供外部調(diào)用停止計(jì)時(shí)線程，例如呼叫到車(chē)了，這個(gè)頁(yè)面finish了之類(lèi)的

以上是這個(gè)呼叫車(chē)計(jì)時(shí)等待View的筆記，demo在這里在這里！