欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-04-12 11:25:23
前言 最近一直在研究自定义view,正好项目中有一个根据下载进度来实现球体进度的需求,所以自己写了个进度球,代码非常简单。先看下效果: 效果还是非常不错的。...

前言

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

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

效果还是非常不错的。

准备知识

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

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

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

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来实现的。

源码地址:进度球代码

带波浪的进度球

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

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

准备知识

二阶贝塞尔曲线

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

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

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

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

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

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

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()来结束动画。

总结

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