先看效果图:

这就是miui中的音量效果图,实现思路是自定义视图,绘制圆环,然后设置进度显示。

核心代码在onDraw中实现如下:

  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3. float cx = getMeasuredWidth() / 2;
  4. float cy = getMeasuredHeight() / 2;
  5. r1 = cx - w1 / 2;
  6. r2 = cx - w1 / 2 - w2 / 2;
  7. r3 = cx - w1 / 2 - w2;
  8.  
  9. // 绘制外圆
  10. paint.setStrokeWidth(w1);
  11. paint.setColor(Color.parseColor("#454547"));
  12. canvas.drawCircle(cx, cy, r1, paint);
  13.  
  14. // 绘制中间圆环
  15. paint.setColor(Color.parseColor("#747476"));
  16. paint.setStrokeWidth(w2);
  17. canvas.drawCircle(cx, cy, r2, paint);
  18.  
  19. // 绘制内圆
  20. paint.setColor(Color.parseColor("#464648"));
  21. paint.setStyle(Style.FILL);
  22. canvas.drawCircle(cx, cy, r3, paint);
  23.  
  24. // 绘制中间的图片
  25. canvas.drawBitmap(bitmap, cx - bitmap.getWidth() / 2,
  26. cx - bitmap.getHeight() / 2, paint);
  27.  
  28. // 绘制文本
  29. paint.setColor(Color.WHITE);
  30. paint.setStrokeWidth(0);
  31. paint.setTextSize(40);
  32. float textWidth = paint.measureText("铃声"); // 测量字体宽度,我们需要根据字体的宽度设置在圆环中间
  33.  
  34. canvas.drawText("铃声", cx - textWidth / 2, cx + bitmap.getHeight() / 2
  35. + 40, paint);
  36.  
  37. // 绘制进度
  38. paint.setStyle(Style.STROKE);
  39. paint.setStrokeWidth(w2);
  40. paint.setColor(Color.WHITE);
  41. RectF oval = new RectF(cx - r2, cy - r2, cx + r2, cy + r2); // 用于定义的圆弧的形状和大小的界限
  42. canvas.drawArc(oval, 270, 360 * progress / 100, false, paint);
  43.  
  44. super.onDraw(canvas);
  45. }

然后就是自定义toast,加载上面的自定义控件。

  1. public class VolumnController {
  2. Toast t;
  3. VolumnView tv;
  4.  
  5. Context context;
  6.  
  7. public VolumnController(Context context) {
  8. this.context = context;
  9. }
  10.  
  11. public void show(float progress) {
  12. if (t == null) {
  13. t = new Toast(context);
  14. View layout = LayoutInflater.from(context).inflate(R.layout.vv,
  15. null);
  16. tv = (VolumnView) layout.findViewById(R.id.volumnView1);
  17. t.setView(layout);
  18. t.setGravity(Gravity.BOTTOM, 0, 100);
  19. t.setDuration(Toast.LENGTH_SHORT);
  20. }
  21. tv.setProgress(progress);
  22. t.show();
  23. }
  24. }

最后附上所有的源码:点击我!!!

