效果圖
實(shí)現(xiàn)
整體的流程圖如下
上面主要步驟分為3個(gè)
1眉枕、計(jì)算寬度能放下多少列的音頻塊歌径。
2亿絮、計(jì)算每一列中音頻塊的個(gè)數(shù)
3鼠锈、繪制音頻塊
1、計(jì)算寬度能放下多少列的音頻塊晨抡。
設(shè)置音頻塊的寬度為danceWidth氛悬，音頻塊橫向之間的間距為danceGap则剃，那么可以算出能放的列數(shù)：
/**
* 先計(jì)算當(dāng)前寬度能夠放下多少個(gè)音頻塊
*/
val widthNum = (getAvailableWith() / (danceGap + danceWidth)).toInt()
/**
* 獲取可以用的寬度
*/
private fun getAvailableWith() = mCanvasWidth - paddingLeft - paddingRight
2、計(jì)算每一列中音頻塊的個(gè)數(shù)
在算出橫向能放置多少音頻塊后如捅，遍歷橫棍现，然后繪制列中的音頻塊，列中的音頻塊的個(gè)數(shù)跟音頻的高低相關(guān)镜遣，這里實(shí)現(xiàn)方式是通過(guò)Visualizer這個(gè)類(lèi)然后獲取到mRawAudioBytes數(shù)組己肮，
mVisualizer.setDataCaptureListener(new Visualizer.OnDataCaptureListener() {
@Override
public void onWaveFormDataCapture(Visualizer visualizer, byte[] bytes,
int samplingRate) {
BaseVisualizer.this.mRawAudioBytes = bytes;
invalidate();
}
@Override
public void onFftDataCapture(Visualizer visualizer, byte[] bytes,
int samplingRate) {
}
}, Visualizer.getMaxCaptureRate() / 2, true, false);
這里設(shè)置的獲取的mRawAudioBytes數(shù)組的大小是128，數(shù)組的區(qū)間范圍[-128,127],計(jì)算列的時(shí)候這里做了兩個(gè)比較重要的操作悲关，第一個(gè)是怎么把mRawAudioBytes數(shù)組的值與音頻的個(gè)數(shù)做映射朴肺，第二個(gè)是怎么取mRawAudioBytes數(shù)組的值。
/**
* 先計(jì)算當(dāng)前寬度能夠放下多少個(gè)音頻塊
*/
val widthNum = (getAvailableWith() / (danceGap + danceWidth)).toInt()
Log.d(
TAG,
"widthNum $widthNum"
)
/**
* 算出橫向能放多少后坚洽，進(jìn)行繪制
*/
/**
* 繪制的時(shí)候用于標(biāo)記開(kāi)始繪制的位置
*/
var lastDanceRight = paddingLeft.toFloat()
if (widthNum > 0 && mRawAudioBytes != null && mRawAudioBytes.isNotEmpty())
for (i in 0 until widthNum) {
//先算出當(dāng)前高度，然后再算這個(gè)高度能放下多少個(gè)音頻塊
val num = (getAvailableHeight() / (danceHeight + danceGap)).toInt()
val index = (mRawAudioBytes.size) * (i.toFloat() / widthNum)
val b = (mRawAudioBytes[index.toInt()] + 128).toFloat() / 255f
var heightNum =
(b * num).toInt()
if (heightNum < miniNum) {
heightNum = miniNum
}
if (heightNum > maxNum) {
heightNum = maxNum
}
//拿到最頂部的高度
var lastHeight = mCanvasHeight - paddingStart.toFloat()
Log.d(
TAG,
"heightNum $heightNum lastHeight $lastHeight lastDanceRight $lastDanceRight ${mRawAudioBytes[i]} $num $b $index"
)
lastHeight = drawItem(heightNum, lastDanceRight, lastHeight, canvas)
lastDanceRight += danceWidth + danceGap
}
上面做了兩個(gè)映射西土，首先可能有0~n橫讶舰，但是mRawAudioBytes大小是128，遍歷橫的時(shí)候?qū)ο聵?biāo)進(jìn)行一個(gè)映射需了，保證獲得的值是均勻的跳昼，
/**
通過(guò)這個(gè)映射得到index
*/
val index = (mRawAudioBytes.size) * (i.toFloat() / widthNum)
第二個(gè)映射，是得到了代表音頻大小的mRawAudioBytes數(shù)組肋乍，現(xiàn)在要把這里面的值跟列的高度做一個(gè)映射鹅颊，值越大高度越高，音頻塊就越多墓造。
val num = (getAvailableHeight() / (danceHeight + danceGap)).toInt()
val b = (mRawAudioBytes[index.toInt()] + 128).toFloat() / 255f
var heightNum =(b * num).toInt()
上面是先得到列最多能展示多少音頻塊堪伍，再根據(jù)mRawAudioBytes的值來(lái)算出當(dāng)前列展示多少個(gè)音頻塊。這一步也叫歸一化觅闽，區(qū)間映射帝雇。
3、繪制每一個(gè)音頻塊
private fun drawItem(
heightNum: Int,
lastDanceRight: Float,
lastHeight: Float,
canvas: Canvas?
): Float {
var lastHeight1 = lastHeight
for (j in 0 until heightNum) {
mDanceRect.set(
lastDanceRight,
lastHeight1 - danceHeight,
lastDanceRight + danceWidth,
lastHeight1
)
mPaint.shader = null
if (j >= heightNum - shaderNum) {
val backGradient = LinearGradient(
lastDanceRight,
lastHeight1 - danceHeight,
lastDanceRight + danceWidth,
lastHeight1,
intArrayOf(colorStart, colorCenter, colorEnd),
null,
Shader.TileMode.CLAMP
)
mPaint.shader = backGradient
}
canvas?.drawRoundRect(mDanceRect, 8f, 8f, mPaint)
lastHeight1 -= (danceHeight + danceGap)
}
return lastHeight1
}
就是根據(jù)高度來(lái)繪制rectangle蛉拙，算出一列能繪制多少個(gè)音頻塊尸闸，每一個(gè)音頻塊是一個(gè)rectangle，然后繪制rectangle孕锄，為了效果更好吮廉，判斷上面的音頻塊加上漸變。
github地址
歡迎點(diǎn)贊收藏畸肆，后期會(huì)優(yōu)化
https://github.com/hankinghu/AudioVisulizer
使用方法
<com.masoudss.lib.DanceView
android:id="@+id/danceView"
android:layout_width="320dp"
android:layout_height="300dp"
android:layout_gravity="center"
app:color_center="@color/red"
app:color_end="@color/white"
app:color_start="@color/yellow"
app:dance_color="@color/yellow"
app:dance_corner_radius="2dp"
app:dance_gap="2dp"
app:max_dance_num="30"
app:min_dance_num="2"
app:shader_num="3" />
- shader_num 頂部加漸變的個(gè)數(shù)
- color_end 漸變尾部顏色
- color_start 漸變開(kāi)頭顏色
- color_center 漸變中間顏色
- min_dance_num 每一列中最少顯示的個(gè)數(shù)
- max_dance_num 每一列中最大顯示的個(gè)數(shù)
- dance_gap 每一個(gè)音頻格之間的間距
