Android编程使用自定义View实现水波进度效果示例

本文实例讲述了Android编程使用自定义View实现水波进度效果。分享给大家供大家参考,具体如下:

首先上效果图:

简介:

1.自动适应屏幕大小;
2.水波自动横向滚动;
3.各种绘制参数可通过修改常量进行控制。

代码不多,注释也比较详细,全部贴上:

(一)自定义组件:

/**
 * 水波进度效果.
 */
public class WaterWaveView extends View {
  //边框宽度
  private int STROKE_WIDTH;
  //组件的宽,高
  private int width, height;
  /**
   * 进度条最大值和当前进度值
   */
  private float max, progress;
  /**
   * 绘制波浪的画笔
   */
  private Paint progressPaint;
  //波纹振幅与半径之比。(建议设置:<0.1)
  private static final float A = 0.05f;
  //绘制文字的画笔
  private Paint textPaint;
  //绘制边框的画笔
  private Paint circlePaint;
  /**
   * 圆弧圆心位置
   */
  private int centerX, centerY;
  //内圆所在的矩形
  private RectF circleRectF;
  public WaterWaveView(Context context) {
    super(context);
    init();
  }
  public WaterWaveView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }
  public WaterWaveView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }
  //初始化
  private void init() {
    progressPaint = new Paint();
    progressPaint.setColor(Color.parseColor("#77cccc88"));
    progressPaint.setAntiAlias(true);
    textPaint = new Paint();
    textPaint.setColor(Color.WHITE);
    textPaint.setAntiAlias(true);
    circlePaint = new Paint();
    circlePaint.setStyle(Paint.Style.STROKE);
    circlePaint.setAntiAlias(true);
    circlePaint.setColor(Color.parseColor("#33333333"));
    autoRefresh();
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    if (width == 0 || height == 0) {
      width = getWidth();
      height = getHeight();
      //计算圆弧半径和圆心点
      int circleRadius = Math.min(width, height) >> 1;
      STROKE_WIDTH = circleRadius / 10;
      circlePaint.setStrokeWidth(STROKE_WIDTH);
      centerX = width / 2;
      centerY = height / 2;
      VALID_RADIUS = circleRadius - STROKE_WIDTH;
      RADIANS_PER_X = (float) (Math.PI / VALID_RADIUS);
      circleRectF = new RectF(centerX - VALID_RADIUS, centerY - VALID_RADIUS,
          centerX + VALID_RADIUS, centerY + VALID_RADIUS);
    }
  }
  private Rect textBounds = new Rect();
  //x方向偏移量
  private int xOffset;
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //绘制圆形边框
    canvas.drawCircle(centerX, centerY, VALID_RADIUS + (STROKE_WIDTH >> 1), circlePaint);
    //绘制水波曲线
    canvas.drawPath(getWavePath(xOffset), progressPaint);
    //绘制文字
    textPaint.setTextSize(VALID_RADIUS >> 1);
    String text1 = String.valueOf(progress);
    //测量文字长度
    float w1 = textPaint.measureText(text1);
    //测量文字高度
    textPaint.getTextBounds("8", 0, 1, textBounds);
    float h1 = textBounds.height();
    float extraW = textPaint.measureText("8") / 3;
    canvas.drawText(text1, centerX - w1 / 2 - extraW, centerY + h1 / 2, textPaint);
    textPaint.setTextSize(VALID_RADIUS / 6);
    textPaint.getTextBounds("M", 0, 1, textBounds);
    float h2 = textBounds.height();
    canvas.drawText("M", centerX + w1 / 2 - extraW + 5, centerY - (h1 / 2 - h2), textPaint);
    String text3 = "共" + String.valueOf(max) + "M";
    float w3 = textPaint.measureText(text3, 0, text3.length());
    textPaint.getTextBounds("M", 0, 1, textBounds);
    float h3 = textBounds.height();
    canvas.drawText(text3, centerX - w3 / 2, centerY + (VALID_RADIUS >> 1) + h3 / 2, textPaint);
    String text4 = "流量剩余";
    float w4 = textPaint.measureText(text4, 0, text4.length());
    textPaint.getTextBounds(text4, 0, text4.length(), textBounds);
    float h4 = textBounds.height();
    canvas.drawText(text4, centerX - w4 / 2, centerY - (VALID_RADIUS >> 1) + h4 / 2, textPaint);
  }
  //绘制水波的路径
  private Path wavePath;
  //每一个像素对应的弧度数
  private float RADIANS_PER_X;
  //去除边框后的半径(即内圆半径)
  private int VALID_RADIUS;
  /**
   * 获取水波曲线(包含圆弧部分)的Path.
   *
   * @param xOffset x方向像素偏移量.
   */
  private Path getWavePath(int xOffset) {
    if (wavePath == null) {
      wavePath = new Path();
    } else {
      wavePath.reset();
    }
    float[] startPoint = new float[2]; //波浪线起点
    float[] endPoint = new float[2]; //波浪线终点
    for (int i = 0; i <= VALID_RADIUS * 2; i += 2) {
      float x = centerX - VALID_RADIUS + i;
      float y = (float) (centerY + VALID_RADIUS * (1.0f + A) * 2 * (0.5f - progress / max)
          + VALID_RADIUS * A * Math.sin((xOffset + i) * RADIANS_PER_X));
      //只计算内圆内部的点,边框上的忽略
      if (calDistance(x, y, centerX, centerY) > VALID_RADIUS) {
        if (x < centerX) {
          continue; //左边框,继续循环
        } else {
          break; //右边框,结束循环
        }
      }
      //第1个点
      if (wavePath.isEmpty()) {
        startPoint[0] = x;
        startPoint[1] = y;
        wavePath.moveTo(x, y);
      } else {
        wavePath.lineTo(x, y);
      }
      endPoint[0] = x;
      endPoint[1] = y;
    }
    if (wavePath.isEmpty()) {
      if (progress / max >= 0.5f) {
        //满格
        wavePath.moveTo(centerX, centerY - VALID_RADIUS);
        wavePath.addCircle(centerX, centerY, VALID_RADIUS, Path.Direction.CW);
      } else {
        //空格
        return wavePath;
      }
    } else {
      //添加圆弧部分
      float startDegree = calDegreeByPosition(startPoint[0], startPoint[1]); //0~180
      float endDegree = calDegreeByPosition(endPoint[0], endPoint[1]); //180~360
      wavePath.arcTo(circleRectF, endDegree - 360, startDegree - (endDegree - 360));
    }
    return wavePath;
  }
  private float calDistance(float x1, float y1, float x2, float y2) {
    return (float) Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
  }
  //根据当前位置,计算出进度条已经转过的角度。
  private float calDegreeByPosition(float currentX, float currentY) {
    float a1 = (float) (Math.atan(1.0f * (centerX - currentX) / (currentY - centerY)) / Math.PI * 180);
    if (currentY < centerY) {
      a1 += 180;
    } else if (currentY > centerY && currentX > centerX) {
      a1 += 360;
    }
    return a1 + 90;
  }
  public void setMax(int max) {
    this.max = max;
    invalidate();
  }
  //直接设置进度值(同步)
  public void setProgressSync(float progress) {
    this.progress = progress;
    invalidate();
  }
  /**
   * 自动刷新页面,创造水波效果。组件销毁后该线城将自动停止。
   */
  private void autoRefresh() {
    new Thread(new Runnable() {
      @Override
      public void run() {
        while (!detached) {
          xOffset += (VALID_RADIUS >> 4);
          SystemClock.sleep(100);
          postInvalidate();
        }
      }
    }).start();
  }
  //标记View是否已经销毁
  private boolean detached = false;
  @Override
  protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    detached = true;
  }
}

