轉載自: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>