Android 声纹进度播放效果（自定义View）

Posted 2022-01-08 玖流之辈

android 声纹进度播放效果（自定义View）

描述：这是一个 声纹进度播放效果的Demo。

项目代码在最后面！！！！跳转到最后

控件效果如下：

实现功能：

• 声纹可随机显示也可固定
• 可自定义加载前后两种颜色

设计核心：

主要的设计核心是依赖于drawRoundRect方法进行声纹条形的绘制。

核心代码：

VoiceProgressView.java 一个声纹进度播放的自定义View 可直接载入layout

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import java.security.SecureRandom;
import java.util.ArrayList;
import java.util.List;

/**
 * 声纹显示View
 * tangxianfeng
 * 2021.12.19
 */

public class VoiceProgressView extends View 

    private int max = 0; //最大刻度

    private int mRectHeight = 0; //高度
    private int mRectWeight = 0; //宽度
    private Paint mAfterPaint;
    private Paint mBeforePaint;

    private int mBeforeProgress;//百分比
    private List<Integer> intArray = new ArrayList<>();//内置声纹长度

    public VoiceProgressView(Context context) 
        this(context, null);
    

    public VoiceProgressView(Context context, AttributeSet attrs) 
        this(context, attrs, -1);
    

    public VoiceProgressView(Context context, AttributeSet attrs, int defStyleAttr) 
        super(context, attrs, defStyleAttr);
        if (mAfterPaint==null)
            mAfterPaint=new Paint();
            mAfterPaint.setColor(Color.parseColor("#356BD8"));
            mAfterPaint.setAntiAlias(true);
        
        if (mBeforePaint==null)
            mBeforePaint=new Paint();
            mBeforePaint.setColor(Color.parseColor("#ABC8F2"));
            mBeforePaint.setAntiAlias(true);
        
    

    @Override
    protected void onDraw(Canvas canvas) 
        if (mRectHeight==0)
            mRectHeight=getHeight();
        
        if (mRectWeight==0)
            mRectWeight=getWidth();
        
        if (max==0)
            max=mRectWeight/16;
        
        onDrawVoice(canvas); //画声纹
        super.onDraw(canvas);
    

    /**
     * 画刻度
     * */
    private void onDrawVoice(Canvas canvas)
        if (intArray==null||intArray.size()==0)
            SecureRandom secureRandom=new SecureRandom();
            for (int i=0;i<max+1;i++)
                int height=secureRandom.nextInt(40)+15;
                intArray.add(height);
            
        //比实际声纹条数多一
        if(canvas == null) return;
        for(int i=1; i<max; i++)
            float height=intArray.get(i%intArray.size());
            //刻度间距
            int mScaleMargin = 16;
            canvas.drawRoundRect(i* mScaleMargin,(mRectHeight+height)/2,i* mScaleMargin +8,(mRectHeight-height)/2,5,5,i<mBeforeProgress?mAfterPaint:mBeforePaint);//播放前后的颜色替换
        
    


    //设置默认声纹 可传数组20，25，38，19，40，25，30，38
    public void setIntArray(List<Integer> intArray) 
        this.intArray = intArray;
    

    //设置百分百
    public void setProgress(float progress)
        if (progress>100)
            progress=100;
        else if (progress<0)
            progress=0;
        
        mBeforeProgress= (int) (max*progress/100);
        postInvalidate();
    

    //自定义声纹颜色 传入类型#356BD8
    public void initPaintColor(String beforecolor,String aftercolor)
        if (!beforecolor.contains("#")||!aftercolor.contains("#"))
            return;
        //颜色格式需要含#号 简单判断处理下 不然会出错

        if (mAfterPaint!=null)
            mAfterPaint.setColor(Color.parseColor(beforecolor));
        
        if (mBeforePaint!=null)
            mBeforePaint.setColor(Color.parseColor(aftercolor));
        
    

使用示例：

VioceProgressActivity.java

import android.animation.ValueAnimator;
import android.widget.Button;

import com.alibaba.android.arouter.facade.annotation.Route;
import com.ui.design.R;
import com.ui.design.main.base.BaseActivity;
import com.ui.design.main.constants.Constants;
import com.ui.design.view.voicePorgress.view.VoiceProgressView;

@Route(path = Constants.VioceProgressActivity)
public class VioceProgressActivity extends BaseActivity 

    private float progress=0;

    @Override
    protected int initLayout() 
        return R.layout.activity_vioce_progress;
    

    @Override
    protected void initView() 
        VoiceProgressView voiceProgressView=findViewById(R.id.voice_progress);
        Button plus=findViewById(R.id.plus);
        Button delete=findViewById(R.id.delete);
        Button play=findViewById(R.id.play);
        play.setOnClickListener(v -> 
            progress=0;
            ValueAnimator valueAnimator=ValueAnimator.ofFloat(0f, 100f);
            valueAnimator.setDuration(3000);
            valueAnimator.addUpdateListener(animation -> 
                progress= (float) animation.getAnimatedValue();
                voiceProgressView.setProgress(progress);
            );
            valueAnimator.start();
        );
        plus.setOnClickListener(v -> 
            progress=progress+5;
            voiceProgressView.setProgress(progress);
        );
        delete.setOnClickListener(v -> 
            progress=progress-5;
            voiceProgressView.setProgress(progress);
        );

    

    @Override
    protected void initData() 

    

layout:voice_progress.xml

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".view.voicePorgress.VioceProgressActivity">

    <include
        android:id="@+id/include2"
        layout="@layout/title_include" />

    <com.ui.design.view.voicePorgress.view.VoiceProgressView
        android:id="@+id/voice_progress"
        android:layout_width="250dp"
        android:layout_gravity="center"
        android:layout_height="40dp"
        android:layout_marginTop="200dp"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        android:text="播放"/>
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/plus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        android:text="加"/>


    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        android:text="减"/>
</LinearLayout>

项目代码仓库

如果直接复制可能会出现代码缺陷，完整代码请去仓库下载
如果觉得还行，耽误您几秒钟的时间去我的仓库点点star，万一以后用到了呢？

UIDesign 开源项目