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

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

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

实现步骤

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

Layout尝试

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

android:layout_height="wrap_content" >

android:layout_height="wrap_content"

android:singleLine="true"

android:text="最简单的仿QQ音乐歌词颜色渐变"

android:textAppearance="?android:attr/textAppearanceLarge"

android:textColor="#726463" />

android:layout_height="wrap_content"

android:singleLine="true"

android:text="最简单的仿QQ音乐歌词颜色渐变"

android:textAppearance="?android:attr/textAppearanceLarge"

android:textColor="#39DF7C" />

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

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

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

android:layout_height="wrap_content" >

android:layout_height="wrap_content"

android:singleLine="true"

android:text="最简单的仿QQ音乐歌词颜色渐变"

android:textAppearance="?android:attr/textAppearanceLarge"

android:textColor="#726463" />

android:layout_height="wrap_content"

android:ellipsize="none"

android:singleLine="true"

android:text="最简单的仿QQ音乐歌词颜色渐变"

android:textAppearance="?android:attr/textAppearanceLarge"

android:textColor="#39DF7C" />

效果图如下：

貌似好像成功了，接下来看下面封装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，点击这里下载(后续补上，csdn还没审核通过，很奇怪。现在需要代码的请留下邮箱)