Android自定义View实现圆环交替效果
短信预约 -IT技能 免费直播动态提醒
下面请先看效果图:
看上去是不很炫的样子,它的实现上也不是很复杂,重点在与
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实现圆环颜色选择器利用Android模仿微信摄像圆环进度效果实例Android自定义带动画的半圆环型进度效果Android自定义view绘制圆环占比动画Android实现动态圆环的图片头像控件Android中自定义View实现圆环等待及相关的音量调节效果Android自定义View之酷炫圆环(二)Android自定义View之酷炫数字圆环Android开发笔记之:在ImageView上绘制圆环的实现方法Android实现光点模糊渐变的自旋转圆环特效
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341