文档章节

Android 自定义View 视频音量调控

Jingbin_
 Jingbin_
发布于 2017/01/01 23:58
字数 1105
阅读 11
收藏 0

转载至:http://blog.csdn.net/lmj623565791/article/details/24529807
自己重新实现了一遍,并在其中增加了详细的注释,以及优解决了音量可以无限加载的问题。

首先还是先看看效果图:

今天没事逛eoe,看见有人求助要做一个下面的效果,我看下面一哥们说要用12张图片,这尼玛逆天的麻烦,仔细看了一下感觉自定义控件木有问题,就花点时间写了一个。

好了,进入正题,继续我们的自定义View四部曲。

  • 1、自定义View的属性
  • 2、在View的构造方法中获得我们自定义的属性
  • [ 3、重写onMesure ]
  • 4、重写onDraw

1、先分许需要的属性,两个小块的颜色、一张中间的图片、间隙大小、一个多少个块块。分析完毕,开始写attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--CustomVolumControlBar-->
    <attr name="vFirstColor" format="color" />
    <attr name="vSecondColor" format="color" />
    <attr name="vCircleWidth" format="dimension" />
    <attr name="vDotCount" format="integer" />
    <attr name="vSplitSize" format="integer" />
    <attr name="vBg" format="reference" /><!--注意格式-->

    <declare-styleable name="CustomVolumControlBar">
        <attr name="vFirstColor" />
        <attr name="vSecondColor" />
        <attr name="vCircleWidth" />
        <attr name="vDotCount" />
        <attr name="vSplitSize" />
        <attr name="vBg" />

    </declare-styleable>
</resources>

2、在构造中获取这些属性:

/ 第一个圆的颜色
    private int mFirstColor;
    // 第二个圆的颜色
    private int mSecondColor;
    // 圆弧的宽度
    private int mCircleWidth;
    // 个数
    private int mDotCount;
    // 每个块块之间的间隙
    private int mSplitSize;
    // 中间的图片
    private Bitmap mBg;
    // 当前进度
    private int mCurrentCount = 1;
    // 画笔
    private Paint mPaint;
    private Rect mRect;

public CustomVolumControlBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomVolumControlBar, defStyleAttr, 0);
        int indexCount = typedArray.getIndexCount();
        for (int i = 0; i < indexCount; i++) {
            int arr = typedArray.getIndex(i);
            switch (arr) {
                case R.styleable.CustomVolumControlBar_vFirstColor:
                    mFirstColor = typedArray.getColor(arr, Color.BLACK);
                    break;
                case R.styleable.CustomVolumControlBar_vSecondColor:
                    mSecondColor = typedArray.getColor(arr, Color.WHITE);
                    break;
                case R.styleable.CustomVolumControlBar_vCircleWidth:
                    mCircleWidth = typedArray.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CustomVolumControlBar_vDotCount:
                    mDotCount = typedArray.getInt(arr, 20);
                    break;
                case R.styleable.CustomVolumControlBar_vSplitSize:
                    mSplitSize = typedArray.getInt(arr, 20);
                    break;
                case R.styleable.CustomVolumControlBar_vBg:
                    mBg = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(arr, 0));
                    break;
            }
        }
        typedArray.recycle();
        mPaint = new Paint();
        mRect = new Rect();
    }

3、重写onDraw

