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 開源專案