android语音动画,Android实现音频条形图效果(仿音频动画无监听音频输入)

音频条形图

如下图所示就是这次的音频条形图&＃xff1a;

由于只是自定义View的用法&＃xff0c;我们就不去真实地监听音频输入了&＃xff0c;随机模拟一些数字即可。

如果要实现一个如上图的静态音频条形图&＃xff0c;相信大家应该可以很快找到思路&＃xff0c;也就是绘制一个个的矩形&＃xff0c;每个矩形之间稍微偏移一点距离即可。如下代码就展示了一种计算坐标的方法。

for (int i &＃61; 0; i

// 矩形的绘制是从左边开始到上、右、下边(左右边距离左边画布边界的距离&＃xff0c;上下边距离上边画布边界的距离)

canvas.drawRect(

(float) (mRectWidth * i &＃43; offset),

currentHeight,

(float) ( mRectWidth * (i &＃43; 1)),

mRectHeight,

mRectPaint

);

}

如上代码中&＃xff0c;我们通过循环创建这些小的矩形&＃xff0c;其中currentHeight就是每个小矩形的高&＃xff0c;通过横坐标的不断偏移&＃xff0c;就绘制出了这些静态的小矩形。下面再通过矩形的高度随机变化模拟音频&＃xff0c;这里直接利用Math.randoom()方法来随机改变这些高度&＃xff0c;并赋值给currentHeight&＃xff0c;代码如下所示。

// 由于只是简单的案例就不监听音频输入&＃xff0c;随机模拟一些数字即可

mRandom &＃61; Math.random();

currentHeight &＃61; (float) (mRectHeight * mRandom);

这样就能实现静态效果了&＃xff0c;但是如何实现动态效果呢&＃xff1f;其实也是非常简单的&＃xff0c;只要在onDraw()方法中再去调用invalidate()方法通知View进行重绘就可以了。不过这里不需要每次一绘制完新的矩形就通知View进行重绘&＃xff0c;这样会因为刷新速度太快反而影响效果。因此&＃xff0c;我们可以使用如下代码来进行View的延迟重绘&＃xff0c;代码如下&＃xff1a;

posInvalidateDelayed(300);

这样每隔300ms通知View进行重绘&＃xff0c;就可以得到一个比较好的视觉效果了。最后添加一个渐变效果可以使View更加逼真&＃xff0c;代码如下所示&＃xff1a;

&＃64;Override

protected void onSizeChanged(int w,int h,int oldW,int oldH) {

super.onSizeChanged(w, h, oldW, oldH);

// 渐变效果

LinearGradient mLinearGradient;

// 画布的宽

int mWidth;

// 获取画布的宽

mWidth &＃61; getWidth();

// 获取矩形的最大高度

mRectHeight &＃61; getHeight();

// 获取单个矩形的宽度(减去的部分为到右边界的间距)

mRectWidth &＃61; (mWidth-offset) / mRectCount;

// 实例化一个线性渐变

mLinearGradient &＃61; new LinearGradient(

0,

0,

mRectWidth,

mRectHeight,

topColor,

downColor,

Shader.TileMode.CLAMP

);

// 添加进画笔的着色器

mRectPaint.setShader(mLinearGradient);

}

从这个例子中&＃xff0c;我们可以知道&＃xff0c;在创建自定义View的时候&＃xff0c;需要一步一步来&＃xff0c;从一个基本的效果开始&＃xff0c;慢慢地添加功能&＃xff0c;绘制更复杂的效果。不论是多么复杂的自定义View都一定是慢慢迭代起来的功能&＃xff0c;所以不要觉得自定义View有多难。千里之行始于足下&＃xff0c;只要开始做&＃xff0c;慢慢地就能越来越熟练。

代码

以下是这次的完整代码&＃xff1a;

package com.example.customaf;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.LinearGradient;

import android.graphics.Paint;

import android.graphics.Shader;

import android.support.v4.content.ContextCompat;

import android.util.AttributeSet;

import android.view.View;

import com.example.afanalog.R;

/**

* 自定义的音频模拟条形图

* Created by shize on 2016/9/5.

*/

