这篇文章主要介绍了 Android 实现音频条形图效果 (仿音频动画无监听音频输入) 的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
Android 是一种基于 Linux 的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由 Google 公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用 "安卓" 或 "安致"。
音频条形图
如下图所示就是这次的音频条形图:
由于只是自定义 View 的用法,我们就不去真实地监听音频输入了,随机模拟一些数字即可。
如果要实现一个如上图的静态音频条形图,相信大家应该可以很快找到思路,也就是绘制一个个的矩形,每个矩形之间稍微偏移一点距离即可。如下代码就展示了一种计算坐标的方法。
- for (int i = 0; i < mRectCount; i++) {
- // 矩形的绘制是从左边开始到上、右、下边(左右边距离左边画布边界的距离,上下边距离上边画布边界的距离)
- canvas.drawRect(
- (float) (mRectWidth * i + offset),
- currentHeight,
- (float) ( mRectWidth * (i + 1)),
- mRectHeight,
- mRectPaint
- );
- }
如上代码中,我们通过循环创建这些小的矩形,其中 currentHeight 就是每个小矩形的高,通过横坐标的不断偏移,就绘制出了这些静态的小矩形。下面再通过矩形的高度随机变化模拟音频,这里直接利用 Math.randoom() 方法来随机改变这些高度,并赋值给 currentHeight,代码如下所示。
- // 由于只是简单的案例就不监听音频输入,随机模拟一些数字即可
- mRandom = Math.random();
- currentHeight = (float) (mRectHeight * mRandom);
这样就能实现静态效果了,但是如何实现动态效果呢?其实也是非常简单的,只要在 onDraw() 方法中再去调用 invalidate() 方法通知 View 进行重绘就可以了。不过这里不需要每次一绘制完新的矩形就通知 View 进行重绘,这样会因为刷新速度太快反而影响效果。因此,我们可以使用如下代码来进行 View 的延迟重绘,代码如下:
- posInvalidateDelayed(300);
这样每隔 300ms 通知 View 进行重绘,就可以得到一个比较好的视觉效果了。最后添加一个渐变效果可以使 View 更加逼真,代码如下所示:
- @Override
- protected void onSizeChanged(int w,int h,int oldW,int oldH) {
- super.onSizeChanged(w, h, oldW, oldH);
- // 渐变效果
- LinearGradient mLinearGradient;
- // 画布的宽
- int mWidth;
- // 获取画布的宽
- mWidth = getWidth();
- // 获取矩形的最大高度
- mRectHeight = getHeight();
- // 获取单个矩形的宽度(减去的部分为到右边界的间距)
- mRectWidth = (mWidth-offset) / mRectCount;
- // 实例化一个线性渐变
- mLinearGradient = new LinearGradient(
- 0,
- 0,
- mRectWidth,
- mRectHeight,
- topColor,
- downColor,
- Shader.TileMode.CLAMP
- );
- // 添加进画笔的着色器
- mRectPaint.setShader(mLinearGradient);
- }
从这个例子中,我们可以知道,在创建自定义 View 的时候,需要一步一步来,从一个基本的效果开始,慢慢地添加功能,绘制更复杂的效果。不论是多么复杂的自定义 View 都一定是慢慢迭代起来的功能,所以不要觉得自定义 View 有多难。千里之行始于足下,只要开始做,慢慢地就能越来越熟练。
代码
以下是这次的完整代码:
- 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 = context.obtainStyledAttributes(attrs,R.styleable.MyAF);
- mRectPaint = new Paint();
- // 添加矩形画笔的基础颜色
- mRectPaint.setColor(ta.getColor(R.styleable.MyAF_AFTopColor,
- ContextCompat.getColor(context, R.color.top_color)));
- // 添加矩形渐变色的上面部分
- topColor=ta.getColor(R.styleable.MyAF_AFTopColor,
- ContextCompat.getColor(context, R.color.top_color));
- // 添加矩形渐变色的下面部分
- downColor=ta.getColor(R.styleable.MyAF_AFDownColor,
- ContextCompat.getColor(context, R.color.down_color));
- // 设置矩形的数量
- mRectCount=ta.getInt(R.styleable.MyAF_AFCount, 10);
- // 设置重绘的时间间隔,也就是变化速度
- mSpeed=ta.getInt(R.styleable.MyAF_AFSpeed, 300);
- // 每个矩形的间隔
- offset=ta.getInt(R.styleable.MyAF_AFOffset, 5);
- // 回收TypeArray
- ta.recycle();
- }
- @Override
- protected void onSizeChanged(int w,int h,int oldW,int oldH) {
- super.onSizeChanged(w, h, oldW, oldH);
- // 渐变效果
- LinearGradient mLinearGradient;
- // 画布的宽
- int mWidth;
- // 获取画布的宽
- mWidth = getWidth();
- // 获取矩形的最大高度
- mRectHeight = getHeight();
- // 获取单个矩形的宽度(减去的部分为到右边界的间距)
- mRectWidth = (mWidth-offset) / mRectCount;
- // 实例化一个线性渐变
- mLinearGradient = new LinearGradient(
- 0,
- 0,
- mRectWidth,
- mRectHeight,
- topColor,
- downColor,
- Shader.TileMode.CLAMP
- );
- // 添加进画笔的着色器
- mRectPaint.setShader(mLinearGradient);
- }
- @Override
- protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- double mRandom;
- float currentHeight;
- for (int i = 0; i < mRectCount; i++) {
- // 由于只是简单的案例就不监听音频输入,随机模拟一些数字即可
- mRandom = Math.random();
- currentHeight = (float) (mRectHeight * mRandom);
- // 矩形的绘制是从左边开始到上、右、下边(左右边距离左边画布边界的距离,上下边距离上边画布边界的距离)
- canvas.drawRect(
- (float) (mRectWidth * i + offset),
- currentHeight,
- (float) ( mRectWidth * (i + 1)),
- mRectHeight,
- mRectPaint
- );
- }
- // 使得view延迟重绘
- postInvalidateDelayed(mSpeed);
- }
- }
布局文件的完整代码:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- xmlns:custom="http://schemas.android.com/apk/res-auto"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- tools:context="com.example.afanalog.MainActivity">
- <com.example.customaf.MyAF
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- custom:AFCount="15"
- custom:AFDownColor="@color/down_color"
- custom:AFSpeed="300"
- custom:AFTopColor="@color/top_color"
- custom:AFOffset="15"
- />
- </LinearLayout>
以上所述是小编给大家介绍的 Android 实现音频条形图效果 (仿音频动画无监听音频输入),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 PHPERZ 网站的支持!
来源: http://www.phperz.com/article/17/0315/295671.html