Android to achieve audio bar effect (imitation audio animation without listening audio input) _android

Audio Bar Chart

This is the Audio bar chart as shown in the following illustration:

Because it's just a custom view usage, we don't actually listen to audio input, and randomly simulate some numbers.

If you want to implement a static audio bar chart as shown above, I believe we should be able to quickly find ideas, that is, draw a rectangle, each rectangle slightly offset a little distance between. The following code shows a method of calculating coordinates.

for (int i = 0; i < Mrectcount i++) {
//rectangle drawing is the distance from the left to the top, right, bottom (left right) distance from the left canvas boundary, and the upper and lower edge from the top canvas boundary
Canvas.drawrect c3/> (float) (mrectwidth * i + offset),
currentheight,
(float) (Mrectwidth * (i + 1)),
mrectheight,
mrect Paint
);
}

As in the code, we create these small rectangles by looping, where Currentheight is the height of each small rectangle, and the static rectangles are plotted by the constant shift of the horizontal axis. The following is followed by a highly random variation of the rectangle to simulate the audio, where the Math.randoom () method is used to randomly change these heights and assign values to Currentheight, as shown below.

Because just a simple case does not listen for audio input, random simulation of some numbers can
mrandom = Math.random ();
Currentheight = (float) (mrectheight * mrandom);

This will achieve the static effect, but how to achieve dynamic effect? In fact, it is also very simple, as long as in the OnDraw () method to call the invalidate () method to notify the view to redraw it. However, there is no need to tell view to redraw each time a new rectangle is drawn, which will affect the effect because the refresh rate is too fast. Therefore, we can use the following code to carry out the view delay redraw, the code is as follows:

Posinvalidatedelayed (300);

So every 300ms notice view to redraw, you can get a better visual effect. Finally adding a gradient effect can make the view more realistic, as shown in the following code:

@Override
protected void onsizechanged (int w,int h,int oldw,int oldh) {
super.onsizechanged (W, H, OLDW, OLDH); c4/>//gradient effect
lineargradient mlineargradient;
Wide
int mwidth of canvas;
Gets the width of the canvas
mwidth = getwidth ();
Gets the maximum height of the rectangle
mrectheight = getheight ();
Gets the width of a single rectangle (the amount of space minus the portion to the right edge)
Mrectwidth = (mwidth-offset)/mrectcount;
Instantiate a linear gradient
mlineargradient = new LinearGradient (
0,
0,
mrectwidth,
mrectheight,
Topcolor,
downcolor,
Shader.TileMode.CLAMP
);
Shader
Mrectpaint.setshader (mlineargradient) added to the brush;

From this example, we know that when you create a custom view, you need to step through it, starting with a basic effect, slowly adding functionality, and drawing more complex effects. No matter how complex a custom view is, it must be a slow iteration, so don't think it's hard to customize the view. The first step of the journey, as long as the beginning to do, slowly will become more and more skilled.

Code

Here's the complete code:

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;
/** * Custom Audio Simulation Bar * Created by shize on 2016/9/5. /public class Myaf extends View {//audio rectangle number private int mrectcount;//audio Rectangle's brush private Paint mrectpaint;////gradient color of the two PRI
vate int Topcolor, downcolor;
Audio rectangle width and high private int mrectwidth, mrectheight;
offset private int offset;
Frequency speed private int mspeed; 
Public Myaf {Super (context);} public Myaf (context, AttributeSet attrs) {Super (context, attrs);
Setpaint (context, attrs); Public Myaf (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr); Setpaint (conte
XT, Attrs); } public void Setpaint (context conText, AttributeSet attrs) {//Store properties in TypedArray TypedArray ta = context.obtainstyledattributes (ATTRS,R.STYLEABLE.MYAF)
;
Mrectpaint = new Paint (); Adds the base color of the rectangle brush Mrectpaint.setcolor (Ta.getcolor r.styleable.myaf_aftopcolor, Contextcompat.getcolor (context,
R.color.top_color))); Add the upper part of the rectangle gradient topcolor=ta.getcolor (R.styleable.myaf_aftopcolor, Contextcompat.getcolor (context, R.COLOR.TOP_
color)); Add the lower part of the rectangle gradient downcolor=ta.getcolor (R.styleable.myaf_afdowncolor, Contextcompat.getcolor (context, R.color.down_
color));
Sets the number of rectangles mrectcount=ta.getint (R.styleable.myaf_afcount, 10);
Sets the time interval for redrawing, which is the change speed Mspeed=ta.getint (r.styleable.myaf_afspeed, 300);
Interval of each rectangle Offset=ta.getint (R.styleable.myaf_afoffset, 5);
Recycling Typearray ta.recycle (); @Override protected void onsizechanged (int w,int h,int oldw,int oldh) {super.onsizechanged (W, H, OLDW, OLDH);//Gradient effect L
Ineargradient mlineargradient;
Wide int mwidth of canvas;
Gets the width of the canvas mwidth = getwidth ();
Gets the maximum height of the rectangle mrectheight = getheight (); Gets the width of a single rectangle (the part that is subtractedTo the spacing of the right boundary) Mrectwidth = (mwidth-offset)/mrectcount; Instantiate a linear gradient mlineargradient = new LinearGradient (0, 0, mrectwidth, Mrectheight, Topcolor, Downcolor, Shader.TileMode.CLA
MP);
Shader Mrectpaint.setshader (mlineargradient) added to the brush;  @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas); double mrandom; float currentheight; for (int i = 0; i < Mrectcount; i++) {//Because the simple case is not to listen for audio input, randomly simulate some numbers can mrandom = Math.random (); currentheight = (float) (mrectheight * mrandom);//Rectangle drawing is Starting from the left to the top, right, bottom (left right distance from the left canvas boundary, the distance from top to bottom canvas boundary) canvas.drawrect ((float) (mrectwidth * i + offset), currentheight, (float) (
Mrectwidth * (i + 1)), Mrectheight, mrectpaint);
//Make view delay redraw postinvalidatedelayed (mspeed); }
}

Complete code for the layout file:

<?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:o" rientation= "vertical"
tools:context= "com.example.afanalog.MainActivity" >
< Com.example.customaf.MyAF
android:layout_width= "match_parent"
android:layout_height= "Match_parent"
custom:afcount= "custom:afdowncolor=" "
@color/down_color"
custom:afspeed= "" "
Custom: Aftopcolor= "@color/top_color"
custom:afoffset= "
/>
</LinearLayout>

The above is a small series to introduce the Android audio bar effect (imitation audio animation without listening to audio input), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!