导语
手机直播一般都会通过移动屏幕来调节音量的大小,本篇只实现了图例,并不能改变音量。
先看效果:
![这里写图片描述](https://img-blog.csdn.net/20160831111633223)
需要的素材:小喇叭图片,点击这里获取
![这里写图片描述](https://img-blog.csdn.net/20160831111835198)
预热
如果你对Path,PathMeasure,RectF,Canvas等不适很了解的话,强烈建议看这位哥们的教程:
点击这里查看教程
如果你将这哥们的十几篇帖子都看完了的话,这个View实际上是非常简单的
步骤介绍
用动态图来介绍:
![这里写图片描述](https://img-blog.csdn.net/20160831114854707)
这里用文字翻译下:
- 将小喇叭画到中心位置
- 围绕着喇叭画一个圆圈,浅色的
- 画一个圆弧,深色的
- 根据触摸的位置来改变圆弧的大小
分解之后,发现并没有什么难度(可能本身就没有什么难度),下面来看每一步的操作,最后会将整个View的代码贴出来
绘制小喇叭
![这里写图片描述](https://img-blog.csdn.net/20160831113700999)
相关代码片(不要复制,只是看的)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.translate(mViewWidth / 2, mViewHeight / 2);
Bitmap voice = BitmapFactory.decodeResource(getResources(), R.mipmap.voice);
int bWidth = voice.getWidth();
int bHeight = voice.getHeight();
canvas.drawBitmap(voice, -bWidth / 2, -bHeight / 2, outerCirclePaint);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
分析
核心:将图片放到中心位置:
将图片向上移动高度的一半,向左移动宽度的一半,就可以移动到中心如图所示:
![这里写图片描述](https://img-blog.csdn.net/20160831123733007)
绘制浅色的圆环
相关代码片(不要复制,只是看的)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
initPaint();
canvas.translate(mViewWidth / 2, mViewHeight / 2);
if (cirPath == null)
cirPath = new Path();
if (rectF == null) {
r = (int) (bWidth / 2 * 1.3f);
rectF = new RectF(-r, -r, r, r);
}
cirPath .addArc(rectF, 0, 360);
canvas.drawPath(cirPath, outerCirclePaint);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
分析:
这步没有什么难度,只是绘制一个圆圈
画一个深色的圆弧
相关代码片(不要复制,只是看的)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.translate(mViewWidth / 2, mViewHeight / 2);
if (innerCirclePath == null)
innerCirclePath = new Path();