最近有个项目中需要录音，参考了一个APP，录音实时用声波图显示声音大小，并且录音结束后可通过拖拽定位修改其中某一段时间的声音。这两天比较闲了，写了个没任何技术含量的波形图自定义view（就是在画线），欢迎指教。
因为音频录制的方式很多，所以这个view只负责接收表示音量大小的值，具体传过来的值多大多小不限制，取所有的值中最大值按比例缩放。
代码如下：
public class WaveView extends View {
public WaveView(Context context) {
super(context);
}
public WaveView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
private Integer waveType;//波形展示类型
private int centerLineColor = Color.BLACK;
private int centerLineWidth = 1;
private int lineColor = Color.GREEN;
private int lineWidth = 10;//竖线的宽度
private int lineSpace = 30;//竖线之间的间隔宽度
public static final int WVTYPE_CENTER_LINE = 0;//竖线从中间开始 向上向下长度相同
public static final int WVTYPE_SINGLE = 1;//竖线从底部开始向上计算
private List<Integer> values;//存放数值
private int fullValue = 100;//相对最大值
private float mScale = 0;//传入值转换为有效数值需要使用的比例
private int maxValue = 1;//当前数组中的最大值 该值乘以scale应等于fullValue
private int maxLineCount ;
private boolean hasOver;//值记录是否已完毕
Paint paintCenterLine,paintLine;
private void init(AttributeSet attrs){
final TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.WaveView);
waveType = typedArray.getInt(R.styleable.WaveView_wvType, 0);
centerLineColor = typedArray.getColor(R.styleable.WaveView_wvCenterLineColor,Color.BLACK);
centerLineWidth = typedArray.getDimensionPixelSize(R.styleable.WaveView_wvCenterLineWidth,1);
lineColor = typedArray.getColor(R.styleable.WaveView_wvLineColor,Color.GREEN);
lineWidth = typedArray.getDimensionPixelSize(R.styleable.WaveView_wvLineWidth,10);
lineSpace = typedArray.getDimensionPixelSize(R.styleable.WaveView_wvLineSpace,30);
paintCenterLine = new Paint();
paintCenterLine.setStrokeWidth(centerLineWidth);
paintCenterLine.setColor(centerLineColor);
paintLine = new Paint();
paintLine.setStrokeWidth(lineWidth);
paintLine.setAntiAlias(true);
paintLine.setColor(lineColor);
}
public void putValue(int value){
if (value>maxValue){
maxValue = value;
mScale = (float) fullValue/maxValue;
}
if (values==null){
values = new ArrayList<>();
}else {
// values.add(value);
// invalidate();
}
values.add(value);
invalidate();
}
public void setHasOver(boolean over){
hasOver = over;
}
public boolean hasOver(){
return hasOver;
}
private int lastX,moveX;
private boolean hasBeenEnd=false;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
lastX = (int) (event.getRawX());
break;
case MotionEvent.ACTION_MOVE:
int x = (int) event.getRawX();
//到达边缘时不能向该方向继续移动
if (!hasBeenEnd || (moveX>0&&(lastX-x)<0 ||(moveX<0&&(lastX-x)>0))) {
moveX += (lastX-x)*0.7;
lastX = x;
invalidate();
}
break;
}
return true;
}
@Override
protected void onDraw(Canvas canvas) {
int yCenter = getHeight() / 2;
if (maxLineCount==0){
maxLineCount = getWidth()/(lineSpace+lineWidth);
}
if (waveType==WVTYPE_CENTER_LINE){
/***************画中线*****************/
canvas.drawLine(0,yCenter,getWidth(),yCenter,paintCenterLine);
}
/***************画竖线*****************/
//判断当前数组中的数据是否超出了可画竖线最大条数
if(values!=null){
/**找出当前第一条竖线以及偏移量*/
int startIndex = 0;//第一条线
int startOffset = 0;//第一条线的偏移
if (!hasOver || moveX==0){//仍在记录中或未手动滑动过
//线条数量超出最大数 只画后面的线
if(values.size()>maxLineCount){
startIndex = values.size()-maxLineCount;
}
}else {//已结束录值 且x轴有过移动
//先得到第一条线原本应该的位置
if(values.size()>maxLineCount){
startIndex = values.size()-maxLineCount;
}
//计算移动线条数
int moveLineSize = moveX/(lineWidth+lineSpace);
startOffset = moveX%(lineWidth+lineSpace);
int currentIndex = startIndex+moveLineSize;
if (currentIndex<0){//到达最左边
startIndex = 0;
startOffset = 0;
hasBeenEnd = true;
}else if (currentIndex>=values.size()){
startIndex = values.size()-1;
startOffset=0;
hasBeenEnd = true;
}else {
startIndex = currentIndex;
hasBeenEnd = false;
}
Log.d("XXXXXXX","move-x:"+moveX+" moveLineSize:"+moveLineSize
+" startIndex:"+startIndex+" startOffset:"+startOffset);
}
//画竖线
for (int i=startIndex;i<values.size();i++){
int startX =0;
int endX =0;
int startY =0;
int endY =0;
int lineHeight = (int) ((((float)values.get(i)*mScale)/fullValue)*getHeight());
switch (waveType){
case WVTYPE_CENTER_LINE:
startX = (i-startIndex)*(lineSpace+lineWidth)+lineWidth/2 - startOffset ;
endX = startX;
startY = (getHeight()-lineHeight)/2;
endY = (getHeight()-lineHeight)/2+lineHeight;
break;
case WVTYPE_SINGLE:
startX = (i-startIndex)*(lineSpace+lineWidth)+lineWidth/2 - startOffset ;
endX = startX;
startY = getHeight()-lineHeight;
endY = getHeight();
break;
}
canvas.drawLine(startX,startY,endX,endY,paintLine);
// Paint pNum = new Paint();
// pNum.setColor(Color.RED);
// canvas.drawText(""+i,startX,yCenter,pNum); 画出竖线index便于测试
}
}
}
} 样式相关：
<resources>
<declare-styleable name="WaveView">
<attr name="wvType" format="enum">
<enum name="centerLine" value="0"/>
<enum name="single" value="1"/>
</attr>
<attr name="wvCenterLineColor" format="color" />
<attr name="wvCenterLineWidth" format="dimension" />
<attr name="wvLineColor" format="color" />
<attr name="wvLineWidth" format="dimension" />
<attr name="wvLineSpace" format="dimension" />
</declare-styleable>
</resources>
源码下载：github源码
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
