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>




大功完成了,當然了,唯一比較糾結的地方就是兩個顏色何時切換,如何切換,我採用上面的辦法,你也可以自己想想怎麼實現。




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章