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

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

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

实现步骤

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

Layout尝试 需要一个比较长的TextView和一个短的TextView

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

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

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

效果图如下：

貌似好像成功了，接下来看下面封装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);

}

}

}

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