Android UI之自定义——最简单的仿QQ音乐歌词颜色渐变

转载请注明本文出自JFlex的博客http://blog.csdn.net/jflex/article/details/46550849,请尊重他人的辛勤劳动成果，谢谢！

Android UI之自定义——最简单的仿QQ音乐歌词颜色渐变

记得刚开始做android的时候，就发现QQ音乐歌词颜色渐变的效果，就在网上搜索过，但是就是没有找到满意的。今天突然用QQ音乐听歌的时候，看到歌词颜色渐变，决定来分析看看，没想到实现原来如此简单。这篇只是将最简单的歌词颜色渐变功能，不包括歌词滚动等效果。

首先来看下QQ音乐歌词界面

实现步骤

从界面上可以看出，是通过不同颜色的文本叠加所形成的视觉效果。那么android文本一般使用TextView实现，那就来试试用TextView在layout中实现。

Layout尝试

需要一个比较长的TextView和一个短的TextView

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="最简单的仿QQ音乐歌词颜色渐变"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#726463" />

<TextView
android:layout_width="40dp"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="最简单的仿QQ音乐歌词颜色渐变"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#39DF7C" />
</RelativeLayout>

上面一个确实是一个长点的TextView和一个短点的TextView，效果如下



按照设置40dp的width，应该显示2个字才对。所以失败

接下来修改layout，关键属性android:ellipsize，当设置这个属性为none，如下

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="最简单的仿QQ音乐歌词颜色渐变"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#726463" />

<TextView
android:layout_width="40dp"
android:layout_height="wrap_content"
android:ellipsize="none"
android:singleLine="true"
android:text="最简单的仿QQ音乐歌词颜色渐变"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#39DF7C" />
</RelativeLayout>

效果图如下：



貌似好像成功了，接下来看下面封装LRCTextView

2. LRCTextView封装

直接上代码

package com.example.qqmusiclrc.view;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

@SuppressLint("NewApi")
public class LRCTextView extends RelativeLayout {
private TextView tvDefault;
private TextView tvSelect;
private String lrc = "我是测试歌词 我是测试歌词 我是测试歌词";

/**
* 设置歌词
*
* @param lrc
*/
public void setLrc(String lrc) {
this.lrc = lrc;
tvDefault.setText(lrc);
tvSelect.setText(lrc);
}

public LRCTextView(Context context, AttributeSet attrs, int defStyleAttr,
int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}

public LRCTextView(Context context, AttributeSet attrs, int defStyleAttr) {
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 = new TextView(getContext());
tvDefault.setText(lrc);
tvDefault.setTextColor(Color.parseColor("#726463"));
tvDefault.setEllipsize(null);
tvDefault.setSingleLine();
tvDefault.setTextSize(16);

tvSelect = new TextView(getContext());
tvSelect.setTextColor(Color.parseColor("#39DF7C"));
tvSelect.setText(lrc);
tvSelect.setEllipsize(null);
tvSelect.setSingleLine();
tvSelect.setTextSize(16);
addView(tvDefault);
addView(tvSelect);
tvSelect.setWidth(0);
}

@Override
protected void onWindowVisibilityChanged(int visibility) {
super.onWindowVisibilityChanged(visibility);
if (visibility == View.VISIBLE) {
postDelayed(new Runnable() {
@Override
public void run() {
setPercent(percent);
}
}, 10);
}
}

private float percent;

/**
* 设置颜色渐变百分比
*
* @param percent
*/
public void setPercent(float percent) {
this.percent = percent;
setSelectWidth((int) (getSelectWidth() * percent));
}

private int getSelectWidth() {
return tvDefault.getWidth();
}

private void setSelectWidth(int pixels) {
if (pixels <= getSelectWidth()) {
tvSelect.setWidth(pixels);
}
}
}

代码很简单，我就不多说啥了。

最后

上传demo，点击这里下载