当前位置： 移动技术网 > IT编程>移动开发>Android > Android自定义View实现简单炫酷的球体进度球实例代码

Android自定义View实现简单炫酷的球体进度球实例代码

2019年07月30日  | 移动技术网IT编程  | 我要评论

0832,前排女子出轨,声远论坛

前言

最近一直在研究自定义view，正好项目中有一个根据下载进度来实现球体进度的需求，所以自己写了个进度球，代码非常简单。先看下效果：

效果还是非常不错的。

准备知识

要实现上面的效果我们只要掌握两个知识点就好了，一个是handler机制，用于发消息刷新我们的进度球，一个是clipdrawable。网上关于handler的教程很多，这里重点介绍一下clipdrawable，进度球的实现全靠clipdrawable。
clipdrawable

如下图所示：clipdrawable和insertdrawable一样继承drawablewrapper,drawablewrapper继承drawable。

clipdrawable是可以进行裁剪操作的drawable，提供了函数setlevel(@intrange(from=0,to=10000) int level)来设置裁剪的大小。level越大图片越大。level=0时图片完全不显示，level=10000时图片完全显示。

 clipdrawable clipdrawable = (clipdrawable) getcontext().getresources().getdrawable(r.drawable.bottom_top_clip_gradient_color);//获取图片
		clipdrawable.setlevel(100);//进行裁剪

一般还要设置裁剪的方向，垂直裁剪还是水平裁剪，我们这个进度球用的是垂直从下向上裁剪。

思路：

知道了clipdrawable的用法，进度球就好实现了。只需要一个球形的图片，从下往上裁剪，通过设置setlevel从0到10000，就可以实现进度球从0到进度100的效果了。

实现

1、定义ballprogress，ballprogress继承view,重写ondraw()方法，用于实现进度球的view。

/**
 * created time 15:02.
 *
 * @author huhanjun
 * @since 2018/12/26
 */
public class ballprogress extends view {
 private float mprogress = 0.0f; //取值位 0 - 1.0

 private boolean selected = true;

 public ballprogress(context context) {
 super(context);
 }

 public ballprogress(context context, @nullable attributeset attrs) {
 super(context, attrs);
 }

 public ballprogress(context context, @nullable attributeset attrs, int defstyleattr) {
 super(context, attrs, defstyleattr);
 init();
 }

 private void init() {
 mprogresspaint = new paint();//初始化，定义画笔。
 mprogresspaint.setantialias(true);//设置抗锯齿
 }

 public float getprogress() {
 return mprogress;
 }

 public void setprogress(float progress) {//设置进度，通过进度的大小实现裁剪的大小
 mprogress = progress;
 invalidate();
 }

 private paint mprogresspaint;


 @override
 protected void ondraw(canvas canvas) {
 super.ondraw(canvas);
 bitmap dst = getrectanglebitmap();//获取bitmap
 setlayertype(layer_type_hardware, null); //开启硬件离屏缓存
 canvas.drawbitmap(dst, 0, 0, mprogresspaint);
 }
 private bitmap getrectanglebitmap() {
 int width = getwidth();
 int height = getheight();
 
 bitmap dstbitmap = bitmap.createbitmap(width, height, bitmap.config.argb_8888);
 
 clipdrawable clipdrawable = null;
  clipdrawable = (clipdrawable) getcontext().getresources().getdrawable(r.drawable.bottom_top_clip_single_color);//获取球形的背景图片，用于裁剪，就是上面看到的进度球中的图片
  
 clipdrawable.setbounds(new rect(0, 0, width, height));//设置边界
 
 clipdrawable.setlevel((int) (10000 * mprogress));//设置进度，
 
 canvas canvas = new canvas(dstbitmap);//设置画布
 
 clipdrawable.draw(canvas);//绘制
 
 return dstbitmap;//将bitmap返回
 }

}

有了自定义的ballprogress，就可以在布局中使用了，定义的xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".mainactivity">

 <com.example.admin.floatprogressbar.ballprogress
 android:id="@+id/progress"
 android:layout_width="@dimen/progress_size"
 android:layout_height="@dimen/progress_size"
 android:layout_centerinparent="true" />
 <imageview
 android:layout_width="@dimen/progress_size"
 android:layout_height="@dimen/progress_size"
 android:layout_centerinparent="true"
 android:background="@drawable/main_tab_un_select_bg" />

</relativelayout>

上面布局中的imageview是悬浮球的边界。在mainactivity中来定时的改变进度球的大小。代码如下：

public class mainactivity extends appcompatactivity {
 private final int progress_message = 0;
 private float progress = 0.0f;
 private ballprogress mballprogress;
 private handler mhandler = new handler(new handler.callback() {
 @override
 public boolean handlemessage(message msg) {
  switch (msg.what) {
  case progress_message:
   progress = (progress > 0.9f) ? 0.9f : progress;
   mballprogress.setprogress(progress);//接收消息，改变进度球的进度
   break;
  }
  return true;
 }
 });
 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);
 initview();
 initaction();
 }

 private void initview() {
 mballprogress = findviewbyid(r.id.progress);
 }
 //发消息
 private void initaction() {
 new thread(new runnable() {
  @override
  public void run() {
  while (true) {
   progress += 0.02f;
   try {
   thread.sleep(100);
   } catch (interruptedexception e) {
   e.printstacktrace();
   }
   mhandler.sendemptymessage(progress_message);//每隔100毫秒发送一次消息，对进度球进度进行更新。
  }
  }
 }).start();
 }

}

