仿微信Tab颜色渐变自定义View

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) {

}
});

<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>