android 中viewpager+fragment仿微信底部TAG完美渐变

viewpager+fragment仿微信底部tag完美渐变，在图片渐变的同时字的颜色也在变，注意，是渐变哦！

效果图：

activity_main.xml

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:zhy="http://schemas.android.com/apk/res/com.sing.weixin"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >
 <android.support.v4.view.viewpager
  android:id="@+id/id_viewpager"
  android:layout_width="fill_parent"
  android:layout_height="0dp"
  android:layout_weight="1" >
 </android.support.v4.view.viewpager>
 <linearlayout
  android:layout_width="fill_parent"
  android:layout_height="60dp"
  android:background="@drawable/tabbg"
  android:orientation="horizontal" >
  <com.sing.weixin.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_one"
   zhy:text_size="12sp" />
  <com.sing.weixin.changecoloriconwithtextview
   android:id="@+id/id_indicator_two"
   android:layout_width="0dp"
   android:layout_height="fill_parent"
   android:layout_weight="1"
   android:padding="5dp"
   zhy:icon="@drawable/ic_menu_friendslist"
   zhy:text="@string/tab_two"
   zhy:text_size="12sp" />
 </linearlayout>
</linearlayout> 

mainactivity.java

package com.sing.weixin;
import java.lang.reflect.field;
import java.util.arraylist;
import java.util.list;
import android.annotation.suppresslint;
import android.os.bundle;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentactivity;
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.onpagechangelistener;
import android.view.view;
import android.view.view.onclicklistener;
import android.view.viewconfiguration;
@suppresslint("newapi")
public class mainactivity extends fragmentactivity implements
  onpagechangelistener, onclicklistener {
 private viewpager mviewpager;
 // 选项卡一fragment
 private frgreturnvisit returnvisit;
 // 选项卡一fragment
 private frgmicrovisit microvisit;
 private list<changecoloriconwithtextview> mtabindicator = new arraylist<changecoloriconwithtextview>();
 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);
  setoverflowshowingalways();
  mviewpager = (viewpager) findviewbyid(r.id.id_viewpager);
  mviewpager.setadapter(new mypageradapter(getsupportfragmentmanager()));
  inittabindicator();
  mviewpager.setonpagechangelistener(this);
 }
 private void inittabindicator() {
  changecoloriconwithtextview one = (changecoloriconwithtextview) findviewbyid(r.id.id_indicator_one);
  changecoloriconwithtextview two = (changecoloriconwithtextview) findviewbyid(r.id.id_indicator_two);
  mtabindicator.add(one);
  mtabindicator.add(two);
  one.setonclicklistener(this);
  two.setonclicklistener(this);
  one.seticonalpha(1.0f);
 }
 @override
 public void onpageselected(int arg0) {
 }
 @override
 public void onpagescrolled(int position, float positionoffset,
   int positionoffsetpixels) {
  if (positionoffset > 0) {
   changecoloriconwithtextview left = mtabindicator.get(position);
   changecoloriconwithtextview right = mtabindicator.get(position + 1);
   left.seticonalpha(1 - positionoffset);
   right.seticonalpha(positionoffset);
  }
 }
 @override
 public void onpagescrollstatechanged(int state) {
 }
 @override
 public void onclick(view v) {
  resetothertabs();
  switch (v.getid()) {
  case r.id.id_indicator_one:
   mtabindicator.get(0).seticonalpha(1.0f);
   mviewpager.setcurrentitem(0, false);
   break;
  case r.id.id_indicator_two:
   mtabindicator.get(1).seticonalpha(1.0f);
   mviewpager.setcurrentitem(1, false);
   break;
  }
 }
 /**
  * 重置其他的tab
  */
 private void resetothertabs() {
  for (int i = 0; i < mtabindicator.size(); i++) {
   mtabindicator.get(i).seticonalpha(0);
  }
 }
 private void setoverflowshowingalways() {
  try {
   // true if a permanent menu key is present, false otherwise.
   viewconfiguration config = viewconfiguration.get(this);
   field menukeyfield = viewconfiguration.class.getdeclaredfield("shaspermanentmenukey");
   menukeyfield.setaccessible(true);
   menukeyfield.setboolean(config, false);
  } catch (exception e) {
   e.printstacktrace();
  }
 }
 public class mypageradapter extends fragmentpageradapter {
  public mypageradapter(fragmentmanager fm) {
   super(fm);
  }
  private final string[] titles = { "选项一", "选项二"};
  @override
  public charsequence getpagetitle(int position) {
   return titles[position];
  }
  @override
  public int getcount() {
   return titles.length;
  }
  @override
  public fragment getitem(int position) {
   switch (position) {
   case 0:
    if (returnvisit == null) {
     returnvisit = new frgreturnvisit();
    }
    return returnvisit;
   case 1:
    if (microvisit == null) {
     microvisit = new frgmicrovisit();
    }
    return microvisit;
   default:
    return null;
   }
  }
 }
} 

