Android进阶学习1-使用Canvas自定义View(3)
圆环交替显示,效果图
1.attrs属性文件
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="mCircleWidth" format="dimension" /> <attr name="mCircleFirstColor" format="color" /> <attr name="mCircleSecondColor" format="color" /> <attr name="mCircleSpeed" format="integer" /> <declare-styleable name="CircleProgressView"> <attr name="mCircleWidth" /> <attr name="mCircleFirstColor" /> <attr name="mCircleSecondColor" /> <attr name="mCircleSpeed" /> </declare-styleable> </resources>
2.View代码+三个构造器+onDraw()方法,因为只有一个圆,所以圆的占据整个View测量出来的空间的,不想之前的有多中不同的元素,所以onMeasure()方法不用重写
View代码
public class CircleProgressView extends View {
private intmCircleWidth;
private intmCircleFirstColor;
private intmCircleSecondColor;
private intmSpeed;
/**
* 接收前面设置的属性
*/
private PaintmPaint;
private booleanisSecond= false;
/**
* 当前是否为第二圈
*/
private intmProgress= 0;
/**
* 进度
*/
}
2个构造器
public CircleProgressView(Context context) {
this(context, null);
}
public CircleProgressView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
主角构造器
public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyleAttr,
0);
int n = ta.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = ta.getIndex(i);
switch (attr) {
case R.styleable.CircleProgressView_mCircleWidth:
mCircleWidth = ta.getDimensionPixelSize(attr, (int) TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()));
break;
case R.styleable.CircleProgressView_mCircleFirstColor:
mCircleFirstColor = ta.getColor(attr, 0);
break;
case R.styleable.CircleProgressView_mCircleSecondColor:
mCircleSecondColor = ta.getColor(attr, 0);
break;
case R.styleable.CircleProgressView_mCircleSpeed:
mSpeed = ta.getInteger(attr, 20);
break;
}
}
ta.recycle();
mPaint = new Paint();
new Thread() {
@Override
public void run() {
while (true) {
mProgress++;
if (mProgress == 360) {
mProgress = 0;
isSecond = !isSecond;
/**
* 控制颜色的切换
*/
}
try {
Thread.sleep(mSpeed);//速度的设置
} catch (InterruptedException e) {
e.printStackTrace();
}
postInvalidate();//通过postInvalidate来调用onDraw方法重新绘画
}
}
}.start();
}
3.onDraw()方法:结合图片看
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int center = getWidth() / 2;//圆心位置,因为圆的半径一致,所以圆心只需确定一次
int radius = center - mCircleWidth;//确定圆的半径
mPaint.setStrokeWidth(mCircleWidth);//设置画笔粗细
mPaint.setStyle(Paint.Style.STROKE);//设置空心画笔,不使用填充
RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
/**
* 设置圆的边界
*/
if (isSecond) {
mPaint.setColor(mCircleSecondColor);
canvas.drawCircle(center, center, radius, mPaint);//画圆
mPaint.setColor(mCircleFirstColor);
canvas.drawArc(oval, 0, mProgress, false, mPaint);
/**
* 0是开始画的度数,参考直角坐标系
* 0是x的正半轴
* 90是y的负半轴
* 180是x的负半轴
* 270是y的正半轴
* 可用负数表示
*/
} else {
mPaint.setColor(mCircleFirstColor);
canvas.drawCircle(center, center, radius, mPaint);
mPaint.setColor(mCircleSecondColor);
canvas.drawArc(oval, 0, mProgress, false, mPaint);
}
}
整体代码
package com.example.androidtest;
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;
/**
* Created by August on 16/4/9.
*/
public class CircleProgressView extends View {
private intmCircleWidth;
private intmCircleFirstColor;
private intmCircleSecondColor;
private intmSpeed;
/**
* 接收前面设置的属性
*/
private PaintmPaint;
private booleanisSecond= false;
/**
* 当前是否为第二圈
*/
private intmProgress= 0;
/**
* 进度
*/
public CircleProgressView(Context context) {
this(context, null);
}
public CircleProgressView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyleAttr,
0);
int n = ta.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = ta.getIndex(i);
switch (attr) {
case R.styleable.CircleProgressView_mCircleWidth:
mCircleWidth = ta.getDimensionPixelSize(attr, (int) TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()));
break;
case R.styleable.CircleProgressView_mCircleFirstColor:
mCircleFirstColor = ta.getColor(attr, 0);
break;
case R.styleable.CircleProgressView_mCircleSecondColor:
mCircleSecondColor = ta.getColor(attr, 0);
break;
case R.styleable.CircleProgressView_mCircleSpeed:
mSpeed = ta.getInteger(attr, 20);
break;
}
}
ta.recycle();
mPaint = new Paint();
new Thread() {
@Override
public void run() {
while (true) {
mProgress++;
if (mProgress == 360) {
mProgress = 0;
isSecond = !isSecond;
/**
* 控制颜色的切换
*/
}
try {
Thread.sleep(mSpeed);//速度的设置
} catch (InterruptedException e) {
e.printStackTrace();
}
postInvalidate();//通过postInvalidate来调用onDraw方法重新绘画
}
}
}.start();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int center = getWidth() / 2;//圆心位置,因为圆的半径一致,所以圆心只需确定一次
int radius = center - mCircleWidth;//确定圆的半径
mPaint.setStrokeWidth(mCircleWidth);//设置画笔粗细
mPaint.setStyle(Paint.Style.STROKE);//设置空心画笔,不使用填充
RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
/**
* 设置圆的边界
*/
if (isSecond) {
mPaint.setColor(mCircleSecondColor);
canvas.drawCircle(center, center, radius, mPaint);//画圆
mPaint.setColor(mCircleFirstColor);
canvas.drawArc(oval, 0, mProgress, false, mPaint);
/**
* 0是开始画的度数,参考直角坐标系
* 0是x的正半轴
* 90是y的负半轴
* 180是x的负半轴
* 270是y的正半轴
* 可用负数表示
*/
} else {
mPaint.setColor(mCircleFirstColor);
canvas.drawCircle(center, center, radius, mPaint);
mPaint.setColor(mCircleSecondColor);
canvas.drawArc(oval, 0, mProgress, false, mPaint);
}
}
}
布局文件:
<?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/com.example.androidtest" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <com.example.androidtest.CircleProgressView android:layout_width="match_parent" android:layout_height="match_parent" app:mCircleFirstColor="#FF0000" app:mCircleSecondColor="#00FF00" app:mCircleSpeed="1" app:mCircleWidth="30dp" /> </LinearLayout>
