可调节音量View

一、需求简述

1、定义音量调节View（如图示）

2、通过监听供调用者使用


image.png

二、实现

1、由于seekbar定义给开发者开放的只能定义规则一级、二级背景或滑块，如实现如图所示不规则的我们可以自己在onDraw()方法内根据progress值绘制灰色背景和上面二级背景

2、绘制的图形拆分：先绘制半个圆、在绘制一个梯形、在绘制另外一个圆

三、具体代码实现

1、定义VolumeSeekbar所需要的属性，如背景、进度条背景、梯形最小高度及最大高度

    <declare-styleable name="VolumeSeekbar">
        <attr name="seekBarBgColor" format="color" />
        <attr name="seekBarProgressColor" format="color" />
        <attr name="seekBarMaxHeight" format="dimension" />
        <attr name="seekBarMinHeight" format="dimension" />
    </declare-styleable>

2、重写SeekBar内onDraw()方法，向画布绘制背景及根据进度绘制半圆及梯形

package com.chiyue.qiye.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.SeekBar;

import com.chiyue.qiye.R;
import com.chiyue.qiye.service.AudioServiceManager;
import com.chiyue.qiye.utils.DensityUtil;

/**
 * 音量seekbar
 *
 * @date 2018/12/12 下午3:21
 * @author: kaily_zhou
 */
public class VolumeSeekbar extends android.support.v7.widget.AppCompatSeekBar implements SeekBar.OnSeekBarChangeListener {
    private OnSeekBarChangeListener onSeekBarChangeListener;
    private Paint paint;
    private Paint progressPaint;
    public final static String TAG = "VolumeSeekbar";
    public final static int BG_DEFAULT_COLOR = 0XFFF1F1F1;
    public final static int PROGRESS_DEFAULT_COLOR = 0XFFF5B92E;
    public final static int MAX_HEIGHT = 16;
    public final static int MIN_HEIGHT = 8;
    private int maxHeight;
    private int minHeight;
    private int maxProgress;
    private int bgColor;
    private int progressColor;

    public VolumeSeekbar(Context context) {
        super(context);
        init(context, null);
    }

