这篇文章给大家介绍如何基于 Android 自定义 View 实现圆环交替的效果,实现后效果很赞,有需要的小伙伴们可以参考借鉴。
Android 是一种基于 Linux 的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由 Google 公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用 "安卓" 或 "安致"。
下面请先看效果图:
看上去是不很炫的样子,它的实现上也不是很复杂,重点在与
方法的绘制。
- 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 能有所帮助。
来源: http://www.phperz.com/article/17/0320/290433.html