Android 微信6.1 tab栏图标和字体颜色渐变的实现

[java] view plain copypackage moon.wechat.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rect; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; /**  * Created by moon.zhong on 2015/2/4.  */ public class TabItem extends View {   /*字体大小*/   private int mTextSize ;   /*字体选中的颜色*/   private int mTextColorSelect ;   /*字体未选择的时候的颜色*/   private int mTextColorNormal;   /*绘制未选中时字体的画笔*/   private Paint mTextPaintNormal;   /*绘制已选中时字体的画笔*/   private Paint mTextPaintSelect;   /*每个 item 的宽和高，包括字体和图标一起*/   private int mViewHeight, mViewWidth;   /*字体的内容*/   private String mTextValue ;   /*已选中时的图标*/   private Bitmap mIconNormal;   /*未选中时的图标*/   private Bitmap mIconSelect;   /*用于记录字体大小*/   private Rect mBoundText;   /*已选中是图标的画笔*/   private Paint mIconPaintSelect;   /*为选中时图标的画笔*/   private Paint mIconPaintNormal;   public TabItem(Context context) {     this(context, null);   }   public TabItem(Context context, AttributeSet attrs) {     this(context, attrs, 0);   }   public TabItem(Context context, AttributeSet attrs, int defStyleAttr) {     super(context, attrs, defStyleAttr);     initView();     initText();   }   /*初始化一些东西*/   private void initView() {     mBoundText = new Rect();   }   /*初始化画笔，并设置出是内容*/   private void initText() {     mTextPaintNormal = new Paint();     mTextPaintNormal.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, mTextSize, getResources().getDisplayMetrics()));     mTextPaintNormal.setColor(mTextColorNormal);     mTextPaintNormal.setAntiAlias(true);     mTextPaintNormal.setAlpha(0xff);     mTextPaintSelect = new Paint();     mTextPaintSelect.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, mTextSize, getResources().getDisplayMetrics()));     mTextPaintSelect.setColor(mTextColorSelect);     mTextPaintSelect.setAntiAlias(true);     mTextPaintSelect.setAlpha(0);     mIconPaintSelect = new Paint(Paint.ANTI_ALIAS_FLAG) ;     mIconPaintSelect.setAlpha(0);     mIconPaintNormal = new Paint(Paint.ANTI_ALIAS_FLAG) ;     mIconPaintNormal.setAlpha(0xff);   }   /*测量字体的大小*/   private void measureText() {     mTextPaintNormal.getTextBounds(mTextValue, 0, mTextValue.length(), mBoundText);   }   /*测量字体和图标的大小，并设置自身的宽和高*/   @Override   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {     int widthMode = MeasureSpec.getMode(widthMeasureSpec);     int heightMode = MeasureSpec.getMode(heightMeasureSpec);     int widthSize = MeasureSpec.getSize(widthMeasureSpec);     int heightSize = MeasureSpec.getSize(heightMeasureSpec);     int width = 0, height = 0;     measureText();     int contentWidth = Math.max(mBoundText.width(), mIconNormal.getWidth());     int desiredWidth = getPaddingLeft() + getPaddingRight() + contentWidth;     switch (widthMode) {       case MeasureSpec.AT_MOST:         width = Math.min(widthSize, desiredWidth);         break;       case MeasureSpec.EXACTLY:         width = widthSize;         break;       case MeasureSpec.UNSPECIFIED:         width = desiredWidth;         break;     }     int contentHeight = mBoundText.height() + mIconNormal.getHeight();     int desiredHeight = getPaddingTop() + getPaddingBottom() + contentHeight;     switch (heightMode) {       case MeasureSpec.AT_MOST:         height = Math.min(heightSize, desiredHeight);         break;       case MeasureSpec.EXACTLY:         height = heightSize;         break;       case MeasureSpec.UNSPECIFIED:         height = contentHeight;         break;     }     setMeasuredDimension(width, height);     mViewWidth = getMeasuredWidth() ;     mViewHeight = getMeasuredHeight() ;   }   @Override   protected void onDraw(Canvas canvas) {     drawBitmap(canvas) ;     drawText(canvas) ;   }   /*话图标，先画为选中的图标，在画已选中的图标*/   private void drawBitmap(Canvas canvas) {     int left = (mViewWidth - mIconNormal.getWidth())/2 ;     int top = (mViewHeight - mIconNormal.getHeight() - mBoundText.height()) /2 ;     canvas.drawBitmap(mIconNormal, left, top ,mIconPaintNormal);     canvas.drawBitmap(mIconSelect, left, top , mIconPaintSelect);   }   /*画字体*/   private void drawText(Canvas canvas) {     float x = (mViewWidth - mBoundText.width())/2.0f ;     float y = (mViewHeight + mIconNormal.getHeight() + mBoundText.height()) /2.0F ;     canvas.drawText(mTextValue,x,y, mTextPaintNormal);     canvas.drawText(mTextValue,x,y, mTextPaintSelect);   }   public void setTextSize(int textSize) {     this.mTextSize = textSize;     mTextPaintNormal.setTextSize(textSize);     mTextPaintSelect.setTextSize(textSize);   }   public void setTextColorSelect(int mTextColorSelect) {     this.mTextColorSelect = mTextColorSelect;     mTextPaintSelect.setColor(mTextColorSelect);     mTextPaintSelect.setAlpha(0);   }   public void setTextColorNormal(int mTextColorNormal) {     this.mTextColorNormal = mTextColorNormal;     mTextPaintNormal.setColor(mTextColorNormal);     mTextPaintNormal.setAlpha(0xff);   }   public void setTextValue(String TextValue) {     this.mTextValue = TextValue;   }   public void setIconText(int[] iconSelId,String TextValue) {     this.mIconSelect = BitmapFactory.decodeResource(getResources(), iconSelId[0]);     this.mIconNormal = BitmapFactory.decodeResource(getResources(), iconSelId[1]);     this.mTextValue = TextValue;   }   /*通过 alpha 来设置 每个画笔的透明度，从而实现现实的效果*/   public void setTabAlpha(float alpha){     int paintAlpha = (int)(alpha*255) ;     mIconPaintSelect.setAlpha(paintAlpha);     mIconPaintNormal.setAlpha(255-paintAlpha);     mTextPaintSelect.setAlpha(paintAlpha);     mTextPaintNormal.setAlpha(255-paintAlpha);     invalidate();   } } 

