Android App仿微信界面切换时Tab图标变色效果的制作方法

概述
1、概述
学习Android少不了模仿各种app的界面，自从微信6.0问世以后，就觉得微信切换时那个变色的Tab图标屌屌的，今天我就带大家自定义控件，带你变色变得飞起~~
好了，下面先看下效果图：

清晰度不太好，大家凑合看~~有木有觉得这个颜色弱爆了了的，，，下面我动动手指给你换个颜色：

有没有这个颜色比较妖一点~~~好了~下面开始介绍原理。
2、原理介绍
通过上面的效果图，大家可能也猜到了，我们的图标并非是两张图片，而是一张图，并且目标颜色是可定制的，谁让现在动不动就谈个性化呢。
那么我们如何做到，可以让图标随心所遇的变色了，其实原理，在我的博客中出现了很多次了，下面你将看到一张熟悉的图：

有没有很熟悉的感脚，我们实际上还是利用了Paint的Xfermode，这次我们使用的是：Mode.DST_IN
Dst_IN回顾一下什么效果，先绘制Dst，设置Mode，再绘制Src，则显示的是先后绘图的交集区域，且是Dst.
再仔细观察下我们的图标：

为了方便大家的观看，我特意拿ps选择了一下我们图标的非透明区域，可以看到，我们这个小机器人非透明区域就是被线框起来的部分。
然后，我们图标变色的原理就出现了：
（1）先绘制一个颜色（例如：粉红）
（2）设置Mode=DST_IN
（3）绘制我们这个可爱的小机器人
回答我，显示什么，是不是显示交集，交集是什么？交集是我们的小机器人的非透明区域，也就是那张脸，除了两个眼；
好了，那怎么变色呢？
我绘制一个颜色的时候，难道不能设置alpha么~~~
到此，大家应该已经了解了我们图标的绘制的原理了吧。
3、自定义图标控件
我们的整个界面不用说，是ViewPager+Fragment ，现在关注的是底部~~
接下来我们考虑，底部的Tab，Tab我们的布局是LinearLayout，内部四个View，通过设置weight达到均分~~
这个View就是我们的自定义的图标控件了，我们叫做：ChangeColorIconWithTextView

关键点
接下来考虑，应该有什么属性公布出来
1、自定义属性
想了一下，我决定把图标，图标颜色，图标下显示的文字，文字大小这四个属性作为自定义属性。
那就自定义属性走起了：
a、values/attr.xml

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 
  <attr name="icon" format="reference" /> 
  <attr name="color" format="color" /> 
  <attr name="text" format="string" /> 
  <attr name="text_size" format="dimension" /> 
 
  <declare-styleable name="ChangeColorIconView"> 
    <attr name="icon" /> 
    <attr name="color" /> 
    <attr name="text" /> 
    <attr name="text_size" /> 
  </declare-styleable> 
 
</resources> 

b、在布局文件中使用

<com.zhy.weixin6.ui.ChangeColorIconWithTextView 
      android:id="@+id/id_indicator_one" 
      android:layout_width="0dp" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:padding="5dp" 
      zhy:icon="@drawable/ic_menu_start_conversation" 
      zhy:text="@string/tab_weixin" 
      zhy:text_size="12sp" /> 

自己注意命名空间的写法，xmlns:zhy="http://schemas.android.com/apk/res/应用的包名"。
c、在构造方法中获取

public class ChangeColorIconWithTextView extends View 
{ 
 
  private Bitmap mBitmap; 
  private Canvas mCanvas; 
  private Paint mPaint; 
  /** 
   * 颜色 
   */ 
  private int mColor = 0xFF45C01A; 
  /** 
   * 透明度 0.0-1.0 
   */ 
  private float mAlpha = 0f; 
  /** 
   * 图标 
   */ 
  private Bitmap mIconBitmap; 
  /** 
   * 限制绘制icon的范围 
   */ 
  private Rect mIconRect; 
  /** 
   * icon底部文本 
   */ 
  private String mText = "微信"; 
  private int mTextSize = (int) TypedValue.applyDimension( 
      TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics()); 
  private Paint mTextPaint; 
  private Rect mTextBound = new Rect(); 
 
