Implementación de efectos de gráficos de barras de audio en Android (simulación de animación de audio sin escuchar la entrada de audio)

Gráfico de barras de audio

Como se muestra en la imagen siguiente es el gráfico de barras de audio de esta vez:

Debido a que solo es el uso personalizado de View, no vamos a monitorear realmente la entrada de audio, y podemos simular algunos números aleatorios.

Si se desea implementar un gráfico de barras de audio estático como se muestra en la imagen anterior, estoy seguro de que todos pueden encontrar rápidamente la idea, es decir, dibujar uno por uno rectángulos, y solo hay que desplazar un poco la distancia entre cada rectángulo. El siguiente código muestra un método de cálculo de coordenadas.

for (int i = 0; i < mRectCount; i++) {
// El dibujo del rectángulo comienza desde la izquierda hasta la parte superior, derecha e inferior (la distancia del borde izquierdo del lienzo hasta el borde izquierdo, la distancia del borde superior del lienzo hasta el borde superior)
canvas.drawRect(
(float) (mRectWidth * i + offset),
currentHeight,
(float) ( mRectWidth * (i + 1),
mRectHeight,
mRectPaint
);
}

Como se muestra en el código anterior, creamos estos pequeños rectángulos mediante un ciclo, donde currentHeight es la altura de cada pequeño rectángulo. Al desplazar continuamente el eje x, se dibujan estos rectángulos estáticos. A continuación, se cambia la altura de los rectángulos aleatoriamente para simular el audio, utilizando directamente el método Math.random() para cambiar estas alturas y asignarlas a currentHeight, como se muestra a continuación.

// Debido a que es un caso simple, no se monitorea la entrada de audio y se simulan algunos números aleatorios
mRandom = Math.random();
currentHeight = (float) (mRectHeight * mRandom);

De esta manera, se puede lograr un efecto estático, pero ¿cómo lograr un efecto dinámico? En realidad, es muy simple, solo hay que llamar al método invalidate() en el método onDraw() para notificar al View que se debe repintar. Sin embargo, aquí no es necesario notificar al View para que se repinte después de cada dibujo de un nuevo rectángulo, ya que esto podría afectar el efecto debido a la velocidad de actualización demasiado rápida. Por lo tanto, podemos usar el siguiente código para realizar la repintada diferida del View, como se muestra a continuación:

posInvalidateDelayed(300);

De esta manera, cada3Notificar al View para que se repinte a 00ms, se puede obtener un buen efecto visual. Finalmente, agregar un efecto de desvanecimiento puede hacer que el View sea más realista, como se muestra en el código siguiente:

@Override
protected void onSizeChanged(int w, int h, int oldW, int oldH) {
super.onSizeChanged(w, h, oldW, oldH);
// Efecto de desvanecimiento
LinearGradient mLinearGradient;
// Ancho del lienzo
int mWidth;
// Obtener el ancho del lienzo
mWidth = getWidth();
// Obtener la altura máxima del rectángulo
mRectHeight = getHeight();
// Obtener el ancho de un rectángulo individual (el parte restante es el espacio hasta el borde derecho)
mRectWidth = (mWidth-offset) / mRectCount;
// Instanciar un degradado lineal
mLinearGradient = new LinearGradient(
0,
0,
mRectWidth,
mRectHeight,
topColor,
downColor,
Shader.TileMode.CLAMP
);
// Añadir el shader al lápiz
mRectPaint.setShader(mLinearGradient);
}

Desde este ejemplo, podemos saber que al crear una Vista personalizada, hay que proceder paso a paso, comenzando con un efecto básico y lentamente agregando funcionalidades, dibujando efectos más complejos. Cualquier Vista personalizada, por compleja que sea, se construye a través de iteraciones funcionales, por lo que no se debe pensar que crear una Vista personalizada es difícil. La mil milla caminata comienza con el primer paso, y con el comienzo, se puede mejorar gradualmente.

código

A continuación, se muestra el código completo de esta vez:

paquete 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;
/**
* gráfica de barra analógica de audio personalizada
* Creado por shize el 2016/9/5.
*/
public class MyAF extends View {
// cantidad de rectángulos de audio
private int mRectCount;
// pincel del rectángulo de audio
private Paint mRectPaint;
// dos colores de desvanecimiento
private int topColor, downColor;
// ancho y alto del rectángulo de audio
private int mRectWidth, mRectHeight;
// cantidad de desplazamiento
private int offset;
// velocidad de frecuencia
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){
// Almacenar las propiedades en TypedArray
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MyAF);
mRectPaint = new Paint();
// Agregar el color base del pincel del rectángulo
mRectPaint.setColor(ta.getColor(R.styleable.MyAF_AFTopColor,
ContextCompat.getColor(context, R.color.top_color)));
// Agregar la parte superior del color de desvanecimiento del rectángulo
topColor = ta.getColor(R.styleable.MyAF_AFTopColor,
ContextCompat.getColor(context, R.color.top_color));
// Agregar la parte inferior del color de desvanecimiento del rectángulo
downColor = ta.getColor(R.styleable.MyAF_AFDownColor,
ContextCompat.getColor(context, R.color.down_color));
// Configurar la cantidad de rectángulos
mRectCount = ta.getInt(R.styleable.MyAF_AFCount, 10);
// Configurar el intervalo de tiempo de repintado, es decir, la velocidad de cambio
mSpeed = ta.getInt(R.styleable.MyAF_AFSpeed, 300);
// El espacio entre cada rectángulo
offset = ta.getInt(R.styleable.MyAF_AFOffset, 5);
// Reciclar TypeArray
ta.recycle();
}
@Override
protected void onSizeChanged(int w, int h, int oldW, int oldH) {
super.onSizeChanged(w, h, oldW, oldH);
// Efecto de desvanecimiento
LinearGradient mLinearGradient;
// Ancho del lienzo
int mWidth;
// Obtener el ancho del lienzo
mWidth = getWidth();
// Obtener la altura máxima del rectángulo
mRectHeight = getHeight();
// Obtener el ancho de un rectángulo individual (el parte restante es el espacio hasta el borde derecho)
mRectWidth = (mWidth-offset) / mRectCount;
// Instanciar un degradado lineal
mLinearGradient = new LinearGradient(
0,
0,
mRectWidth,
mRectHeight,
topColor,
downColor,
Shader.TileMode.CLAMP
);
// Añadir el shader al lápiz
mRectPaint.setShader(mLinearGradient);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
double mRandom;
float currentHeight;
for (int i = 0; i < mRectCount; i++) {
// Debido a que es un caso simple, no se monitorea la entrada de audio y se simulan algunos números aleatorios
mRandom = Math.random();
currentHeight = (float) (mRectHeight * mRandom);
// El dibujo del rectángulo comienza desde la izquierda hasta la parte superior, derecha e inferior (la distancia del borde izquierdo del lienzo hasta el borde izquierdo, la distancia del borde superior del lienzo hasta el borde superior)
canvas.drawRect(
(float) (mRectWidth * i + offset),
currentHeight,
(float) ( mRectWidth * (i + 1),
mRectHeight,
mRectPaint
);
}
// Hace que la vista se repinte con retraso
postInvalidateDelayed(mSpeed);
}
}

Código completo del archivo de diseño:

<?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>

Lo mencionado anteriormente es lo que el editor les ha presentado sobre cómo implementar el efecto de gráfico de barra de audio en Android (simulando animación de audio sin escucha de entrada de audio), espero que les sea útil. Si tienen alguna pregunta, déjenme un mensaje y responderé a tiempo. También agradezco mucho el apoyo de todos a la página web de tutorial de gritos!

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará