前言:

相信很多時候開發會遇到類似於音樂歌詞同步，播放到哪句歌詞的哪個詞時會逐漸高亮，這樣的描述還是不夠準確，iPhone的滑動解鎖的那種效果，相信很多人都會熟悉吧。今天，我們的首要任務就是開發一個類似於這種效果的安卓控制元件，以便在以後的專案中直接使用，看起來高大上有木有。其實也不用害怕，需要我們分析和撰寫的內容並不多，廢話不多說，開始我們今天的教程吧。

正文:

在開始講解之前，需要準備的知識點有:

1. 必要的安卓基礎
2. 安卓view 的執行流程
3. 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>

好了，教程到此為止結束了。