关于android:Android-自定义View-柱状波形图-wave-view

40次阅读

共计 8570 个字符，预计需要花费 22 分钟才能阅读完成。

前言

柱状波形图是一种常见的图形。一个个柱子按顺序排列，形成一个波形图。

柱子的高度由输出数据决定。如果输出的是音频的音量，则可失去一个声波图。

在一些音频软件中，咱们也能够左右拖动声波，来扭转音频的播放进度

本文举例的自定 View，实现如下性能：

  • 以柱状模式展现数据的大小
  • 表明图形以后最两头的数据
  • 能够横向拖动进度，进度就是让某个特定的数据居中展现
  • 能够扭转左右两边的柱子色彩
  • 能够调整柱子的宽度
  • 拖动结束后监听以后进度

实现

首先创立类 SoundWaveView 继承自View

咱们能够先记录给定的宽高，不便前面找到 View 的两头点

private int viewWid = 1000;     // px
private int viewHeight = 100;   // px

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);
    viewWid = w;
    viewHeight = h;
    // ..
}

根本属性

例如柱子的色彩，宽度。能够设置个属性来记录，并凋谢进来可由内部来设置。

private float barWidDp = 1.5f;
private float barWidPx = 3f;
private float barGapPx = barWidPx / 2;
private int barCount = 1;       // 以后宽度能绘制多少个柱子

private final Paint paint = new Paint();
private int leftColor = Color.GREEN;
private int rightColor = Color.LTGRAY;
private int middleLineColor = Color.parseColor("#55000000");

设计监听器

拖动结束后，能够将以后进度告诉进来。也能够间接把触摸事件传出去。

public interface OnEvent {void onMoveEnd(); // 进行拖动了

    void onDragTouchEvent(MotionEvent event);
}

private OnEvent onEventListener;

private void tellOnMoveEnd() {if (onEventListener != null) {onEventListener.onMoveEnd();
    }
}

绘制图形

在 onDraw 办法中依据数据绘制图形

本例没有设计背景，间接绘制数据。

图形需要之一是要求某个数据能居中显示，咱们用 midIndex 来标记这个数据的下标。

比较简单粗犷的实现办法，遍历整个数据列表，计算出每个数据的 x 坐标。超出范围的不绘制，范畴内的逐个绘制。

@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);
    if (dataList == null || dataList.isEmpty()) {
        // draw nothing
        drawMiddleLine(canvas);
        return;
    }
    float x0 = viewWid / 2.0f;

    if (midIndex > 0) {x0 = x0 - (barGapPx + barWidPx) * midIndex; // 可能是正数
    }
    for (int i = 0; i < dataList.size(); i++) {float d = dataList.get(i);
        float x = x0 + (barWidPx + barGapPx) * i;
        if (x < 0) {continue;}
        if (x > viewWid) {break;}
        if (i <= midIndex) {paint.setColor(leftColor);
        } else {paint.setColor(rightColor);
        }
        paint.setStrokeWidth(barWidPx);
        float bh = (d / showMaxData) * viewHeight;
        bh = Math.max(bh, 4); // 最小也要一点高度 (1)
        float bhGap = (viewHeight - bh) / 2f;
        canvas.drawLine(x, bhGap, x, viewHeight - bhGap, paint);
    }

    drawMiddleLine(canvas);
}

private void drawMiddleLine(Canvas canvas) {paint.setColor(middleLineColor);
    canvas.drawLine(viewWid / 2f, 0, viewWid / 2f, viewHeight, paint);
}
  1. 如果数据太小，为了更好看，也要显示一点货色

左右拖动

本例给出的思路是在 SoundWaveView 中间接获取触摸事件并进行解决。

简略辨别一下模式，分为纯展现和可拖动模式

/**
* 单纯播放 展现 无交互
*/
public static final int MODE_PLAY = 1;

/**
* 容许左右拖动
*/
public static final int MODE_CAN_DRAG = 2;

复写 onTouchEvent 办法，如果是 MODE_CAN_DRAG 模式，则拦挡触摸事件。判断拖动的横向（x）间隔。