changecoloriconwithtextview.java

package com.sing.weixin;
import android.content.context;
import android.content.res.typedarray;
import android.graphics.bitmap;
import android.graphics.bitmap.config;
import android.graphics.bitmapfactory;
import android.graphics.canvas;
import android.graphics.paint;
import android.graphics.porterduff;
import android.graphics.porterduffxfermode;
import android.graphics.rect;
import android.graphics.drawable.bitmapdrawable;
import android.os.bundle;
import android.os.looper;
import android.os.parcelable;
import android.util.attributeset;
import android.util.typedvalue;
import android.view.view;
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 = "demo";
 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);
 }
 @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);
 }
 @override
 protected void ondraw(canvas canvas) {
  int alpha = (int) math.ceil((255 * malpha));
  canvas.drawbitmap(miconbitmap, null, miconrect, null);
  setuptargetbitmap(alpha);
  drawsourcetext(canvas, alpha);
  drawtargettext(canvas, alpha);
  canvas.drawbitmap(mbitmap, 0, 0, null);
 }
 private void setuptargetbitmap(int alpha) {
  mbitmap = bitmap.createbitmap(getmeasuredwidth(), getmeasuredheight(),
    config.argb_8888);
  mcanvas = new canvas(mbitmap);
  mpaint = new paint();
  mpaint.setcolor(mcolor);
  mpaint.setantialias(true);
  mpaint.setdither(true);
  mpaint.setalpha(alpha);
  mcanvas.drawrect(miconrect, mpaint);
  mpaint.setxfermode(new porterduffxfermode(porterduff.mode.dst_in));
  mpaint.setalpha(255);
  mcanvas.drawbitmap(miconbitmap, null, miconrect, mpaint);
 }
 private void drawsourcetext(canvas canvas, int alpha) {
  mtextpaint.settextsize(mtextsize);
  mtextpaint.setcolor(0xff333333);
  mtextpaint.setalpha(255 - alpha);
  canvas.drawtext(mtext, miconrect.left + miconrect.width() / 2
    - mtextbound.width() / 2,
    miconrect.bottom + mtextbound.height(), mtextpaint);
 }
 private void drawtargettext(canvas canvas, int alpha) {
  mtextpaint.setcolor(mcolor);
  mtextpaint.setalpha(alpha);
  canvas.drawtext(mtext, miconrect.left + miconrect.width() / 2
    - mtextbound.width() / 2,
    miconrect.bottom + mtextbound.height(), mtextpaint);
 }
 public void seticonalpha(float alpha) {
  this.malpha = alpha;
  invalidateview();
 }
 private void invalidateview() {
  if (looper.getmainlooper() == looper.mylooper()) {
   invalidate();
  } else {
   postinvalidate();
  }
 }
 public void seticoncolor(int color) {
  mcolor = color;
 }
 public void seticon(int resid) {
  this.miconbitmap = bitmapfactory.decoderesource(getresources(), resid);
  if (miconrect != null)
   invalidateview();
 }
 public void seticon(bitmap iconbitmap) {
  this.miconbitmap = iconbitmap;
  if (miconrect != null)
   invalidateview();
 }
 private static final string instance_state = "instance_state";
 private static final string state_alpha = "state_alpha";
 @override
 protected parcelable onsaveinstancestate() {
  bundle bundle = new bundle();
  bundle.putparcelable(instance_state, super.onsaveinstancestate());
  bundle.putfloat(state_alpha, malpha);
  return bundle;
 }
 @override
 protected void onrestoreinstancestate(parcelable state) {
  if (state instanceof bundle) {
   bundle bundle = (bundle) state;
   malpha = bundle.getfloat(state_alpha);
   super.onrestoreinstancestate(bundle.getparcelable(instance_state));
  } else {
   super.onrestoreinstancestate(state);
  }
 }
} 

github:https://github.com/ganchuanpu/demo_sing_weixin

以上所述是小编给大家介绍的android 中viewpager+fragment仿微信底部tag完美渐变效果，希望对大家有所帮助！