    public VolumeSeekbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public VolumeSeekbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attributeSet) {
        initAttr(context, attributeSet);
        initPaint(context);
        initListener();
        setPadding(getPaddingLeft(), getPaddingTop(), maxHeight / 2, getPaddingBottom());
    }

    private void initAttr(Context context, AttributeSet attrs) {
        if (attrs != null) {
            try {
                TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.VolumeSeekbar);
                if (typedArray != null) {
                    bgColor = typedArray.getColor(R.styleable.VolumeSeekbar_seekBarBgColor, BG_DEFAULT_COLOR);
                    progressColor = typedArray.getColor(R.styleable.VolumeSeekbar_seekBarProgressColor, PROGRESS_DEFAULT_COLOR);
                    maxHeight = typedArray.getDimensionPixelSize(R.styleable.VolumeSeekbar_seekBarMaxHeight, DensityUtil.dip2px(context, MAX_HEIGHT));
                    minHeight = typedArray.getDimensionPixelSize(R.styleable.VolumeSeekbar_seekBarMinHeight, DensityUtil.dip2px(context, MIN_HEIGHT));
                    typedArray.recycle();
                } else {
                    initDefaultAttr(context);
                }
            } catch (Exception e) {
                initDefaultAttr(context);
            }
        } else {
            initDefaultAttr(context);
        }

    }

    private void initDefaultAttr(Context context) {
        bgColor = BG_DEFAULT_COLOR;
        progressColor = PROGRESS_DEFAULT_COLOR;
        maxHeight = DensityUtil.dip2px(context, MAX_HEIGHT);
        minHeight = DensityUtil.dip2px(context, MIN_HEIGHT);
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        if (width > 0) {
            int height = Math.max(maxHeight, minHeight);
            setMeasuredDimension(width, height);
        }
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        int width = getMeasuredWidth();
        //画背景
        drawSeekBarBg(width, canvas);
        width = width - (maxHeight / 2);
        maxProgress = getMax();
        if (maxProgress <= 0) {
            return;
        }
        double progressWidth = width * ((float) getProgress() / (float) maxProgress);
        if (progressWidth < minHeight / 2) {
            drawSeekBarProgressHeader(progressWidth, canvas);
        } else {
            drawSeekBarProgressHeader((double) minHeight / (double) 2, canvas);
            drawSeekBarProgress(width, progressWidth, canvas);
        }
    }


    private void drawSeekBarBg(int width, Canvas canvas) {
        //中间梯形
        Path path = new Path();
        path.moveTo(minHeight / 2, (maxHeight - minHeight) / 2);
        path.lineTo(width - (maxHeight / 2), 0);
        path.lineTo(width - (maxHeight / 2), maxHeight);
        path.lineTo(minHeight / 2, (maxHeight + minHeight) / 2);
        path.close();
        canvas.drawPath(path, paint);
        //画左边半圆
        Path pathLeft = new Path();
        RectF mRectF = new RectF(0, (maxHeight - minHeight) / 2, minHeight, (maxHeight + minHeight) / 2);
        pathLeft.arcTo(mRectF, 90, 180);
        pathLeft.close();
        canvas.drawPath(pathLeft, paint);
        //画右边半圆
        Path pathRight = new Path();
        RectF rectF = new RectF(width - maxHeight, 0, width, maxHeight);
        pathRight.arcTo(rectF, 270, 180);
        pathRight.close();
        canvas.drawPath(pathRight, paint);
    }

    private void drawSeekBarProgressHeader(double progressWidth, Canvas canvas) {
        float ratio = (float) progressWidth / ((float) minHeight / (float) 2);
        float angle = (180 - ratio * 180) / (float) 2;
        Path pathLeft = new Path();
        RectF mRectF = new RectF(0, (maxHeight - minHeight) / 2, minHeight, maxHeight / 2 + minHeight / 2);
        pathLeft.arcTo(mRectF, 90 + angle, 180 - angle * 2);
        pathLeft.close();
        canvas.drawPath(pathLeft, progressPaint);
    }

    private void drawSeekBarProgress(int width, double progressWidth, Canvas canvas) {
        int w = width - (minHeight / 2);
        int h = (maxHeight - minHeight) / 2;
        double z = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
        double pw = progressWidth - minHeight / 2;
        double pz = pw * z / (double) w;
        double ph = (int) Math.sqrt(Math.pow(pz, 2) - Math.pow(pw, 2));
        double top = (maxHeight - minHeight) / 2 - ph;

        Path progressPath = new Path();
        progressPath.moveTo(minHeight / 2, (maxHeight - minHeight) / 2);
        progressPath.lineTo((int) progressWidth, (int) top);
        progressPath.lineTo((int) progressWidth, (int) (maxHeight - top));
        progressPath.lineTo(minHeight / 2, (maxHeight + minHeight) / 2);
        progressPath.close();
        canvas.drawPath(progressPath, progressPaint);

        //画右边半圆
        double radius = (maxHeight - top * 2) / (double) 2;
        Path pathRight = new Path();
        RectF rectF = new RectF((int) (progressWidth - radius), (int) top, (int) (progressWidth + radius), (int) (top + radius * 2));
        pathRight.arcTo(rectF, 270, 180);
        pathRight.close();
        canvas.drawPath(pathRight, progressPaint);
    }

    @Override
    public void setOnSeekBarChangeListener(OnSeekBarChangeListener onSeekBarChangeListener) {
        this.onSeekBarChangeListener = onSeekBarChangeListener;
    }

    private void initListener() {
        super.setOnSeekBarChangeListener(this);
    }

    private void initPaint(Context context) {
        if (context == null) {
            return;
        }
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setStyle(Paint.Style.FILL);
        paint.setDither(true);
        paint.setAntiAlias(true);
        paint.setColor(bgColor);

        progressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        progressPaint.setStyle(Paint.Style.FILL);
        progressPaint.setDither(true);
        progressPaint.setAntiAlias(true);
        progressPaint.setColor(progressColor);
    }

    @Override
    public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
        if (onSeekBarChangeListener != null) {
            onSeekBarChangeListener.onProgressChanged(seekBar, i, b);
            postInvalidate();
        }
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        if (onSeekBarChangeListener != null) {
            onSeekBarChangeListener.onStartTrackingTouch(seekBar);
        }
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        if (onSeekBarChangeListener != null) {
            onSeekBarChangeListener.onStopTrackingTouch(seekBar);
        }
    }
}

3、VolumeSeekbar使用

xml定义
<com.chiyue.qiye.view.VolumeSeekbar
            android:id="@+id/seekBarVoice"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="13dp"
            android:background="@null"
            android:thumb="@null"
            app:seekBarBgColor="#F1F1F1"
            app:seekBarMaxHeight="16dip"
            app:seekBarMinHeight="8dip"
            app:seekBarProgressColor="#F5B92E" />
            
           
代码监听           
seekBarVoice.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                AudioServiceManager.get().getMusicService().setVolume(i);
                int currentVolume = AudioServiceManager.get().getMusicService().getCurrentVolume();
                int maxVolume = AudioServiceManager.get().getMusicService().getMaxVolume();
                seekBar.setProgress(currentVolume);
                tvVoice.setText(currentVolume * 100 / maxVolume + "%");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 210,914评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 89,935评论 2赞 383
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,531评论 0赞 345
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,309评论 1赞 282
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,381评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,730评论 1赞 289
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,882评论 3赞 404
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,643评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,095评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,448评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,566评论 1赞 339
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,253评论 4赞 328
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,829评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,715评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,945评论 1赞 264
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,248评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,440评论 2赞 348