[java] view plain copypackage moon.wechat; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import java.util.HashMap; import java.util.Map; import moon.wechat.view.TabView; public class MainActivity extends ActionBarActivity {   private String[] mTitle = {"微信", "通讯录", "发现", "我"};   private int[] mIconSelect = {R.drawable.al_, R.drawable.al8, R.drawable.alb, R.drawable.ald};   private int[] mIconNormal = {R.drawable.ala, R.drawable.al9, R.drawable.alc, R.drawable.ale};   private ViewPager mViewPager ;   private TabView mTabView ;   private Map<Integer,Fragment> mFragmentMap ;   @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);     mFragmentMap = new HashMap<>() ;     mViewPager = (ViewPager)findViewById(R.id.id_view_pager) ;     mViewPager.setOffscreenPageLimit(4);     mViewPager.setAdapter(new PageAdapter(getSupportFragmentManager()));     mTabView = (TabView)findViewById(R.id.id_tab) ;     mTabView.setViewPager(mViewPager);   }   private Fragment getFragment(int position){     Fragment fragment = mFragmentMap.get(position) ;     if(fragment == null){       switch (position){         case 0:           fragment = new WeChatFragment() ;           break ;         case 1:           fragment = new WeContactFragment();           break ;         case 2:           fragment = new WeDiscoverFragment();           break;         case 3:           fragment = new GameFragment() ; //          fragment = new WeMineFragment();           break;       }       mFragmentMap.put(position,fragment) ;     }     return fragment ;   }   class PageAdapter extends FragmentPagerAdapter implements TabView.OnItemIconTextSelectListener{     public PageAdapter(FragmentManager fm) {       super(fm);     }     @Override     public Fragment getItem(int position) {       return getFragment(position);     }     @Override     public int[] onIconSelect(int position) {       int icon[] = new int[2] ;       icon[0] = mIconSelect[position] ;       icon[1] = mIconNormal[position] ;       return icon;     }     @Override     public String onTextSelect(int position) {       return mTitle[position];     }     @Override     public int getCount() {       return mTitle.length;     }   } } 

[html] view plain copy<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   xmlns:zgy="http://schemas.android.com/apk/res-auto"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:background="@android:color/white"   android:orientation="vertical">   <android.support.v4.view.ViewPager     android:id="@+id/id_view_pager"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_weight="1"     >     </android.support.v4.view.ViewPager>   <moon.wechat.view.TabView     android:id="@+id/id_tab"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:orientation="horizontal"     android:background="#eeeeee"     zgy:text_size="12sp"     zgy:text_normal_color="#ff777777"     zgy:text_select_color="#ff45c01a"     zgy:item_padding="7dp">    </moon.wechat.view.TabView> </LinearLayout> 

[java] view plain copypackage moon.wechat.view; import android.content.Context; import android.content.res.TypedArray; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; import java.util.ArrayList; import java.util.List; import moon.wechat.R; /**  * Created by moon.zhong on 2015/2/4.  */ public class TabView extends LinearLayout implements View.OnClickListener {   private ViewPager mViewPager;   private ViewPager.OnPageChangeListener mOnPageChangeListener;   private PagerAdapter mPagerAdapter;   private int mChildSize;   private List<TabItem> mTabItems;   private OnItemIconTextSelectListener mListener;   private int mTextSize = 12;   private int mTextColorSelect = 0xff45c01a;   private int mTextColorNormal = 0xff777777;   private int mPadding = 10;   public TabView(Context context) {     this(context, null);   }   public TabView(Context context, AttributeSet attrs) {     this(context, attrs, 0);   }   public TabView(Context context, AttributeSet attrs, int defStyleAttr) {     super(context, attrs, defStyleAttr);     TypedArray typedArray = getResources().obtainAttributes(attrs, R.styleable.TabView);     int N = typedArray.getIndexCount();     for (int i = 0; i < N; i++) {       switch (typedArray.getIndex(i)) {         case R.styleable.TabView_text_size:           mTextSize = (int) typedArray.getDimension(i, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,               mTextSize, getResources().getDisplayMetrics()));           break;         case R.styleable.TabView_text_normal_color:           mTextColorNormal = typedArray.getColor(i, mTextColorNormal);           break;         case R.styleable.TabView_text_select_color:           mTextColorSelect = typedArray.getColor(i, mTextColorSelect);           break;         case R.styleable.TabView_item_padding:           mPadding = (int) typedArray.getDimension(i, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,               mPadding, getResources().getDisplayMetrics()));           break;       }     }     typedArray.recycle();     mTabItems = new ArrayList<>();   }   public void setViewPager(final ViewPager mViewPager) {     if (mViewPager == null) {       return;     }     this.mViewPager = mViewPager;     this.mPagerAdapter = mViewPager.getAdapter();     if (this.mPagerAdapter == null) {       throw new RuntimeException("亲，在您设置TabView的ViewPager时，请先设置ViewPager的PagerAdapter");     }     this.mChildSize = this.mPagerAdapter.getCount();     this.mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {       @Override       public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //        Log.v("zgy","=============position="+position+",====positionOffset="+positionOffset) ;         View leftView;         View rightView;         if (positionOffset > 0) {           leftView = mViewPager.getChildAt(position);           rightView = mViewPager.getChildAt(position + 1);           leftView.setAlpha(1 - positionOffset);           rightView.setAlpha(positionOffset);           mTabItems.get(position).setTabAlpha(1 - positionOffset);           mTabItems.get(position + 1).setTabAlpha(positionOffset);         } else {           mViewPager.getChildAt(position).setAlpha(1);           mTabItems.get(position).setTabAlpha(1 - positionOffset);         }         if (mOnPageChangeListener != null) { mOnPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);         }       }       @Override       public void onPageSelected(int position) {         if (mOnPageChangeListener != null) { mOnPageChangeListener.onPageSelected(position);         }       }       @Override       public void onPageScrollStateChanged(int state) {         if (mOnPageChangeListener != null) { mOnPageChangeListener.onPageScrollStateChanged(state);         }       }     });     if (mPagerAdapter instanceof OnItemIconTextSelectListener) {       mListener = (OnItemIconTextSelectListener) mPagerAdapter;     }else {       throw new RuntimeException("请让你的pageAdapter实现OnItemIconTextSelectListener接口");     }     initItem();   }   public void setOnPageChangeListener(ViewPager.OnPageChangeListener mOnPageChangeListener) {     this.mOnPageChangeListener = mOnPageChangeListener;   }   private void initItem() {     for (int i = 0; i < mChildSize; i++) {       TabItem tabItem = new TabItem(getContext());       LayoutParams params = new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1);       tabItem.setPadding(mPadding, mPadding, mPadding, mPadding);       tabItem.setIconText(mListener.onIconSelect(i), mListener.onTextSelect(i));       tabItem.setTextSize(mTextSize);       tabItem.setTextColorNormal(mTextColorNormal);       tabItem.setTextColorSelect(mTextColorSelect);       tabItem.setLayoutParams(params);       tabItem.setTag(i);       tabItem.setOnClickListener(this);       mTabItems.add(tabItem);       addView(tabItem);     }   }   @Override   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {     super.onMeasure(widthMeasureSpec, heightMeasureSpec);   }   @Override   public void onClick(View v) {     int position = (Integer) v.getTag();     if (mViewPager.getCurrentItem() == position) {       return;     }     for (TabItem tabItem : mTabItems) {       tabItem.setTabAlpha(0);     }     mTabItems.get(position).setTabAlpha(1);     mViewPager.setCurrentItem(position, false);   }   public interface OnItemIconTextSelectListener {     int[] onIconSelect(int position);     String onTextSelect(int position);   } }