仿微信Tab顏色漸變自定義View

實現的原理是在原有的圖層位置上進行重新繪製，在ViewPager不斷的滑動時，讓顏色進行不斷的變換。下面爲實現的代碼：

MyTabicon.java

package com.example.quubee.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.Xfermode;
import android.graphics.Paint.Style;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.example.quubee.R;

public class MyTabIcon extends View {
	private int color;// 顏色
	private String text;// 文本
	private Drawable icon;// 文字上方的圖片

	private Paint mIconPaint;// 畫圖標的
	private Paint mTextPaint;// 畫文字的

	private Rect bounds; // 用於獲得文字的寬度和長度
	private int alpha;// 該值代表畫筆顏色的透明度，範圍0-255

	public MyTabIcon(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(context, attrs);
	}
	/**
	 * 初始化自定義的屬性
	 * @param context
	 * @param attrs
	 */
	private void init(Context context, AttributeSet attrs) {
		TypedArray array = context.obtainStyledAttributes(attrs,
				R.styleable.MyTabIcon);
		color = array.getColor(R.styleable.MyTabIcon_icon_color, Color.GREEN);
		text = array.getString(R.styleable.MyTabIcon_icon_text);
		icon = array.getDrawable(R.styleable.MyTabIcon_icon_src);
		array.recycle();
		//設置爲可點擊
		setClickable(true);
		//初始化畫筆
		initPaint();
	}
	/**
	 * 配置畫筆屬性
	 */
	private void initPaint() {
		// 配置文字畫筆
		mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
		//設置文字的大小
		mTextPaint.setTextSize(TypedValue.applyDimension(
				TypedValue.COMPLEX_UNIT_SP, 15, getResources()
						.getDisplayMetrics()));
		mTextPaint.setStyle(Style.FILL);
		//獲取文字bounds
		bounds = new Rect();
		mTextPaint.getTextBounds(text, 0, text.length(), bounds);
		// 配置圖標畫筆
		mIconPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		Bitmap bitmap = ((BitmapDrawable) icon).getBitmap();
		// 由於圖片的尺寸不理想，所以在這裏把圖片的尺寸放大了一倍
		bitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth() * 2,
				bitmap.getHeight() * 2, true);
		//獲取圖片座標原點進行繪製
		int left = (getWidth() - bitmap.getWidth()) / 2;
		int top = (getHeight() - bitmap.getHeight()) / 2 - 10;
		canvas.drawBitmap(bitmap, left, top, null);
		
		//獲取文字的座標原點進行繪製
		float x = (getWidth() - bounds.width()) / 2;
		float y = (getHeight() + bitmap.getHeight()) / 2 + bounds.height() - 20;
		// 畫一行文字
		canvas.drawText(text, x, y, mTextPaint);
		
		//對原先的文字和圖片進行重新繪製
		drawColorText(canvas, x, y);
		drawColorIcon(canvas, bitmap, left, top);
	}
	/**
	 * 繪製原先的圖片顏色，達到漸變效果
	 * @param canvas onDraw提供的畫布
	 * @param bitmap 顯示的圖片
	 * @param left	左邊座標
	 * @param top	頂部座標
	 */
	private void drawColorIcon(Canvas canvas, Bitmap bitmap, int left, int top) {
		//重現創建一個畫布進行繪製想要的圖片顏色效果，覆蓋到原來的圖層
		Bitmap blankBitmap = Bitmap.createBitmap(bitmap.getWidth(),
				bitmap.getHeight(), Config.ARGB_8888);
		Canvas myCanvas = new Canvas(blankBitmap);
		myCanvas.drawBitmap(bitmap, 0, 0, null);
		
		mIconPaint.setColor(color);
		mIconPaint.setAlpha(alpha);
		mIconPaint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
		
		RectF rect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
		myCanvas.drawRect(rect, mIconPaint);

		// 把第一步畫好的圖畫到手機屏幕上
		canvas.drawBitmap(blankBitmap, left, top, null);
	}
	/**
	 * 在原先的文字上繪製一個一樣大小的文字，以達到顏色的漸變效果
	 * @param canvas onDraw提供的畫布
	 * @param x	文字的x軸座標，一般在左邊
	 * @param y	文字的y軸座標，一般在下方
	 */
	private void drawColorText(Canvas canvas, float x, float y) {
		mTextPaint.setColor(Color.GRAY);
		mTextPaint.setAlpha(255);
		canvas.drawText(text, x, y, mTextPaint);
		mTextPaint.setColor(color);
		mTextPaint.setAlpha(alpha);
		canvas.drawText(text, x, y, mTextPaint);
	}
	/**
	 * 提供訪問的接口，能對圖像的顏色值進行變換
	 * @param alpha
	 */
	public void setIconAlpha(int alpha) {
		this.alpha = alpha;
		invalidate();
	}
}

下面爲使用的方法：

vpMain.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				for(MyTabIcon icon:list){
					icon.setIconAlpha(0);
				}
				list.get(arg0).setIconAlpha(255);
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				//arg0:滑動開始時的頁面下標
				//arg1:滑動的百分比
				//arg2:滑動了多少個像素
				if(arg0<list.size()-1){
					list.get(arg0+1).setIconAlpha((int) (255*arg1));
					list.get(arg0).setIconAlpha((int) (255*(1-arg1)));
				}
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});

在attr文件中添加的屬性

<declare-styleable name="MyTabIcon">
	    <attr name="icon_text" format="string"></attr>
	    <attr name="icon_color" format="color"></attr>
	    <attr name="icon_src" format="reference"></attr>
	</declare-styleable>

實現的效果圖如下：