(二)使用方法:

在xml布局中引入上述组件,然后在activity或fragment中设置属性:

WaterWaveView bar = (WaterWaveView) getActivity().findViewById(R.id.water_wave_view);
    bar.setMax(500);
    bar.setProgressSync(361.8f);

更多关于Android相关内容感兴趣的读者可查看本站专题:《Android开发动画技巧汇总》、《Android编程之activity操作技巧总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》、《Android开发入门与进阶教程》、《Android资源操作技巧汇总》及《Android控件用法总结》

希望本文所述对大家Android程序设计有所帮助。

(0)

相关推荐

  • Android编程实现ActionBar的home图标动画切换效果

    本文实例讲述了Android编程实现ActionBar的home图标动画切换效果.分享给大家供大家参考,具体如下: Material Design中一个重要特性是侧滑菜单 展开/关闭 时,ActionBar上的home图标也动画切换.本例要实现的正是这个效果,如图所示: 实现这个效果仅需几步: 1.首先,该页面的布局是一个DrawerLayout,代码如下: <android.support.v4.widget.DrawerLayout xmlns:android="http://sche

  • 详解Android应用开发--MP3音乐播放器代码实现(一)

    需求1:将内存卡中的MP3音乐读取出来并显示到列表当中 1.从数据库中查询所有音乐数据,保存到List集合当中,List当中存放的是Mp3Info对象 2.迭代List集合,把每一个Mp3Info对象的所有属性,保存到Map对象当中 3.定义一个List集合,把Map对象添加到List集合当中 4.通过定义一个SimpleAdpter,调用setAdpter方法,将数据显示到列表当中 /** * 用于从数据库中查询歌曲的信息,保存在List当中 * * @return */ public Lis

  • Android 屏幕切换监听的实例代码

    昨天,我试着在屏幕切换时,使View显示在不同的位置,在网上搜索了一些资料,自己做了一段时间,终于完成了功能. 由于屏幕切换会调用activity的各个生命周期,所以需要在manifest的activity属性加上代码 android:configChanges="keyboardHidden|orientation|screenSize|locale|layoutDirection" 然后重写onConfigurationChanged(),加上自己的处理代码 @Override p

  • Android侧滑导航栏的实例代码

    今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在qq里面也有,最近一直跟室友们玩的游戏是快速让自己的头像的点赞量上千.当然我的效果跟qq是没有办法比的,因为那里面的功能是在是太强大了.下面我来展示一下我做的效果截图. 我做的界面有点丑,但是对比之前已经是有了很大的改观了.想做这样的效果的话可以ps几张比较好看的图片. 下面就是粘贴我代码的时间了. activity_main.xml <cn.edu.rjxy.activity.DragLayout xmlns:android

  • Android实现固定屏幕显示的方法

    本文实例讲述了Android实现固定屏幕显示的方法.分享给大家供大家参考.具体如下: 在Android开发中我们会碰到开发屏幕扭转的情况,如何固定住屏幕ScreenOrientation 呢? 在学习jetboy代码时,发现屏幕被旋转了,代查代码没有找到相关设置,在manifest.xml中找到了相关的代码: 找到这名代码: 复制代码 代码如下: android:screenOrientation="portrait" portrait表示横向,landscape表示纵向 如果要使Ac

  • Android编程实现的简易路径导航条功能示例

    本文实例讲述了Android编程实现的简易路径导航条功能.分享给大家供大家参考,具体如下: 这里要实现的是如图所示的路径导航条, 类似于文件管理器的效果. 该导航条包含三个功能: 1. 支持追加任意个子路径(文字一行写不下时可左右滑动): 2. 支持返回到上一个路径: 3. 支持点击中间的某个路径回到指定位置. 代码很简单,已封装成自定义View, 如下: PathTextView.Java /** * 显示路径的View,支持返回上一级,支持点击某个位置回到指定层级. */ public cl

  • Android6.0 固定屏幕功能实现方法及实例

    Android 固定屏幕功能 可能大家看到这个标题不知道是什么东西,我先说明下,android6.0在设置->安全->屏幕固定开启后,然后再长按home键出现最近的几个Activity可以选择一个图钉按钮就开启了屏幕固定功能. 屏幕固定开启后,屏幕只能固定在设定的Task上的Activity切换. 一.设置固定屏幕 我们先来看SystemUI/src/com/Android/systemui/recents/ScreenPinningRequest.Java的代码,这段代码就是长按home键出

  • Android编程实现点击链接打开APP功能示例

    本文实例讲述了Android编程实现点击链接打开APP功能.分享给大家供大家参考,具体如下: 在Android中点击链接打开APP是一个很常见的需求.例如,电商为用户发送优惠券之后经常会下发一条短信:某某优惠券已发送到您的账户中,点击 xxx 链接即可查看!此时当用户点击链接之后会直接打开本地APP,进入相关页面. 功能实现: 1.在manifest中为相应的activity添加intent-filter: <activity android:name=".TestActivity&quo

  • Android实现第三方登录的上拉展开,下拉隐藏,下拉隐藏示例

    Android的UI和交互是很重要的一部分,直接影响到用户对软件的体验.随着项目经验的积累,发现Android中动画的运用越来越重要.本篇文章抽出了项目登录界面中实现的第三方登录,用户可以上拉展开,下拉隐藏第三方登录这么一个效果,提高用户和软件的交互性. 实现效果: (1)activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q

  • Android编程使用android-support-design实现MD风格对话框功能示例

    本文实例讲述了Android编程使用android-support-design实现MD风格对话框功能.分享给大家供大家参考,具体如下: 首先上效果图:   测试设备为红米Note,系统为Android 4.4.4 说明: 1.在新版的android.support.v7包中,Google提供了一个新的AlertDialog类,即android.support.v7.app.AlertDialog.使用该类中的Builder可以直接创建Material Design风格的对话框,而不需要再借助于

  • Android SQLite数据库中的表详解

    Android SQLite数据库 前言 以前写PHP的时候,内置了print_r()和var_dump()两个函数用于打印输出任意类型的数据内部结构,现在做Android的开发,发现并没有这种类似的函数,对于数据库的查看很不方便,于是就写了一下查看数据库表的方法代码. 代码实现 import java.util.Arrays; import android.app.Activity; import android.database.Cursor; import android.database

随机推荐