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

下面请先看效果图:

  

看上去是不很炫的样子,它的实现上也不是很复杂,重点在与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能有所帮助。

(0)

相关推荐

  • Android开发笔记之:在ImageView上绘制圆环的实现方法

    绘制圆环其实很简单,有大概以下三种思路. 这里先说网上提到的一种方法.思路是先绘制内圆,然后绘制圆环(圆环的宽度就是paint设置的paint.setStrokeWidth的宽度),最后绘制外圆.请看核心源码: 复制代码 代码如下: <SPAN xmlns="http://www.w3.org/1999/xhtml">package yan.guoqi.rectphoto;import android.content.Context;import android.graph

  • Android自定义View之酷炫圆环(二)

    先看下最终的效果 静态: 动态: 一.开始实现 新建一个DoughnutProgress继承View public class DoughnutProgress extends View { } 先给出一些常量.变量以及公共方法的代码,方便理解后面的代码 private static final int DEFAULT_MIN_WIDTH = 400; //View默认最小宽度 private static final int RED = 230, GREEN = 85, BLUE = 35;

  • Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

  • android自定义进度条渐变色View的实例代码

    最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码  ,大概讲解一下实现思路吧! 复制代码 代码如下: package com.spring.progressview; import android.conten

  • Android中自定义View实现圆环等待及相关的音量调节效果

    圆环交替.等待效果 效果就这样,分析了一下,大概有这几个属性,两个颜色,一个速度,一个圆环的宽度. 自定View的几个步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 3.重写onMesure  4.重写onDraw 1.自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <attr name="firstColor" f

  • Android自定义View之酷炫数字圆环

    先看下最终的效果 一.开始实现 新建一个DoughnutView继承View public class DoughnutView extends View { } 先重写onMeasure方法. /** * 当布局为wrap_content时设置默认长宽 * * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int hei

  • Android自定义view绘制圆环占比动画

    一.实现效果图 二.核心代码 1.自定义MyProgressView.java package com.czhappy.effectdemo.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas;

  • Android中实现Webview顶部带进度条的方法

    写这篇文章,做份备忘,简单滴展示一个带进度条的Webview示例,进度条位于Webview上面. 示例图如下: 主Activity代码: 复制代码 代码如下: package com.droidyue.demo.webviewprogressbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.vi

  • android ListView和ProgressBar(进度条控件)的使用方法

    ListView控件的使用:ListView控件里面装的是一行一行的数据,一行中可能有多列,选中一行,则该行的几列都被选中,同时可以触发一个事件,这种控件在平时还是用得很多的.使用ListView时主要是要设置一个适配器,适配器主要是用来放置一些数据.使用起来稍微有些复杂,这里用的是android自带的SimpleAdapter,形式如下:android.widget.SimpleAdapter.SimpleAdapter(Context context, List<? extends Map<

  • Android Webview添加网页加载进度条实例详解

    推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

随机推荐