Android 自定义View (四) 视频音量调控
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24529807
今天没事逛eoe,看见有人求助要做一个下面的效果,我看下面一哥们说要用12张图片,这尼玛逆天的麻烦,仔细看了一下感觉自定义控件木有问题,就花点时间写了一个。
好了,进入正题,继续我们的自定义View四部曲。
1、先分许需要的属性,两个小块的颜色、一张中间的图片、间隙大小、一个多少个块块。分析完毕,开始写attr.xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <attr name="firstColor" format="color" />
- <attr name="secondColor" format="color" />
- <attr name="circleWidth" format="dimension" />
- <attr name="dotCount" format="integer" />
- <attr name="splitSize" format="integer" />
- <attr name="bg" format="reference"></attr>
- <declare-styleable name="CustomVolumControlBar">
- <attr name="firstColor" />
- <attr name="secondColor" />
- <attr name="circleWidth" />
- <attr name="dotCount" />
- <attr name="splitSize" />
- <attr name="bg" />
- </declare-styleable>
- </resources>
2、在构造中获取这些属性:
- /**
- * 第一圈的颜色
- */
- private int mFirstColor;
- /**
- * 第二圈的颜色
- */
- private int mSecondColor;
- /**
- * 圈的宽度
- */
- private int mCircleWidth;
- /**
- * 画笔
- */
- private Paint mPaint;
- /**
- * 当前进度
- */
- private int mCurrentCount = 3;
- /**
- * 中间的图片
- */
- private Bitmap mImage;
- /**
- * 每个块块间的间隙
- */
- private int mSplitSize;
- /**
- * 个数
- */
- private int mCount;
- private Rect mRect;
- public CustomVolumControlBar(Context context, AttributeSet attrs)
- {
- this(context, attrs, 0);
- }
- public CustomVolumControlBar(Context context)
- {
- this(context, null);
- }
- /**
- * 必要的初始化,获得一些自定义的值
- *
- * @param context
- * @param attrs
- * @param defStyle
- */
- public CustomVolumControlBar(Context context, AttributeSet attrs, int defStyle)
- {
- super(context, attrs, defStyle);
- TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomVolumControlBar, defStyle, 0);
- int n = a.getIndexCount();
- for (int i = 0; i < n; i++)
- {
- int attr = a.getIndex(i);
- switch (attr)
- {
- case R.styleable.CustomVolumControlBar_firstColor:
- mFirstColor = a.getColor(attr, Color.GREEN);
- break;
- case R.styleable.CustomVolumControlBar_secondColor:
- mSecondColor = a.getColor(attr, Color.CYAN);
- break;
- case R.styleable.CustomVolumControlBar_bg:
- mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
- break;
- case R.styleable.CustomVolumControlBar_circleWidth:
- mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
- TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
- break;
- case R.styleable.CustomVolumControlBar_dotCount:
- mCount = a.getInt(attr, 20);// 默认20
- break;
- case R.styleable.CustomVolumControlBar_splitSize:
- mSplitSize = a.getInt(attr, 20);
- break;
- }
- }
- a.recycle();
- mPaint = new Paint();
- mRect = new Rect();
- }
3、重写onDraw
- @Override
- protected void onDraw(Canvas canvas)
- {
- mPaint.setAntiAlias(true); // 消除锯齿
- mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
- mPaint.setStrokeCap(Paint.Cap.ROUND); // 定义线段断电形状为圆头
- mPaint.setAntiAlias(true); // 消除锯齿
- mPaint.setStyle(Paint.Style.STROKE); // 设置空心
- int centre = getWidth() / 2; // 获取圆心的x坐标
- int radius = centre - mCircleWidth / 2;// 半径
- /**
- * 画块块去
- */
- drawOval(canvas, centre, radius);
- /**
- * 计算内切正方形的位置
- */
- int relRadius = radius - mCircleWidth / 2;// 获得内圆的半径
- /**
- * 内切正方形的距离顶部 = mCircleWidth + relRadius - √2 / 2
- */
- mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
- /**
- * 内切正方形的距离左边 = mCircleWidth + relRadius - √2 / 2
- */
- mRect.top = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
- mRect.bottom = (int) (mRect.left + Math.sqrt(2) * relRadius);
- mRect.right = (int) (mRect.left + Math.sqrt(2) * relRadius);
- /**
- * 如果图片比较小,那么根据图片的尺寸放置到正中心
- */
- if (mImage.getWidth() < Math.sqrt(2) * relRadius)
- {
- mRect.left = (int) (mRect.left + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getWidth() * 1.0f / 2);
- mRect.top = (int) (mRect.top + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getHeight() * 1.0f / 2);
- mRect.right = (int) (mRect.left + mImage.getWidth());
- mRect.bottom = (int) (mRect.top + mImage.getHeight());
- }
- // 绘图
- canvas.drawBitmap(mImage, null, mRect, mPaint);
- }
- /**
- * 根据参数画出每个小块
- *
- * @param canvas
- * @param centre
- * @param radius
- */
- private void drawOval(Canvas canvas, int centre, int radius)
- {
- /**
- * 根据需要画的个数以及间隙计算每个块块所占的比例*360
- */
- float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
- RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
- mPaint.setColor(mFirstColor); // 设置圆环的颜色
- for (int i = 0; i < mCount; i++)
- {
- canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根据进度画圆弧
- }
- mPaint.setColor(mSecondColor); // 设置圆环的颜色
- for (int i = 0; i < mCurrentCount; i++)
- {
- canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根据进度画圆弧
- }
- }
这里需要注意下:
画块:首先根据块数量和间隙计算,每个块所占的比例。
画图:当图比较大时,直接使用该环内切正方形大小进行约束,当图片比较小时,在正中心的位置绘制。有些数学运算过程,楼主在草稿上画了一会,不复杂,大家自己画画,我就不贴草稿了。
4、添加触摸监听:
- /**
- * 当前数量+1
- */
- public void up()
- {
- mCurrentCount++;
- postInvalidate();
- }
- /**
- * 当前数量-1
- */
- public void down()
- {
- mCurrentCount--;
- postInvalidate();
- }
- private int xDown, xUp;
- @Override
- public boolean onTouchEvent(MotionEvent event)
- {
- switch (event.getAction())
- {
- case MotionEvent.ACTION_DOWN:
- xDown = (int) event.getY();
- break;
- case MotionEvent.ACTION_UP:
- xUp = (int) event.getY();
- if (xUp > xDown)// 下滑
- {
- down();
- } else
- {
- up();
- }
- break;
- }
- return true;
- }
触摸监听也得很简单哈,基本能实现,大家也可以加个最小距离加速度什么的,都行。
最后,效果图:
可惜楼主尼玛是找不到那个音量的图,不要叫我去抠图哈,就随便拿了几张图片来试试。
嘿嘿,留个言,顶一个哈~
Android 自定义View (四) 视频音量调控的更多相关文章
- Android 自己定义View (四) 视频音量调控
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24529807 今天没事逛eoe,看见有人求助要做一个以下的效果,我看以下一哥们说 ...
- Android 自定义View 四个构造函数详解
https://blog.csdn.net/zhao123h/article/details/52210732 在开发android开发过程中,很多人都会遇到自定义view,一般都需要继承自View类 ...
- 【朝花夕拾】Android自定义View篇之(四)自定义View的三种实现方式及自定义属性使用介绍
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10979161.html],谢谢! 尽管Android系统提供了不少控件,但是有很多酷炫效果仍然 ...
- Android 自定义 view(四)—— onMeasure 方法理解
前言: 前面我们已经学过<Android 自定义 view(三)-- onDraw 方法理解>,那么接下我们还需要继续去理解自定义view里面的onMeasure 方法 推荐文章: htt ...
- Android自定义View学习(四)
硬件加速 参考:HenCoder Android 自定义 View 1-8 硬件加速 硬件加速能够让绘制变快,主要有三个原因: 本来由 CPU 自己来做的事,分摊给了 GPU 一部分,自然可以提高效率 ...
- Android自定义View 画弧形,文字,并增加动画效果
一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类 B ...
- Android 自定义View (五)——实践
前言: 前面已经介绍了<Android 自定义 view(四)-- onMeasure 方法理解>,那么这次我们就来小实践下吧 任务: 公司现有两个任务需要我完成 (1)监测液化天然气液压 ...
- Android 自定义 view(三)—— onDraw 方法理解
前言: 上一篇已经介绍了用自己定义的属性怎么简单定义一个view<Android 自定义view(二) -- attr 使用>,那么接下来我们继续深究自定义view,下一步将要去简单理解自 ...
- Android 自定义View及其在布局文件中的使用示例(三):结合Android 4.4.2_r1源码分析onMeasure过程
转载请注明出处 http://www.cnblogs.com/crashmaker/p/3549365.html From crash_coder linguowu linguowu0622@gami ...
随机推荐
- 通知(Notification)的使用
新建一个 NotificationTest项目,并修改 activity_main.xml 中的代码,如下所示:<LinearLayout xmlns:android="http:// ...
- How JSP work.
A JSP page exists in three forms: JSP source code: consists of a mix of HTML template code. Java lan ...
- web.xml配置详解 (及<context-param>配置作用 )
http://blog.csdn.net/guihaijinfen/article/details/8363839 <context-param>配置作用 http://blog.csdn ...
- 抓取锁的sql语句-第一次修改
CREATE OR REPLACE PROCEDURE SOLVE_LOCK AS V_SQL VARCHAR2(3000); CUR_LOCK SYS_REFCURSOR; TYPE TP_LOCK ...
- 【转】 iOS使用AVFoundation实现二维码扫描
原文:http://strivingboy.github.io/blog/2014/11/08/scan-qrcode/ 关于二维码扫描有不少优秀第三方库如: ZBar SDK 里面有详细的文档,相应 ...
- 你好,C++(8)如何表达那些始终保持不变的数据量?3.2.2 常量
3.2.2 常量 与变量可以用在程序中表达那些可能会发生变化的数据量相对应地,在C++中,我们用常量来表达那些始终保持不变的数据量.简单来讲,就是程序中直接使用的数值.字符.字符串以及const关键 ...
- 【USACO 1.3.3】回文串
[題目描述] 据说如果你给无限只母牛和无限台巨型便携式电脑(有非常大的键盘),那么母牛们会制造出世上最棒的回文.你的工作就是去寻找这些牛制造的奇观(最棒的回文). 在寻找回文时不用理睬那些标点符号.空 ...
- ubuntu 更新 php5.5.9 到 php 5.6
add-apt-repository ppa:ondrej/php5-5.6 apt-get update apt-get install php5 为了使用 add-apt-repsitory 需要 ...
- jQuery中事件的学习
刚学习了jQuery中的事件,主要通过bind(),toggle(),hover()来主要实现,下面先说一说关于bind的想关要点. 1.bind方法. bind方法的主要参数为bind(type,f ...
- python运维开发之第五天
一.模块五大部分 定义,导入方法,import本质(路径搜索),导入优化,模块的分类 1.定义: 模块是用来从逻辑上组织python代码(变量,函数,类,逻辑实现一个功能),本质就是.py结尾的pyt ...