android自定义view仿照MIUI中音量控制效果的更多相关文章

  1. Android -- 自定义view实现keep欢迎页倒计时效果

    1,最近打开keep的app的时候,发现它的欢迎页面的倒计时效果还不错,所以打算自己来写写,然后就有了这篇文章. 2,还是老规矩,先看一下我们今天实现的效果 相较于我们常见的倒计时,这次实现的效果是多 ...

  2. Android自定义View——QQ音乐中圆形旋转碟子

    1.在onMeasure中测量整个View的宽和高后,设置宽高 2.获取我们res的图片资源后,在ondraw方法中进行绘制圆形图片 3.通过Handler发送Runnable在主线程中更新UI,达到 ...

  3. Android自定义View——简单实现边缘凹凸电子票效果

        View继承LinearLayout,在View的上下边缘画出白色的圆形即可,这里只要计算出圆的个数和圆的循环规律即可,下面请看分析 我们取卡片的前2个凹凸来看,将其分为四部分,并且两部分为循 ...

  4. Android自定义View——贝塞尔曲线实现水波纹效果

    我们使用到的是Path类的quadTo(x1, y1, x2, y2)方法,属于二阶贝塞尔曲线,使用一张图来展示二阶贝塞尔曲线,这里的(x1,y1)是控制点,(x2,y2)是终止点,起始点默认是Pat ...

  5. Android 自定义View 之利用ViewPager 实现画廊效果(滑动放大缩小)

    http://www.2cto.com/kf/201608/542107.html

  6. android自定义view系列:认识activity结构

    标签: android 自定义view activity 开发中虽然我们调用Activity的setContentView(R.layout.activity_main)方法显示View视图,但是vi ...

  7. Android 自定义View及其在布局文件中的使用示例(三):结合Android 4.4.2_r1源码分析onMeasure过程

    转载请注明出处 http://www.cnblogs.com/crashmaker/p/3549365.html From crash_coder linguowu linguowu0622@gami ...

  8. Android 自定义View及其在布局文件中的使用示例(二)

    转载请注明出处 http://www.cnblogs.com/crashmaker/p/3530213.html From crash_coder linguowu linguowu0622@gami ...

  9. Android自定义View研究--View中的原点坐标和XML中布局自定义View时View触摸原点问题

    这里只做个汇总~.~独一无二 文章出处:http://blog.csdn.net/djy1992/article/details/9715047 Android自定义View研究--View中的原点坐 ...

随机推荐

  1. 第十六章:异步处理之AsyncTask的应用

    前言 我们知道Android的UI主线程主要负责处理用户的按键事件.用户的触屏事件以及屏幕绘图事件等:既然UI老人家都这么忙了,我们这些开发者肯定不能不识趣的去添乱阻塞UI线程什么的,否则UI界面万一 ...

  2. 自己动手写客户端UI库——事件机制(设计思路大放送)

    在上一篇文章中我们创建了一个Button控件,并把这个控件显示在界面上, 在这一篇文章中,我们将为这个控件增加一个事件和一个方法 一:怎么绑定事件的问题 在Winform中,我们对一个按钮绑定事件的方 ...

  3. [游戏模版17] Win32 推箱子 迷宫

    >_<:Here introduce a simple game: >_<:resource >_<:only can push a box and finally ...

  4. [stm32] GPIO及最小框架

    1.GPIO硬件结构图: 2.GPIO程序结构: 3.框架介绍: 这里的ASM是固定启动文件夹,startup_stm32f10x_hd.s表示当前stm32类型为高容量设备,当然还有md.s等. C ...

  5. webApp 阅读器项目实践

    这是一个webApp 阅读器的项目,是慕课网的老师讲授的一个实战,先给出项目源码在GitHub的地址:https://github.com/yulifromchina/MobileWebReader. ...

  6. SQLite数据库增删改查操作

    一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库——SQLite,SQLite3支持NULL.INTEGER.REAL(浮点数字).TEXT(字符串 ...

  7. iframe 使用

    iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现 ...

  8. spark spark ziliao important

    http://book.51cto.com/art/201408/448416.htm 一.如何实现多台机器的ssh无密码登录 当我们在配置多台计算,使之可以相互使用无密码登录-ssh,之前都是一台一 ...

  9. Winform TreeView 查找下一个节点

    转载:http://www.cnblogs.com/Ruiky/archive/2013/02/01/2888674.html public static class TreeViewHelper { ...

  10. 从零开始编写自己的C#框架 ---- 系列文章

    目录: 从零开始编写自己的C#框架(1)——前言从零开始编写自己的C#框架(2)——开发前的准备工作从零开始编写自己的C#框架(3)——开发规范从零开始编写自己的C#框架(4)——文档编写说明从零开始 ...