Android UI Customization--The simplest imitation QQ music lyrics color Gradient

Reprint please indicate this article from Jflex blog http://blog.csdn.net/jflex/article/details/46550849, please respect others ' hard work results, thank you!

Android UI Customization--The simplest imitation QQ music lyrics color Gradient

Remember just started to do Android, I found QQ music lyrics color gradient effect, on-line search, but is not found satisfactory. Today suddenly with QQ music listening to the song, see the lyrics color gradient, decided to analyze to see, did not expect to achieve so simple. This is just the simplest lyrics color gradient feature, not including the lyrics scrolling effect.

First look at the QQ music lyrics interface

Implementation steps

As can be seen from the interface, it is a visual effect formed by the superposition of text in different colors. Then the Android text is generally used TextView implementation, then try to test textview in layout implementation.

1. Layout attempt
   A long TextView and a short textview are needed.

   <relativelayoutandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content" >            <textview  android:layout _width  = "wrap_content"  android:layout_height  = "wrap_content"  android:singleline  =< Span class= "Hljs-value" > "true"  android:text  = "The simplest imitation QQ music lyrics color Gradient"  android:textappearance  = "? Android:attr/textappearancelarge " android:textcolor  =" #726463 "/>     <TextViewandroid:layout_width="40DP"android:layout_height="Wrap _content "android:singleline=" true "android:text=" The simplest imitation QQ music lyrics color Gradient "  Android:textappearance="? Android:attr/textappearancelarge"android:textcolor=" #39DF7C " />                                                </relativelayout>

   The above one is indeed a long point textview and a short textview, the effect is as follows
   
   By setting the width of 40DP, 2 characters should be displayed. So failure

Next modify layout, the key attribute Android:ellipsize, when set this property is None, as follows

 <relativelayoutandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content" >                        <textview  android:layout _width  = "wrap_content"  android:layout_height  = "wrap_content"  android:singleline  =< Span class= "Hljs-value" > "true"  android:text  = "The simplest imitation QQ music lyrics color Gradient"  android:textappearance  = " Android:attr/textappearancelarge " android:textcolor  =" #726463 "/>         <TextViewandroid:layout_width="40DP"android:layout_height="Wrap _content "android:ellipsize=" None "android:singleline=" true "  Android:text="The simplest imitation QQ music lyrics color Gradient"android:textappearance="? android:attr/ Textappearancelarge "android:textcolor=" #39DF7C " />                                                                                        </relativelayout>

As follows:

Looks like a success, next look at the following package Lrctextview
2. Lrctextview Package
Directly on the code

 PackageCom.example.qqmusiclrc.view;ImportAndroid.annotation.SuppressLint;ImportAndroid.content.Context;ImportAndroid.graphics.Color;ImportAndroid.util.AttributeSet;ImportAndroid.view.View;ImportAndroid.widget.RelativeLayout;ImportAndroid.widget.TextView;@SuppressLint("Newapi") Public  class lrctextview extends relativelayout {    PrivateTextView Tvdefault;PrivateTextView Tvselect;PrivateString LRC ="I was testing lyrics I was testing lyrics I was testing lyrics";/** * Set Lyrics * * @param LRC */     Public void SETLRC(String LRC) { This. LRC = LRC;        Tvdefault.settext (LRC);    Tvselect.settext (LRC); } Public Lrctextview(context context, AttributeSet attrs,intDefstyleattr,intDefstyleres) {Super(Context, Attrs, defstyleattr, defstyleres);    Init (); } Public Lrctextview(context context, AttributeSet attrs,intDEFSTYLEATTR) {Super(Context, attrs, defstyleattr);    Init (); } Public Lrctextview(context context, AttributeSet attrs) {Super(context, attrs);    Init (); } Public Lrctextview(Context context) {Super(context);    Init (); }Private void Init() {Tvdefault =NewTextView (GetContext ());        Tvdefault.settext (LRC); Tvdefault.settextcolor (Color.parsecolor ("#726463")); Tvdefault.setellipsize (NULL);        Tvdefault.setsingleline (); Tvdefault.settextsize ( -); Tvselect =NewTextView (GetContext ()); Tvselect.settextcolor (Color.parsecolor ("#39DF7C"));        Tvselect.settext (LRC); Tvselect.setellipsize (NULL);        Tvselect.setsingleline (); Tvselect.settextsize ( -);        AddView (Tvdefault);        AddView (Tvselect); Tvselect.setwidth (0); }@Override    protected void onwindowvisibilitychanged(intVisibility) {Super. onwindowvisibilitychanged (visibility);if(visibility = = view.visible) {postdelayed (NewRunnable () {@Override                 Public void Run() {setpercent (percent); }            },Ten); }    }Private floatPercent/** * Set Color gradient percentage * * @param percent */     Public void setpercent(floatpercent) { This. percent = percent; Setselectwidth ((int) (Getselectwidth () * percent)); }Private int Getselectwidth() {returnTvdefault.getwidth (); }Private void Setselectwidth(intPixels) {if(Pixels <= getselectwidth ())        {tvselect.setwidth (pixels); }    }}

The code is simple, and I don't have much to say.

At last

Upload Demo, click here to download (follow up, CSDN has not been approved, very strange. Now you need the code, please leave the mailbox)

Android UI Customization--The simplest imitation QQ music lyrics color Gradient