  public ChangeColorIconWithTextView(Context context) 
  { 
    super(context); 
  } 
 
  /** 
   * 初始化自定义属性值 
   * 
   * @param context 
   * @param attrs 
   */ 
  public ChangeColorIconWithTextView(Context context, AttributeSet attrs) 
  { 
    super(context, attrs); 
 
    // 获取设置的图标 
    TypedArray a = context.obtainStyledAttributes(attrs, 
        R.styleable.ChangeColorIconView); 
 
    int n = a.getIndexCount(); 
    for (int i = 0; i < n; i++) 
    { 
 
      int attr = a.getIndex(i); 
      switch (attr) 
      { 
      case R.styleable.ChangeColorIconView_icon: 
        BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(attr); 
        mIconBitmap = drawable.getBitmap(); 
        break; 
      case R.styleable.ChangeColorIconView_color: 
        mColor = a.getColor(attr, 0x45C01A); 
        break; 
      case R.styleable.ChangeColorIconView_text: 
        mText = a.getString(attr); 
        break; 
      case R.styleable.ChangeColorIconView_text_size: 
        mTextSize = (int) a.getDimension(attr, TypedValue 
            .applyDimension(TypedValue.COMPLEX_UNIT_SP, 10, 
                getResources().getDisplayMetrics())); 
        break; 
 
      } 
    } 
 
    a.recycle(); 
 
    mTextPaint = new Paint(); 
    mTextPaint.setTextSize(mTextSize); 
    mTextPaint.setColor(0xff555555); 
    // 得到text绘制范围 
    mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBound); 
 
  } 

可以看到，我们在构造方法中获取了自定义的属性，并且计算了文本占据的控件存在我们的mTextBound中。

2、图标的绘制区域的选择
我们考虑下，有了属性，我们需要绘制一个文本，文本之上一个图标，我们怎么去控制绘制的区域呢？
我们的View显示区域，无非以下三种情况：

针对这三种情况，我门的图标的边长应该是什么呢？
我觉得边长应该是：控件的高度-文本的高度-内边距   与  控件的宽度-内边距  两者的小值；大家仔细推敲一下；
好了，有了上面的边长的结论，我们就开始计算图标的绘制范围了：

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
{ 
  super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 
  // 得到绘制icon的宽 
  int bitmapWidth = Math.min(getMeasuredWidth() - getPaddingLeft() 
      - getPaddingRight(), getMeasuredHeight() - getPaddingTop() 
      - getPaddingBottom() - mTextBound.height()); 
 
  int left = getMeasuredWidth() / 2 - bitmapWidth / 2; 
  int top = (getMeasuredHeight() - mTextBound.height()) / 2 - bitmapWidth 
      / 2; 
  // 设置icon的绘制范围 
  mIconRect = new Rect(left, top, left + bitmapWidth, top + bitmapWidth); 
 
} 

3、绘制图标
绘制图标有很多步骤呀，我来列一列
(1)计算alpha（默认为0）
(2)绘制原图
(3)在绘图区域，绘制一个纯色块（设置了alpha），此步绘制在内存的bitmap上
(4)设置mode，针对内存中的bitmap上的paint
(5)绘制我们的图标，此步绘制在内存的bitmap上
(6)绘制原文本
(7)绘制设置alpha和颜色后的文本
(8)将内存中的bitmap绘制出来
根据上面的步骤，可以看出来，我们的图标其实绘制了两次，为什么要绘制原图呢，因为我觉得比较好看。
3-5步骤，就是我们上面分析的原理
6-7步，是绘制文本，可以看到，我们的文本就是通过设置alpha实现的