Android自定义view-打造酷炫的字体滑动高亮控件

前言:

相信很多时候开发会遇到类似于音乐歌词同步，播放到哪句歌词的哪个词时会逐渐高亮，这样的描述还是不够准确，iPhone的滑动解锁的那种效果，相信很多人都会熟悉吧。今天，我们的首要任务就是开发一个类似于这种效果的安卓控件，以便在以后的项目中直接使用，看起来高大上有木有。其实也不用害怕，需要我们分析和撰写的内容并不多，废话不多说，开始我们今天的教程吧。

正文:



在开始讲解之前，需要准备的知识点有:

必要的安卓基础
安卓view 的执行流程
Android画笔的LinearGradient线性渲染

好了，其实对于以上知识点不了解也没有关系，要是都了解了，就没有必要写这篇文章了。

问题一:为什么要有必要的安卓基础呢?
如果对继承，重写组件没有必要的了解，这篇文章是看不下去的。

问题二:安卓的view执行流程是什么呢?

执行构造方法
onFinishInflate
onSizeChanged
onDraw
....

问题三:LinearGradient的线性渲染需要了解哪些内容呢?

LinearGradient有两个构造函数:

public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions,Shader.TileMode tile)

参数:

float x0: 渐变起始点x坐标

float y0:渐变起始点y坐标

float x1:渐变结束点x坐标

float y1:渐变结束点y坐标

int[] colors:颜色 的int 数组

float[] positions: 相对位置的颜色数组,可为null, 若为null,可为null,颜色沿渐变线均匀分布

Shader.TileMode tile: 渲染器平铺模式

public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,Shader.TileMode tile)

float x0: 渐变起始点x坐标

float y0:渐变起始点y坐标

float x1:渐变结束点x坐标

float y1:渐变结束点y坐标

int color0: 起始渐变色

int color1: 结束渐变色

Shader.TileMode tile: 渲染器平铺模式

Shader.TileMode有3种参数可供选择，分别为CLAMP、REPEAT和MIRROR：

CLAMP的作用是如果渲染器超出原始边界范围，则会复制边缘颜色对超出范围的区域进行着色

REPEAT的作用是在横向和纵向上以平铺的形式重复渲染位图

MIRROR的作用是在横向和纵向上以镜像的方式重复渲染位图

知识准备已经完成了，开始动手撸代码了。


Step1:继承TextView

public class HightLightTextView extends TextView

Step2:重写三个构造方法，当然根据需要，重写一个两个参数的构造方法也行。我复写三个是为了以后能够使用自定义属性。

// 构造方法
public HightLightTextView(Context context) {
this(context, null);
}

public HightLightTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public HightLightTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

Step3:在onSizeChanged方法中初始化参数。

/**
* view的调用过程:构造方法->onFinishInflate->onSizeChanged->onDraw
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 获取view的宽度，初始化画笔等初始属性
if (mTextViewWidth == 0) {
mTextViewWidth = getMeasuredWidth();
// 如果宽度大于0的话，则初始化
if (mTextViewWidth > 0) {
// 初始化画笔
mPaint = getPaint();
// 线性渲染
mLinearGradient = new LinearGradient(-mTextViewWidth, 0, 0, 0, new int[] { 0X55FFFFFF, 0XFFFFFFFF, 0X55FFFFFF }, new float[] { 0, 0.5f, 1 }, TileMode.CLAMP);
mPaint.setShader(mLinearGradient);
matrix = new Matrix();
}
}
}

这里有个细节，就是画笔的获取，我们不是new出来的，而是通过getPaint()获取父类中的画笔，所以接下来的onDraw中没有用到paint，不要怀疑代码有问题哦。


至于LinearGradient的每个参数对照我们的知识准备应该不难理解各种参数对应的意思。那么，还剩下一个问题，这里的mTextViewWidth为什么是负的，喏，其实我们的matrix的移动是从-mTextViewWidth<=translate<=mTextViewWidth，可能还是不能理解吧。我们到下面画个图解释一下就清楚了。

Step4:在onDraw中绘制view

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isAnimateOn && matrix != null) {
mTranslateX += mTextViewWidth / 10;
// 如果移动的距离大于两倍的宽度，则重新开始移动
if (mTranslateX > 2 * mTextViewWidth) {
mTranslateX = -mTextViewWidth;
}
// 平移matrix
matrix.setTranslate(mTranslateX, 0);
// 设置线性变化的matrix
mLinearGradient.setLocalMatrix(matrix);
// 延迟100ms重绘
postInvalidateDelayed(100);
}
}

其实我们移动的就是蓝色的matrix，移动了两倍的textview之后，再重置matrix，然后就postInvalidateDelayed绘制我们的view。okay了，看到这里应该很熟悉怎么去写这样的一个效果了吧。如果你觉得滑动慢，改变一些重绘的时间，如果你觉得颜色需要改变，那就设置对外的接口，或者直接修改view里的颜色即可，至于扩展，留给大家扩展了。

这里贴上view 的全部代码以及如何使用:

HightLightTextView.java

package com.beyole.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader.TileMode;
import android.util.AttributeSet;
import android.widget.TextView;

public class HightLightTextView extends TextView{

// 存储view的宽度
private int mTextViewWidth = 0;
// 画笔
private Paint mPaint;
// 线性渲染
private LinearGradient mLinearGradient;
// 存储变换的matrix
private Matrix matrix;
// 移动距离
private int mTranslateX = 0;
// 是否开启动画
private boolean isAnimateOn = true;

// 构造方法
public HightLightTextView(Context context) {
this(context, null);
}

public HightLightTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public HightLightTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

/**
* view的调用过程:构造方法->onFinishInflate->onSizeChanged->onDraw
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 获取view的宽度，初始化画笔等初始属性
if (mTextViewWidth == 0) {
mTextViewWidth = getMeasuredWidth();
// 如果宽度大于0的话，则初始化
if (mTextViewWidth > 0) {
// 初始化画笔
mPaint = getPaint();
// 线性渲染
mLinearGradient = new LinearGradient(-mTextViewWidth, 0, 0, 0, new int[] { 0X55FFFFFF, 0XFFFFFFFF, 0X55FFFFFF }, new float[] { 0, 0.5f, 1 }, TileMode.CLAMP);
mPaint.setShader(mLinearGradient);
matrix = new Matrix();
}
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isAnimateOn && matrix != null) {
mTranslateX += mTextViewWidth / 10;
// 如果移动的距离大于两倍的宽度，则重新开始移动
if (mTranslateX > 2 * mTextViewWidth) {
mTranslateX = -mTextViewWidth;
}
// 平移matrix
matrix.setTranslate(mTranslateX, 0);
// 设置线性变化的matrix
mLinearGradient.setLocalMatrix(matrix);
// 延迟100ms重绘
postInvalidateDelayed(100);
}
}

}

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/demo"
>

<com.beyole.view.HightLightTextView
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dip"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="滑动解锁" />

</RelativeLayout>

好了，教程到此为止结束了。

下载地址:http://download.csdn.net/detail/smarticeberg/9462069

Github地址:https://github.com/xuejiawei/beyole_highlighttextview，欢迎fork
or star

题外话:

android交流群：279031247(广告勿入)

新浪微博:SmartIceberg