SimpleWaveform

[說明：以前畫過波形圖，最近又需要畫，略不同，但還得重復寫。在網上搜了一下，只找到一個復雜的框架，而我們往往只需要畫簡單的波形或柱狀圖。所以我整理提取了過去的代碼，有了這個簡潔的波形及柱狀圖控件。實現上很簡單，關鍵在于，怎樣簡單，又可靈活定制來適用于通常的應用場景。比如在畫圖之外增加了進度條及觸碰反饋功能，就可適用于錄音及播音的場景]

SimpleWaveform 顯示一串數據為波形圖，或者條狀圖

SimpleWaveform 可以高度定制:

(1)可以顯示原始的正負數據，也可以取絕對值來顯示數據的幅度

(2)數據可以直接對應像素，也可以是滿幅的百分比。控件會自動檢測自己的寬度及高度像素

(3)可以選擇顯示：柱狀條 /峰值輪廓 /x 軸

(4)可以選擇怎樣連接峰值來畫出輪廓

(5)其 x 軸可以放在控件的頂部 /中間 /底部

(6)可以設定柱狀條的寬度與間隔

(7)可以設定所有的筆，包括柱條 /輪廓 /x 軸 /背景，前兩者是兩支筆

(8)用兩支筆來畫前后兩部分，這樣就有不同的顏色來標識進度

(9)波形圖可以從左邊或右邊開始

(10)如果你手指碰觸視圖，監聽器可以返回碰觸的柱條位置

常見用法

(1)當你錄音時可以用 SimpleWaveform 來顯示聲波，請參考 advance demo1

(2)嵌入為 recycler view 的元素，通過左右滑動來顯示很長的波形圖，請參考 advance demo2

demo1: 顯示正負數據

demo2: 柱狀圖

demo3: 顯示振幅絕對值

demo4: 顯示聲波

advance demo1: 顯示錄音得到音頻輸入

advance demo2: 嵌入到橫向的 recycler view 中顯示很長時間的錄音

控件用法:

(1)直接拷貝 SimpleWaveform.java 到項目. 目前我還不懂得怎么制作一個 gradle 模塊.

(2)查看及拷貝 demo1~4 及 advance demo1~2 代碼，位于文件 SimpleWaveformDemo.java 中. 使用非常的直觀簡單，并且有缺省設置，只要添加數據鏈表，然后可以省略后續設置并直接顯示.

這里是例子 demo3 ，看一下注釋即可:

private void demo3() {

//restore default setting, you can omit all following setting and goto the final refresh() show

simpleWaveform.init();

LinkedList ampList = new LinkedList<>();

//generate random data

for (int i = 0; i < 80; i++) {

ampList.add(randomInt(-50, 50));

}

simpleWaveform.setDataList(ampList);//input data to show

//define bar gap

simpleWaveform.barGap = 30;

//define x-axis direction

simpleWaveform.modeDirection = SimpleWaveform.MODE_DIRECTION_LEFT_RIGHT;

//define if draw opposite pole when show bars

simpleWaveform.modeAmp = SimpleWaveform.MODE_AMP_ABSOLUTE;

//define if the unit is px or percent of the view's height

simpleWaveform.modeHeight = SimpleWaveform.MODE_HEIGHT_PERCENT;

//define where is the x-axis in y-axis

simpleWaveform.modeZero = SimpleWaveform.MODE_ZERO_CENTER;

//if show bars?

simpleWaveform.showBar = true;

//define how to show peaks outline

simpleWaveform.modePeak = SimpleWaveform.MODE_PEAK_PARALLEL;

//if show peaks outline?

simpleWaveform.showPeak = true;

//show x-axis

simpleWaveform.showXAxis = true;

xAxisPencil.setStrokeWidth(1);

xAxisPencil.setColor(0x88ffffff);//the first 0x88 is transparency, the next 0xffffff is color

simpleWaveform.xAxisPencil = xAxisPencil;

//define pencil to draw bar

barPencilFirst.setStrokeWidth(15);

barPencilFirst.setColor(0xff1dcf0f);

simpleWaveform.barPencilFirst = barPencilFirst;

barPencilSecond.setStrokeWidth(15);

barPencilSecond.setColor(0xff1dcfcf);

simpleWaveform.barPencilSecond = barPencilSecond;

//define pencil to draw peaks outline

peakPencilFirst.setStrokeWidth(5);

peakPencilFirst.setColor(0xfffe2f3f);

simpleWaveform.peakPencilFirst = peakPencilFirst;

peakPencilSecond.setStrokeWidth(5);

peakPencilSecond.setColor(0xfffeef3f);

simpleWaveform.peakPencilSecond = peakPencilSecond;

//the first part will be draw by PencilFirst

simpleWaveform.firstPartNum = 20;//first 20 bars will be draw by first pencil

//define how to clear screen

simpleWaveform.clearScreenListener = new SimpleWaveform.ClearScreenListener() {

@Override

public void clearScreen(Canvas canvas) {

canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

}

};

// set touch listener

simpleWaveform.progressTouch = new SimpleWaveform.ProgressTouch() {

@Override

public void progressTouch(int progress, MotionEvent event) {

Log.d("", "you touch at: " + progress);

simpleWaveform.firstPartNum = progress;//set touch position back to its progress

simpleWaveform.refresh();

}

};

//show...

simpleWaveform.refresh();

demo_introduce.setText("demo3: amplitude bar");

}

android:id="@+id/simplewaveform"

android:layout_width="match_parent"

android:layout_height="300dp"

android:layout_margin="10dp" />

總結

以上是生活随笔為你收集整理的android 分组柱状图_整理了一个 android 上的波形图及柱状图绘制控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。