1. 效果图
visualizer_test.gif
2. 完整代码
/**
* VisualizerView
* Created by QiuLong on 2021/4/2.
*/
public class VisualizerView extends View implements ValueAnimator.AnimatorUpdateListener {
private final static int DEFAULT_COLOR = 0xFF0C0D13;//默认颜色
private final static int[] GRADIENT_COLORS = new int[]{0xFF30C7FF, 0xFF2DFFAD, 0xFFF2FF21, 0xFFE89719, 0xFFFF2727};// 渐变颜色
private LinearGradient mLinearGradient;
private final static int ROWS_NUMBER = 11;// 条形的数量
private final static int WIDTH_SCALE = 6;// 宽度的比例
private final Paint mPaint;
private final Path mPath;
private final RectF mRectF;
private int mRealWidth, mRealHeight;
private float mRectHeight;// 单行的高度
private float mRectMinWidth;// 最短行的宽度
private final ValueAnimator mValueAnimator;
private float mSampleValue;//采样值0~1
private boolean isPlaying = true;
public VisualizerView(Context context) {
this(context, null);
}
public VisualizerView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public VisualizerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.BLUE);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setShader(mLinearGradient);
mPath = new Path();
mRectF = new RectF();
mValueAnimator = new ValueAnimator();
mValueAnimator.setFloatValues();
mValueAnimator.setDuration(200);
mValueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
mValueAnimator.addUpdateListener(this);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (w == 0 || h == 0) {
return;
}
// 去掉padding后的实际宽高
mRealWidth = w - getPaddingLeft() - getPaddingRight();
mRealHeight = h - getPaddingTop() - getPaddingBottom();
// 计算每一行的高度、最短一行的宽度、以及行的增长比例
mRectHeight = (h - getPaddingTop() - getPaddingBottom()) / (float) getRowsNumberSum();
mRectMinWidth = mRealWidth / 2.6F;
mLinearGradient = new LinearGradient(0, mRealHeight, 0, 0, GRADIENT_COLORS, null, Shader.TileMode.CLAMP);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//1.绘制默认背景
mPaint.setColor(DEFAULT_COLOR);
mPaint.setShader(null);
drawSpectrum(canvas, 0, ROWS_NUMBER, 1.0f);
if (isPlaying) {
//2.绘制跳动的彩色频谱
float sampleValue = Math.max(0, Math.min(1.0f, mSampleValue));
int pos = (int) (sampleValue * ROWS_NUMBER);
mPaint.setShader(mLinearGradient);
//2.1 绘制完整方块的频谱图
drawSpectrum(canvas, 0, pos - 1, 1.0f);
//2.1 绘制不完整方块的频谱图
float factor = sampleValue * ROWS_NUMBER - pos;
if (factor > 0) {
drawSpectrum(canvas, pos, pos, factor);
}
}
}
private void drawSpectrum(Canvas canvas, int startPos, int endPos, float factor) {
for (int r = ROWS_NUMBER - 1 - startPos; r >= ROWS_NUMBER - 1 - endPos; r--) {
drawRect(canvas, r, factor);
}
}
private void drawRect(Canvas canvas, int position, float factor) {
float radius = mRectHeight / 2f;// 圆弧半径
float maxRectWidth = mRealWidth - radius;// 最大矩形宽度
float minRectWidth = mRectMinWidth - radius;// 最小矩形宽度
// 计算动态改变的柱子实际宽高
float width;
int centerPosition = (ROWS_NUMBER - 1) / 2;// 中心position
float hAverageValue = (maxRectWidth - minRectWidth) / centerPosition;// 柱子的横向增长比例
if (position < centerPosition) {
width = minRectWidth + hAverageValue * position;
} else if (position > centerPosition) {
width = maxRectWidth - hAverageValue * (position - centerPosition);
} else {
width = maxRectWidth;
}
float height = mRectHeight * factor;
// 计算矩形的绘制点
float bottom = mRealHeight - (ROWS_NUMBER - position - 1) * (mRectHeight * 2);
float top = bottom - mRectHeight;
// 开始计算path
mPath.reset();
mRectF.set(width - radius, top, width + radius, bottom);
if (height > mRectHeight / 2f) {
int angle = (int) (Math.asin(height / radius - 1) / Math.PI * 180);
mPath.arcTo(mRectF, 360 - angle, angle);
mPath.arcTo(mRectF, 0, 90);
} else {
int angle = (int) (Math.asin(1 - height / radius) / Math.PI * 180);
mPath.arcTo(mRectF, angle, 90 - angle);
}
mPath.lineTo(getPaddingLeft(), bottom);
mPath.lineTo(getPaddingLeft(), bottom - height);
mPath.close();
canvas.drawPath(mPath, mPaint);
}
private int getRowsNumberSum() {
return ROWS_NUMBER * 2 - 1;
}
public boolean isPlaying() {
return isPlaying;
}
public void setPlaying(boolean playing) {
mSampleValue = 0;
isPlaying = playing;
cancelAnimator();
postInvalidate();
}
public void onCaptureChanged(float[] fft) {
if (isPlaying) {
cancelAnimator();
// fft就是音频的数据源，newValue目前只是一个随机数
float newValue = new Random().nextInt(100) / 100.f;
mValueAnimator.setFloatValues(mSampleValue, newValue);
mSampleValue = newValue;
mValueAnimator.start();
}
}
private void cancelAnimator() {
if (mValueAnimator.isRunning()) {
mValueAnimator.cancel();
}
}
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mSampleValue = (float) animation.getAnimatedValue();
postInvalidate();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 根据高度按比例测量控件宽度
setMeasuredDimension(getDefaultSize(0, widthMeasureSpec), getDefaultSize(0, heightMeasureSpec));
int measureWidth = getMeasuredHeight() / getRowsNumberSum() * WIDTH_SCALE;
super.onMeasure(View.MeasureSpec.makeMeasureSpec(measureWidth, View.MeasureSpec.EXACTLY),
View.MeasureSpec.makeMeasureSpec(getMeasuredHeight(), View.MeasureSpec.EXACTLY));
}
}
3. xml布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF22272A"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<com.qiulong.testdemo.view.VisualizerView
android:id="@+id/left_visualizer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left" />
<com.qiulong.testdemo.view.VisualizerView
android:id="@+id/right_visualizer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:rotationY="-180" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="播放" />
</FrameLayout>
</LinearLayout>
4. Activity使用
这里用采用Handler来模拟音频的数据源，实际在监听回调函数中调用onCaptureChanged方法即可
public class MainActivity extends AppCompatActivity {
private VisualizerView visualizerLeft, visualizerRight;
private final Handler handler = new Handler(Looper.myLooper());
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
visualizerLeft = findViewById(R.id.left_visualizer);
visualizerRight = findViewById(R.id.right_visualizer);
handler.postDelayed(new Runnable() {
@Override
public void run() {
visualizerLeft.onCaptureChanged(null);
visualizerRight.onCaptureChanged(null);
handler.postDelayed(this, 100);
}
}, 500);
final Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (visualizerLeft.isPlaying() && visualizerRight.isPlaying()) {
visualizerLeft.setPlaying(false);
visualizerRight.setPlaying(false);
button.setText("播放");
} else {
visualizerLeft.setPlaying(true);
visualizerRight.setPlaying(true);
button.setText("暂停");
}
}
});
}
}
