先看效果图:

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

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

@Override
protected void onDraw(Canvas canvas) {
float cx = getMeasuredWidth() / 2;
float cy = getMeasuredHeight() / 2;
r1 = cx - w1 / 2;
r2 = cx - w1 / 2 - w2 / 2;
r3 = cx - w1 / 2 - w2; // 绘制外圆
paint.setStrokeWidth(w1);
paint.setColor(Color.parseColor("#454547"));
canvas.drawCircle(cx, cy, r1, paint); // 绘制中间圆环
paint.setColor(Color.parseColor("#747476"));
paint.setStrokeWidth(w2);
canvas.drawCircle(cx, cy, r2, paint); // 绘制内圆
paint.setColor(Color.parseColor("#464648"));
paint.setStyle(Style.FILL);
canvas.drawCircle(cx, cy, r3, paint); // 绘制中间的图片
canvas.drawBitmap(bitmap, cx - bitmap.getWidth() / 2,
cx - bitmap.getHeight() / 2, paint); // 绘制文本
paint.setColor(Color.WHITE);
paint.setStrokeWidth(0);
paint.setTextSize(40);
float textWidth = paint.measureText("铃声"); // 测量字体宽度,我们需要根据字体的宽度设置在圆环中间 canvas.drawText("铃声", cx - textWidth / 2, cx + bitmap.getHeight() / 2
+ 40, paint); // 绘制进度
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(w2);
paint.setColor(Color.WHITE);
RectF oval = new RectF(cx - r2, cy - r2, cx + r2, cy + r2); // 用于定义的圆弧的形状和大小的界限
canvas.drawArc(oval, 270, 360 * progress / 100, false, paint); super.onDraw(canvas);
}

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

public class VolumnController {
Toast t;
VolumnView tv; Context context; public VolumnController(Context context) {
this.context = context;
} public void show(float progress) {
if (t == null) {
t = new Toast(context);
View layout = LayoutInflater.from(context).inflate(R.layout.vv,
null);
tv = (VolumnView) layout.findViewById(R.id.volumnView1);
t.setView(layout);
t.setGravity(Gravity.BOTTOM, 0, 100);
t.setDuration(Toast.LENGTH_SHORT);
}
tv.setProgress(progress);
t.show();
}
}

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

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. Asp.Net Web API 2第十四课——Content Negotiation(内容协商)

    前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文描述ASP.NET W ...

  2. Chrome以https访问gitlab的问题:Your connection is not private

    在Chrome中以https访问自己搭建的gitlab站点时经常出现下面的错误: Attackers might be trying to steal your information from xx ...

  3. Sqoop-1.4.6.bin__hadoop-2.0.4-alpha 环境搭建

    一.Sqoop 环境搭建 1.下载安装包及解压     sqoop-1.4.6.bin__hadoop-2.0.4-alpha.tar.gz 1)拷贝sqoop-1.4.6.bin__hadoop-2 ...

  4. Django表单验证

    从前端提交的各种数据可能存缺少必要字段以及包含非法数据等问题, 并且通常需要进行类型转换后才可以交由业务逻辑处理. 我们当然可以在控制器(Django的views函数)中完成这些工作, 但是这样会使控 ...

  5. 自己动手写UI库——引入ExtJs(布局)

    第一: 来看一下最终的效果 第二: 来看一下使用方法: 第三: Component类代码如下所示: public class Component     {                   pub ...

  6. Xperf Basics: Recording a Trace(转)

    http://randomascii.wordpress.com/2011/08/18/xperf-basics-recording-a-trace/   This post is obsolete ...

  7. [stm32] 利用uC-BmpCvt软件生成uc-gui可调用的bmp图片

    >_<:学习贴图[bmp图]:首先找一张bmp格式的图片,然后下载uC-BmpCvt软件,打开改图片 >_<:然后点击Image-Conver-Into-Best Palatt ...

  8. inventor应用程序错误---解决方法

    ---恢复内容开始--- 点击 出现类似 我使用了网上的几个方法,最后是下载了2014--SP1补丁安装后就能正常打开程序了 http://pan.baidu.com/s/1pLQxp2b 这是地址3 ...

  9. asp.net core中Microsoft.AspNet.Session的使用

    1.通过nuget/修改project.json引用 2.引用存储session的媒介,如内存.数据库.redis等 "Microsoft.AspNetCore.Session": ...

  10. Atitit.dwr3 不能显示错误详细信息的解决方案,控件显示错误详细信息的解决方案 java .net php

    Atitit.dwr3 不能显示错误详细信息的解决方案,控件显示错误详细信息的解决方案 java .net php 1. Keyword/subtitle 1 2. 使用dwr3的异常convert处 ...