上面代码在inaction()中开一个线程，每隔100毫秒发送消息，在handler中处理更新，在handler使用中并没有直接重写hanldemessage方法，而是传入handler.callback并在callback中实现handlemessage方法，这样可以防止内存泄漏。实际应用中，可以是跟业务相关的具体进度。

总结

自定义进度球，用的是继承view，并且通过自定义画笔，重写ondraw()方法来实现，一般自定义view都会重写ondraw()方法,一般进度条都是clipdrawable来实现的。

源码地址：

带波浪的进度球

上面已经实现了简单的进度球，但是效果不是很好，根据评论区中的提议加上动画和贝塞尔曲线波纹实现了下面的效果，只取了进度处于某一固定进度的动画效果如图：

准备知识

二阶贝塞尔曲线

贝塞尔曲线是用一系列点来控制曲线状态的，将这些点简单分为两类：

二阶贝塞尔曲线的路径由给定点p0、p1、p2的函数b（t）函数方程如下：

二阶曲线由两个数据点(p0 和 p2)，一个控制点(p1)来描述曲线状态，大致如下：

android中自带实现二阶贝塞尔曲线的api，在path类中的函数quadto 。

public void quadto (float x1, 
    float y1, 
    float x2, 
    float y2)

其中(x1,y1)是上图中控制点p1的坐标，（x2，y2）是上图中数据点结束位置p2的坐标，数据点p0的默认坐标是（0,0），也可以用函数moveto(x,y)来改变p0坐标。要实现上面进度球进度的波动效果，就要将两个贝塞尔曲线结合起来，并且动态的改变两个贝塞尔曲线的数据点和控制点，这样就会使用户感觉到波动的效果。

实现

/**
 * created time 17:24.
 *
 * @author huhanjun
 * @since 2019/1/2
 */
public class bezierfloatview extends view {

 private double rarc=0;
 private double percent=0;

 public bezierfloatview(context context) {
  super(context);
 }

 public bezierfloatview(context context, @nullable attributeset attrs) {
  super(context, attrs);
  initpaint();
  initanimator();
 }
 private rectf rectf;
 private int mwidth, mheight;//画布的宽带和高度
 private float cyclewidth, cycleheight = 30f;//周期的宽度和高度
 private path pathripple;//画的路径
 private paint paintripple;//画笔
 private float moveset = 0;//移动的值
 private valueanimator animator;//动画
 private boolean isstart = false;

 /**
  * 初始化动画
  */
 private void initanimator() {
  animator = valueanimator.offloat(0, mwidth);
  animator.setrepeatcount(valueanimator.infinite);
  animator.setduration(800);
  animator.setinterpolator(new linearinterpolator());
  animator.addupdatelistener(new valueanimator.animatorupdatelistener() {
   @override
   public void onanimationupdate(valueanimator valueanimator) {
    percent=valueanimator.getanimatedfraction();
    moveset = valueanimator.getanimatedfraction() * mwidth;
    invalidate();
   }
  });
 }

 /**
  * 初始化画的路径
  */
 private void initpath() {
  rarc = mwidth*(1-2*percent);
  double angle= math.acos(rarc/mwidth);
  pathripple = new path();
  pathripple.moveto(-6 * cyclewidth + moveset, 0);
  pathripple.quadto(-5 * cyclewidth + moveset, cycleheight, -4 * cyclewidth + moveset, 0);
  pathripple.quadto(-3 * cyclewidth + moveset, -cycleheight, -2 * cyclewidth + moveset, 0);
  pathripple.quadto(-cyclewidth + moveset, cycleheight, moveset, 0);
  pathripple.quadto(cyclewidth + moveset, -cycleheight, 2 * cyclewidth + moveset, 0);
  pathripple.addarc(rectf,0,180);
  pathripple.close();
  pathripple.setfilltype(path.filltype.winding);
 }

 /**
  * 初始化画笔
  */
 private void initpaint() {
  paintripple = new paint();
  paintripple.setstrokewidth(2);
  paintripple.setstyle(paint.style.fill);
  paintripple.setcolor(color.blue);
  paintripple.setantialias(true);
 }

 /**
  * 画波纹
  *
  * @param canvas
  */
 private void drawripple(canvas canvas) {
  initpath();
  canvas.drawpath(pathripple, paintripple);
 }

 @override
 protected void onsizechanged(int w, int h, int oldw, int oldh) {
  super.onsizechanged(w, h, oldw, oldh);
  mheight = h;
  mwidth = w;
  cyclewidth = mwidth / 4;
  float r = math.min(mwidth,mheight)*0.48f;
  rectf = new rectf(-r,-r,r,r);
  initanimator();
 }

 @override
 protected void ondraw(canvas canvas) {
  super.ondraw(canvas);
  canvas.translate(mwidth / 2, mheight / 2);
  drawripple(canvas);
 }

 /**
  * 开始动画
  */
 public void start() {
  if (isstart) return;
  isstart = true;
  if (animator == null) {
   initanimator();
  }
  animator.start();
 }

 /**
  * 结束动画
  */
 public void stop() {
  if (!isstart) return;
  isstart = false;
  moveset = 0;
  animator.cancel();
  animator = null;
  invalidate();
 }

}

在initpath()中绘制了两条贝塞尔曲线，通过动态的改变moveset的值来改变p0,p2的值，形成波动效果，通过pathripple.addarc(rectf,0,180);实现一个与贝塞尔曲线形成包围的半圆，通过start()来开始动画，通过stop()来结束动画。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网