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

 更新时间:2016年09月19日 10:55:08   作者:山田  
这篇文章主要介绍了Android实现音频条形图效果(仿音频动画无监听音频输入)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

音频条形图

如下图所示就是这次的音频条形图:

由于只是自定义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实现音频条形图效果(仿音频动画无监听音频输入),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Android实现简洁的APP登录界面

    Android实现简洁的APP登录界面

    这篇文章主要为大家详细介绍了Android简洁登录界面的编写代码,实现简单的登录,用户名密码验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • RecyclerVIew实现悬浮吸顶效果

    RecyclerVIew实现悬浮吸顶效果

    这篇文章主要为大家详细介绍了RecyclerVIew实现悬浮吸顶效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 解决Android加壳过程中mprotect调用失败的原因分析

    解决Android加壳过程中mprotect调用失败的原因分析

    本文探讨的主要内容是mprotect调用失败的根本原因,以及在加壳实现中的解决方案,通过本文的阐述,一方面能够帮助遇到同类问题的小伙伴解决心中的疑惑,另一方面能够给大家提供可落地的实现方案,需要的朋友可以参考下
    2022-01-01
  • Android App隐私合规检测辅助工具Camille详解

    Android App隐私合规检测辅助工具Camille详解

    Camille是一款Android App隐私合规检测辅助工具,现如今APP隐私合规十分重要,各监管部门不断开展APP专项治理工作及核查通报,不合规的APP通知整改或直接下架,下面小编给大家介绍下Android App隐私合规检测辅助工具Camille,感兴趣的朋友一起看看吧
    2022-02-02
  • Android常用的AlertDialog对话框及自定义对话框

    Android常用的AlertDialog对话框及自定义对话框

    本文主要介绍了android常用的AlertDialog对话框及自定义对话框的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • Android ActionBar完全解析使用官方推荐的最佳导航栏(上)

    Android ActionBar完全解析使用官方推荐的最佳导航栏(上)

    Action Bar是一种新増的导航栏功能,在Android 3.0之后加入到系统的API当中,它标识了用户当前操作界面的位置,并提供了额外的用户动作、界面导航等功能
    2017-04-04
  • 详解Android Selinux 权限及问题

    详解Android Selinux 权限及问题

    本篇文章主要介绍了详解Android Selinux 权限及问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 详解Flutter中key的正确使用方式

    详解Flutter中key的正确使用方式

    这篇文章主要为大家介绍了详解Flutter中key的正确使用方式,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • dagger2使用方法教程之简明讲解

    dagger2使用方法教程之简明讲解

     Dagger2 是一个Android依赖注入框架,由谷歌开发,最早的版本Dagger1 由Square公司开发。下面这篇文章主要给大家介绍了关于dagger2的一些使用方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2018-04-04
  • Android使用Walle实现多渠道打包功能的实现示例

    Android使用Walle实现多渠道打包功能的实现示例

    这篇文章主要介绍了Android使用Walle实现多渠道打包功能的实现示例,帮助大家更好的理解和学习使用Android开发,感兴趣的朋友可以了解下
    2021-04-04

最新评论