@Override
    protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(mCircleWidth);
        mPaint.setStrokeCap(Paint.Cap.ROUND);//定义线段断电形状为圆头
        mPaint.setStyle(Paint.Style.STROKE);// 设置空心
        int center = getWidth() / 2;// 获取圆心x坐标
        int radius = center - mCircleWidth / 2;// 半径(***圆边在圆环的中间***)
        /** * 椭圆 */
        drawOval(canvas, center, radius);

        /** * 计算内切正方形的位置 */
        int relRadius = radius - mCircleWidth / 2;// 获得内圆的半径

        /** * 内切正方形距离左边的距离(或顶部): * (内圆半径 - (更2 / 2) * 内圆半径) + 圆弧的宽度 */
        mRect.left = (int) (relRadius - Math.sqrt(2) / 2 * relRadius) + mCircleWidth;
        mRect.top = (int) (relRadius - Math.sqrt(2) / 2 * relRadius) + mCircleWidth;
        /** * 内切正方形距离左边的距离 + 正方形的边长(Math.sqrt(2) * relRadius) */
        mRect.right = (int) (mRect.left + Math.sqrt(2) * relRadius);
        mRect.bottom = (int) (mRect.left + Math.sqrt(2) * relRadius);


        /** * 如果图片比较小,那么根据图片的尺寸放置到正中心 */
        if (mBg.getWidth() < Math.sqrt(2) * relRadius) {
            mRect.left = mCircleWidth + (relRadius - mBg.getWidth() / 2);
            mRect.top = mCircleWidth + (relRadius - mBg.getWidth() / 2);
            mRect.right = mCircleWidth + (relRadius + mBg.getWidth() / 2);
            mRect.bottom = mCircleWidth + (relRadius + mBg.getWidth() / 2);
        }
        canvas.drawBitmap(mBg, null, mRect, mPaint);

    }

    /** * 根据参数画出每个小块 */
    private void drawOval(Canvas canvas, int center, int radius) {
        /** * 根据需要的个数以及间隙计算每个块块所占的比例 * 360 ---> 每个块的大小 * ( 360 - 块个数 * 间距 ) / 块的个数 */
        float itemSize = (360 * 1.0f - mDotCount * mSplitSize) / mDotCount;
        // 用于定义的圆的形状和大小的界限
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);

        /** * 画圆环的第一种颜色 */
        mPaint.setColor(mFirstColor);// 设置圆环的颜色
        for (int i = 0; i < mDotCount; i++) {
            // 根据进度画圆弧
            canvas.drawArc(oval, (i * (itemSize + mSplitSize)), itemSize, false, mPaint);
        }

        /** * 画圆环的第二种颜色 mCurrentCount */
        mPaint.setColor(mSecondColor);// 设置圆环的颜色
        for (int i = 0; i < mCurrentCount; i++) {
            // canvas.drawArc(rectF, -90, mProgress, false, mPaint);// 根据进度画圆弧
            // 根据进度画圆弧
            canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint);
        }
    }

这里需要注意下:
画块:首先根据块数量和间隙计算,每个块所占的比例。
画图:当图比较大时,直接使用该环内切正方形大小进行约束,当图片比较小时,在正中心的位置绘制。有些数学运算过程,楼主在草稿上画了一会,不复杂,大家自己画画,我就不贴草稿了。

4、添加触摸监听:

    /** * 添加触摸监听 * 当前数量+1 */
    public void up() {
        if (mCurrentCount < mDotCount) {
            mCurrentCount++;
        }
        postInvalidate();
    }

    public void down() {
        if (mCurrentCount > 0) {
            mCurrentCount--;
        }
        postInvalidate();
    }

    private int xDown, xUp;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
// return super.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                xDown = (int) event.getY();
                break;
            case MotionEvent.ACTION_UP:
                xUp = (int) event.getY();
                if (xDown < xUp) {
                    down();
                } else {
                    up();
                }
                break;
        }
        return true;
    }

触摸监听也得很简单哈,基本能实现,大家也可以加个最小距离加速度什么的,都行。

最后,效果图:

效果图

源码点击此处查看

嘿嘿,留个言,顶一个哈~

本文转载自:http://blog.csdn.net/jingbin_/article/details/53072629

Jingbin_
粉丝 0
博文 7
码字总数 3196
作品 1
武汉
私信 提问
android之多媒体篇(一)

Android 4.0.3(Api Level 15)支持的多媒体格式。 注意:有些设备可能支持其他的文件格式。 1.Audio AAC LC/LTP、HE-AACv1(AAC+)、AMR-NB、AMR-WB、MP3、MIDI、Ogg Vorbis、PCM/WAVE、FLAC(...

Chanimalx
2013/03/29
6.1K
0
Android 8.1 SystemUI虚拟导航键加载流程解析

需求 基于MTK 8.1平台定制导航栏部分,在左边增加音量减,右边增加音量加 思路 需求开始做之前,一定要研读SystemUI Navigation模块的代码流程!!!不要直接去网上copy别人改的需求代码,盲...

cczheng
05/14
0
0
MySQL数据库实操教程(34)——SQL语句综合练习

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/lfdfhl/article/details/99702391 自定义View系列教程00–推翻自己和...

谷哥的小弟
08/18
0
0
PDF转Word的利器——ABBYY FineReader

版权声明: https://blog.csdn.net/lfdfhl/article/details/84960682 自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–o...

谷哥的小弟
2018/12/11
0
0
Android的framework层音量控制原理分析--hot(key)处理

Android.media.AudioManager中包含了对android.media.AudioService的跨进程AIDL调用封装。 正常处理过程: 1.调整音量是通过AudioManager间接调用AudioService.adjustStreamVolume方法来完成...

鉴客
2011/11/13
2.8K
3

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部