您的位置：首页 > 移动开发 > Android开发

Android自定义View实现圆环交替效果

2016-08-19 16:49 851 查看

下面请先看效果图：

看上去是不很炫的样子，它的实现上也不是很复杂，重点在与

onDraw()

方法的绘制。

首先是我们的attrs文件：

<?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="CustomView">
<attr name="firstColor" />
<attr name="secondColor" />
<attr name="circleWidth" />
<attr name="speed" />
</declare-styleable>
</resources>

接下来是我们重写

View

类的自定义

View

类：

public class MySelfCircleView extends View {
/*
* 第一圈颜色
*/
int firstColor;
/*
* 第二圈颜色
*/
int secondColor;
/*
* 圆的宽度
*/
int circleWidth;
/*
* 速率
*/
int speed;
/*
* 画笔
*/
Paint mPaint;
/*
* 进度
*/
int mProgress;
/*
* 是否切换标志
*/
boolean isNext;
public MySelfCircleView(Context context, AttributeSet attrs,
int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomView, defStyleAttr, 0);
int n = typedArray.getIndexCount();
for(int i=0; i<n; i++){
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.CustomView_firstColor:
firstColor = typedArray.getColor(attr, Color.RED);
break;
case R.styleable.CustomView_secondColor:
secondColor = typedArray.getColor(attr, Color.RED);
break;
case R.styleable.CustomView_circleWidth:
circleWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomView_speed:
speed = typedArray.getInt(attr, 20);
break;
}
}
typedArray.recycle();
mPaint = new Paint();
new Thread(new Runnable() {
@Override
public void run() {
while (true) {
mProgress++;
if (mProgress == 360) {
mProgress = 0;
if (!isNext)
isNext = true;
else
isNext = false;
}
postInvalidate();
try {
Thread.sleep(speed);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
public MySelfCircleView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MySelfCircleView(Context context) {
this(context, null);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(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); // 用于定义的圆弧的形状和大小的界限
if (!isNext) {// 第一颜色的圈完整，第二颜色跑
mPaint.setColor(firstColor); // 设置圆环的颜色
canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
mPaint.setColor(secondColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
} else {
mPaint.setColor(secondColor); // 设置圆环的颜色
canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
mPaint.setColor(firstColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
}
}
}

最后是我们的布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:zhy="http://schemas.android.com/apk/res/com.example.myselfview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.myselfview.view.MySelfCircleView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="20dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
zhy:circleWidth="15dp"
zhy:firstColor="#D4F668"
zhy:secondColor="#2F9DD2"
zhy:speed="10" />
<com.example.myselfview.view.MySelfCircleView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
zhy:circleWidth="24dp"
android:layout_marginBottom="40dp"
zhy:firstColor="#16A3FA"
zhy:secondColor="#D20F02"
zhy:speed="5" />
</RelativeLayout>

总结

好了，到这里我们的效果就算大工告成，感兴趣的朋友可以写写看，个人感觉自定义View需要大量的练习，才能为我所用。希望本文对大家开发Android能有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： android view 圆环

相关文章推荐

新的分享

章节导航