Android自定义View实现圆环交替效果
程序员文章站
2024-03-07 19:09:21
下面请先看效果图:
看上去是不很炫的样子,它的实现上也不是很复杂,重点在与ondraw()方法的绘制。
首先是我们的attrs文件:
...
下面请先看效果图:
看上去是不很炫的样子,它的实现上也不是很复杂,重点在与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能有所帮助。
上一篇: 深入探究Java多线程并发编程的要点