@Override
public boolean onTouchEvent(MotionEvent event) {if (mode == MODE_CAN_DRAG) {switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                float dx = (downX - event.getX()); // 不要那么灵活
                float movePercent = dx / viewWid;
                int dIndex = (int) (movePercent * barCount);
                int targetMidIndex = downOldMidIndex + dIndex;
                targetMidIndex = Math.max(0, targetMidIndex);
                targetMidIndex = Math.min(targetMidIndex, dataList.size() - 1);
                setMidIndex(targetMidIndex);
                Log.d(TAG, "onTouchEvent-MOVE; dx:" + dx + ", dIndex:" + dIndex + "; targetMidIndex:" + targetMidIndex);
                break;
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downOldMidIndex = midIndex;
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                downOldMidIndex = midIndex;
                tellOnMoveEnd();
                break;
        }
        if (onEventListener != null) {onEventListener.onDragTouchEvent(event);
        }
        return true;
    }
    return super.onTouchEvent(event);
}

残缺代码

文件SoundWaveView.java，这个 view 次要目标是展示声波，取名为「SoundWave」

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

import androidx.annotation.Nullable;

import java.util.ArrayList;
import java.util.List;

/**
 * @author an.rustfisher.com
 */
public class SoundWaveView extends View {
    private static final String TAG = "rustAppSoundWaveView";

    /**
     * 单纯播放 展现 无交互
     */
    public static final int MODE_PLAY = 1;

    /**
     * 容许左右拖动
     */
    public static final int MODE_CAN_DRAG = 2;

    private int mode = MODE_PLAY; // 1 播放
    private List<Float> dataList = new ArrayList<>(100);
    private float showMaxData = 40f; // 能显示的最大数据
    private int midIndex = 0;   // 在两头显示的数据的下标
    private float barWidDp = 1.5f;
    private float barWidPx = 3f;
    private float barGapPx = barWidPx / 2;
    private int barCount = 1;       // 以后宽度能绘制多少个柱子
    private int viewWid = 1000;     // px
    private int viewHeight = 100;   // px

    private final Paint paint = new Paint();
    private int leftColor = Color.GREEN;
    private int rightColor = Color.LTGRAY;
    private int middleLineColor = Color.parseColor("#55000000");

    private float downX = 0; // getX
    private int downOldMidIndex = 0;

    public interface OnEvent {void onMoveEnd(); // 进行拖动了

        void onDragTouchEvent(MotionEvent event);
    }

    private OnEvent onEventListener;

    public SoundWaveView(Context context) {this(context, null);
    }