public class MyAF extends View {

// 音频矩形的数量

private int mRectCount;

// 音频矩形的画笔

private Paint mRectPaint;

// 渐变颜色的两种

private int topColor, downColor;

// 音频矩形的宽和高

private int mRectWidth, mRectHeight;

// 偏移量

private int offset;

// 频率速度

private int mSpeed;

public MyAF(Context context) {

super(context);

}

public MyAF(Context context, AttributeSet attrs) {

super(context, attrs);

setPaint(context, attrs);

}

public MyAF(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

setPaint(context, attrs);

}

public void setPaint(Context context, AttributeSet attrs){

// 将属性存储到TypedArray中

TypedArray ta &＃61; context.obtainStyledAttributes(attrs,R.styleable.MyAF);

mRectPaint &＃61; new Paint();

// 添加矩形画笔的基础颜色

mRectPaint.setColor(ta.getColor(R.styleable.MyAF_AFTopColor,

ContextCompat.getColor(context, R.color.top_color)));

// 添加矩形渐变色的上面部分

topColor&＃61;ta.getColor(R.styleable.MyAF_AFTopColor,

ContextCompat.getColor(context, R.color.top_color));

// 添加矩形渐变色的下面部分

downColor&＃61;ta.getColor(R.styleable.MyAF_AFDownColor,

ContextCompat.getColor(context, R.color.down_color));

// 设置矩形的数量

mRectCount&＃61;ta.getInt(R.styleable.MyAF_AFCount, 10);

// 设置重绘的时间间隔&＃xff0c;也就是变化速度

mSpeed&＃61;ta.getInt(R.styleable.MyAF_AFSpeed, 300);

// 每个矩形的间隔

offset&＃61;ta.getInt(R.styleable.MyAF_AFOffset, 5);

// 回收TypeArray

ta.recycle();

}

&＃64;Override

protected void onSizeChanged(int w,int h,int oldW,int oldH) {

super.onSizeChanged(w, h, oldW, oldH);

// 渐变效果

LinearGradient mLinearGradient;

// 画布的宽

int mWidth;

// 获取画布的宽

mWidth &＃61; getWidth();

// 获取矩形的最大高度

mRectHeight &＃61; getHeight();

// 获取单个矩形的宽度(减去的部分为到右边界的间距)

mRectWidth &＃61; (mWidth-offset) / mRectCount;

// 实例化一个线性渐变

mLinearGradient &＃61; new LinearGradient(

0,

0,

mRectWidth,

mRectHeight,

topColor,

downColor,

Shader.TileMode.CLAMP

);

// 添加进画笔的着色器

mRectPaint.setShader(mLinearGradient);

}

&＃64;Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

double mRandom;

float currentHeight;

for (int i &＃61; 0; i

// 由于只是简单的案例就不监听音频输入&＃xff0c;随机模拟一些数字即可

mRandom &＃61; Math.random();

currentHeight &＃61; (float) (mRectHeight * mRandom);

// 矩形的绘制是从左边开始到上、右、下边(左右边距离左边画布边界的距离&＃xff0c;上下边距离上边画布边界的距离)

canvas.drawRect(

(float) (mRectWidth * i &＃43; offset),

currentHeight,

(float) ( mRectWidth * (i &＃43; 1)),

mRectHeight,

mRectPaint

);

}

// 使得view延迟重绘

postInvalidateDelayed(mSpeed);

}

}

布局文件的完整代码&＃xff1a;

xmlns:tools&＃61;"http://schemas.android.com/tools"

xmlns:custom&＃61;"http://schemas.android.com/apk/res-auto"

android:layout_width&＃61;"match_parent"

android:layout_height&＃61;"match_parent"

android:orientation&＃61;"vertical"

tools:context&＃61;"com.example.afanalog.MainActivity">

android:layout_width&＃61;"match_parent"

android:layout_height&＃61;"match_parent"

custom:AFCount&＃61;"15"

custom:AFDownColor&＃61;"&＃64;color/down_color"

custom:AFSpeed&＃61;"300"

custom:AFTopColor&＃61;"&＃64;color/top_color"

custom:AFOffset&＃61;"15"

/>

以上所述是小编给大家介绍的Android实现音频条形图效果(仿音频动画无监听音频输入)&＃xff0c;希望对大家有所帮助&＃xff0c;如果大家有任何疑问请给我留言&＃xff0c;小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持&＃xff01;