Android realizes the lyrics fade and the progress of the effect _android

To use gradients with TextView, we have to understand the usage of lineargradient (linear gradients).

Parameter interpretation of LinearGradient

LinearGradient also known as linear rendering, the role of lineargradient is to achieve a certain area of color linear gradient effect, look at the source you know he is a shader subclass.

It has two constructors

Public lineargradient (float x0, float y0, float x1, float y1, int color0, int color1, Shader.tilemode tile) public
Lin Eargradient (float x0, float y0, float x1, float y1, int[] colors, float[] positions, shader.tilemode tile);

Where the parameter x0 represents the starting point x coordinate of the gradient, the parameter y0 represents the starting point Y coordinate of the gradient, the parameter X1 represents the endpoint x coordinate of the gradient, the parameter Y1 represents the end Y coordinate of the gradient, the color0 indicates the gradient start color, and the color1 indicates the gradient end color;

Shader.tilemode has 3 parameters to choose from, namely clamp, repeat and Mirror:

The clamp effect is that if the renderer exceeds the original bounds, the edge color is copied to the area out of range.

The role of repeat is to repeatedly render bitmaps in a tiled form, both horizontally and vertically

The role of mirror is to repeatedly render bitmaps in a mirrored manner, both horizontally and vertically.

Simple use of lineargradient

To achieve a horizontal gradient of the text effect first:

Shader shader_horizontal= New LinearGradient (BTWIDTH/4, 0, btwidth, 0, Color.Red, Color.green, Shader.TileMode.CLAMP); C1/>tv_text_horizontal.getpaint (). Setshader (Shader_horizontal);

To achieve the vertical gradient effect of text:

Shader shader_vertical=new lineargradient (0, BTHEIGHT/4, 0, Btheight, color.red, Color.green, Shader.TileMode.CLAMP); C3/>tv_text_vertical.getpaint (). Setshader (shader_vertical);

Next, you can implement the color dynamic gradient of the text:

Import Android.content.Context;
Import Android.graphics.Canvas;
Import android.graphics.LinearGradient;
Import Android.graphics.Matrix;
Import Android.graphics.Paint;
Import Android.graphics.Shader;
Import Android.util.AttributeSet;
Import Android.widget.TextView;
/** * Created on 2016/3/13. * * public class Gradienthorizontaltextview extends TextView {private lineargradient mlineargradient; private Matrix Mgrad ientmatrix;//gradient Matrix private Paint mpaint;//brush private int mviewwidth = 0;//textview wide private int mtranslate = 0;//Translation Amount Priva Te Boolean manimating = true;//whether animation private int delta = 15;//Move Increment public gradienthorizontaltextview (context ctx) {This (CT
X,null); Gradienthorizontaltextview (context, AttributeSet attrs) {Super (context, attrs);} @Override protected Vo ID onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH); if (mviewwidth = 0) {MVIEWWI
DTH = Getmeasuredwidth ();
if (Mviewwidth > 0) {mpaint = Getpaint (); String Text = gEttext (). toString ();
int size; if (Text.length () >0) {size = Mviewwidth*2/text.length ();} else{size = mviewwidth} mlineargradient = new LinearGradient (-size, 0, 0, 0, new int[] {0x33ffffff, 0xFFFFFFFF, 0x33ff FFFF}, new float[] {0, 0.5f, 1}, Shader.TileMode.CLAMP);
Edge Fusion Mpaint.setshader (mlineargradient);/Set Gradient Mgradientmatrix = new Matrix (); @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas); if (manimating && Mgradientmatrix!= NULL) {Float mtextwidth = Getpaint (). Measuretext (GetText (). toString ());//Get text width mtranslate + = delta;//to move to the right by default if ( Mtranslate > Mtextwidth+1 | |
mtranslate<1) {delta =-delta;//Move left} mgradientmatrix.settranslate (mtranslate, 0);
Mlineargradient.setlocalmatrix (Mgradientmatrix); Postinvalidatedelayed (30);//Refresh}}}

Achieve the lyrics progress effect

Canvas as the text is drawn, the FontMetrics object is used to calculate the coordinates of the position. Its mentality and java.awt.FontMetrics are basically the same.
FontMetrics Object It is based on four basic coordinates, respectively:

Fontmetrics.top
Fontmetrics.ascent
Fontmetrics.descent
Fontmetrics.bottom

FontMetrics object
FontMetrics fontmetrics = Textpaint.getfontmetrics (); 
String Text = "Abcdefghijklmnopqrstu"; 
calculates each coordinate
float basex = 0; 
float Basey = m; 
Float topy = Basey + fontmetrics.top; 
Float Ascenty = Basey + fontmetrics.ascent; 
Float Descenty = Basey + fontmetrics.descent; 

Here is the specific implementation code:

Import Android.content.Context;
Import Android.graphics.Bitmap;
Import Android.graphics.Canvas;
Import Android.graphics.Color;
Import Android.graphics.Paint;
Import Android.graphics.PorterDuff;
Import Android.graphics.PorterDuffXfermode;
Import Android.graphics.RectF;
Import Android.util.AttributeSet;
Import Android.view.View;
/** * Created on 2016/3/13. * * public class Songtextview extends View {private int postindex; private Paint mpaint; private int delta =; Private F
Loat Mtextheight;
private float mtextwidth;
Private String mtext= "dream inside See me 72 change";
Private Porterduffxfermode Xformode; Public Songtextview (Context ctx) {this (ctx,null);} public Songtextview (context context, AttributeSet Attrs) {This (conte
XT, Attrs, 0); Public Songtextview (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr); Init ()
; public void init () {mpaint = new Paint (paint.anti_alias_flag); xformode = new Porterduffxfermode (PorterDuff.Mode.SRC_IN
); Mpaint.setcOlor (Color.cyan);
Mpaint.settextsize (60.0f);
Mpaint.setstyle (Paint.Style.FILL_AND_STROKE);
Mpaint.setxfermode (NULL);
Mpaint.settextalign (Paint.Align.LEFT);
The precise height of the text paint.fontmetrics FontMetrics = Mpaint.getfontmetrics ();
Mtextheight = fontmetrics.bottom-fontmetrics.descent-fontmetrics.ascent;
Mtextwidth = Mpaint.measuretext (Mtext); /** * Compute control's width/height/@Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {final int mwidth; fin
Al int mheight;
/** * Set Width */int widthmode = Measurespec.getmode (Widthmeasurespec);
int widthsize = measurespec.getsize (Widthmeasurespec);
if (Widthmode = = measurespec.exactly)//match_parent, accurate mwidth = widthsize;
C.at_most)//Wrap_content Mwidth = Math.min (desirebyimg, widthsize);
else mwidth = desirebyimg;
/*** * Setting Height */int heightmode = Measurespec.getmode (Heightmeasurespec); int heightsize = MeasurespeC.getsize (HEIGHTMEASURESPEC);
if (Heightmode = = measurespec.exactly)//match_parent, accurate mheight = heightsize; else {int desire = Getpaddingtop () + getpaddingbottom () + getmeasuredheight (); if (Heightmode = = measurespec.at_most)/w
Rap_content mheight = Math.min (Desire, heightsize);
else Mheight = desire;
} setmeasureddimension (Mwidth, mheight);
} @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);
Bitmap Srcbitmap = Bitmap.createbitmap (Getmeasuredwidth (), Getmeasuredheight (), Bitmap.Config.ARGB_8888);
Canvas Srccanvas = new Canvas (SRCBITMAP);
Srccanvas.drawtext (mtext, 0, Mtextheight, mpaint);
Mpaint.setxfermode (Xformode);
Mpaint.setcolor (color.red);
RECTF RECTF = new RECTF (0,0,postindex,getmeasuredheight ());
Srccanvas.drawrect (RECTF, mpaint);
Canvas.drawbitmap (srcbitmap, 0, 0, NULL);
Init (); if (postindex<mtextwidth) {postindex+=10;}
else{postindex=0;} postinvalidatedelayed (30); }
}