    public SoundWaveView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);
    }

    public SoundWaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);
        paint.setColor(Color.BLUE);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);
        viewWid = w;
        viewHeight = h;
        calBarPara();
        Log.d(TAG, "onSizeChanged:" + w + "," + h);
        Log.d(TAG, "onSizeChanged: barWidPx:" + barWidPx);
    }

    @Override
    protected void onDraw(Canvas canvas) {super.onDraw(canvas);
        if (dataList == null || dataList.isEmpty()) {
            // draw nothing
            drawMiddleLine(canvas);
            return;
        }
        float x0 = viewWid / 2.0f;

        // 绘制数据
        if (midIndex > 0) {x0 = x0 - (barGapPx + barWidPx) * midIndex; // 可能是正数
        }
        for (int i = 0; i < dataList.size(); i++) {float d = dataList.get(i);
            float x = x0 + (barWidPx + barGapPx) * i;
            if (x < 0) {continue;}
            if (x > viewWid) {break;}
            if (i <= midIndex) {paint.setColor(leftColor);
            } else {paint.setColor(rightColor);
            }
            paint.setStrokeWidth(barWidPx);
            float bh = (d / showMaxData) * viewHeight;
            bh = Math.max(bh, 4); // 最小也要一点高度
            float bhGap = (viewHeight - bh) / 2f;
            canvas.drawLine(x, bhGap, x, viewHeight - bhGap, paint);
        }
        drawMiddleLine(canvas);
    }

    private void drawMiddleLine(Canvas canvas) {paint.setColor(middleLineColor);
        canvas.drawLine(viewWid / 2f, 0, viewWid / 2f, viewHeight, paint);
    }

    public float getMidByPercent() {return midIndex / (float) (dataList.size() - 1);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {if (mode == MODE_CAN_DRAG) {switch (event.getAction()) {
                case MotionEvent.ACTION_MOVE:
                    float dx = (downX - event.getX()); // 不要那么灵活
                    float movePercent = dx / viewWid;
                    int dIndex = (int) (movePercent * barCount);
                    int targetMidIndex = downOldMidIndex + dIndex;
                    targetMidIndex = Math.max(0, targetMidIndex);
                    targetMidIndex = Math.min(targetMidIndex, dataList.size() - 1);
                    setMidIndex(targetMidIndex);
                    Log.d(TAG, "onTouchEvent-MOVE; dx:" + dx + ", dIndex:" + dIndex + "; targetMidIndex:" + targetMidIndex);
                    break;
                case MotionEvent.ACTION_DOWN:
                    downX = event.getX();
                    downOldMidIndex = midIndex;
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    downOldMidIndex = midIndex;
                    tellOnMoveEnd();
                    break;
            }
            if (onEventListener != null) {onEventListener.onDragTouchEvent(event);
            }
            return true;
        }
        return super.onTouchEvent(event);
    }

    public void setMode(int mode) {this.mode = mode;}

    public int getMode() {return mode;}

    public int getMidIndex() {return midIndex;}

    public List<Float> getDataList() {return dataList;}

    public void setOnEventListener(OnEvent onEventListener) {this.onEventListener = onEventListener;}

    public void clear() {dataList = new ArrayList<>();
        midIndex = 0;
        invalidate();}

    private void calBarPara() {barWidPx = dp2Px(barWidDp);
        barGapPx = barWidPx;
        barCount = (int) ((viewWid - barGapPx) / (barWidPx + barGapPx));
        paint.setStrokeWidth(barWidPx);
        Log.d(TAG, "calBarPara: barCount:" + barCount);
    }

    public void setDataList(List<Float> input) {dataList = new ArrayList<>(input);
        midIndex = 0;
        invalidate();}

    public void setMidIndex(int midIndex) {
        this.midIndex = midIndex;
        invalidate();}

    public void setMidEnd() {setMidIndex(dataList.size() - 1);
    }

    // 设置以后播放进度
    public void setPlayPercent(float percent) {midIndex = (int) (percent * (dataList.size() - 1));
        if (percent >= 1) {midIndex = dataList.size() - 1;
        }
        invalidate();}

    public void setShowMaxData(float showMaxData) {this.showMaxData = showMaxData;}

    public float getShowMaxData() {return showMaxData;}

    // 不停地插入数据
    public void addDataEnd(float f) {dataList.add(f);
        midIndex = dataList.size() - 1;
        invalidate();}

    public void setLeftColor(int leftColor) {this.leftColor = leftColor;}

    public void setRightColor(int rightColor) {this.rightColor = rightColor;}

    private float dp2Px(float dp) {float density = getContext().getResources().getDisplayMetrics().density;
        int mark = dp > 0 ? 1 : -1;
        return dp * density * mark;
    }

    private void tellOnMoveEnd() {if (onEventListener != null) {onEventListener.onMoveEnd();
        }
    }
}

layout 中应用

<com.rustfisher.tutorial2020.customview.soundwave.SoundWaveView
    android:id="@+id/sound_wave_view"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginTop="4dp"
    android:background="@android:color/white"
    app:layout_constraintTop_toTopOf="parent" />

activity 中应用模仿数据

private void setData1() {List<Float> dataList = new ArrayList<>();
    for (int i = 0; i < 1000; i++) {dataList.add((float) (Math.random() * soundWaveView.getShowMaxData()));
    }
    soundWaveView.setDataList(dataList);
    soundWaveView.setMidIndex(0);

    soundWaveView.setOnEventListener(new SoundWaveView.OnEvent() {
        @Override
        public void onMoveEnd() {Log.d(TAG, "onMoveEnd:" + soundWaveView.getMidIndex());
        }

        @Override
        public void onDragTouchEvent(MotionEvent event) {// 在这里能够收到触摸事件}
    });
}

运行示例：

咱们也能够扩大一下，假如不应用柱子，也能够把相邻点连接起来，造成折线图的样子。

相干代码在：AndroidTutorial – gitee

扩大浏览

  • 自定义 SurfaceView
  • 主动缩放上上限的折线图
  • 监听者模式 – 在 Java 与 Android 中的应用

正文完
android
发表至： android
2022-08-15
 0
关于腾讯地图:基于腾讯位置服务定位实现物业巡检防作弊场景
关于android:使用-Jetpack-ActivityResult-处理-Activity-之间的数据通信
关于android:运用-Flutter-快速构建高质量用户体验｜Google-Play-开发者播客节目-第十六期
关于android:拿捏了这样的购物体验才深得用户心