仿微信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>

实现的效果图如下：