ProgressBar to achieve lyrics playback effect

Then the following lyrics playback progress effect is 2 pictures to achieve, forget which one there seems to have not even thought about it can be so kind of realization.
Only need to prepare 2 pictures to:

<layer-list xmlns:android= "Http://schemas.android.com/apk/res/android" >
<item
android:id= "@ Android:id/background "
android:drawable=" @drawable/normal "/>
<item android:id=
" @android: Id/ Progress "
android:drawable=" @drawable/grandient "/>
</layer-list>

See not just 2 pictures, a picture as a background picture as a progress map, it is not very magical, and then put ProgressBar

<progressbar
android:id= "@+id/pb1"
style= "@android: Style/widget.progressbar.horizontal"
Android:layout_width= "300DP"
android:layout_height= "40DP"
android:max= "android:maxheight="
2DP "
android:minheight=" 2DP "
android:progress=" "
android:progressdrawable=" @drawable/m_ Progress_horizontal "
android:secondaryprogress="
android:visibility= "Gone"/>

Coupled with the dynamic changes in code progress can achieve progress changes:

ProgressBar pb1= (ProgressBar) Findviewbyid (R.ID.PB1);
Sets the scroll bar visible
setprogressbarindeterminatevisibility (true);
Progress=pb1.getprogress ()//Get initial Progress
timer=new timer ();
Task=new TimerTask () {
@Override public
void Run () {
progress+=10;
if (progress>100) {
progress=0;
}
Handler.sendemptymessage (0);
}
;
Timer.schedule (task,1000,300);

Changes in implementation and progress:

Handler handler=new Handler () {
@Override public
void Handlemessage (msg) {
super.handlemessage (msg);
Pb1.setprogress (progress);
}
;
@Override
protected void OnDestroy () {
Super.ondestroy ();
Timer=null;
Task=null;
Handler.removecallbacksandmessages (null);
}

The effect is also good:

Ability is limited, feel write a blog to get a long time, the speed card of a pen, write to this, in fact, the project inside also did not use, rest 2 days also write something, feel still want to learn a little things as standby knowledge.

The above content is a small series to introduce the Android to achieve the lyrics fade and progress of the effect, I hope to help you!