大家看到微信首页切换效果有没有觉得很炫，滑动切换，点击底部bar瞬间切换，滑动切换渐变效果，线上效果图：
之前也在博客上看到别人的实现，再次基础上，我做了些优化。首先说下实现原理，大神略过，o(╯□╰)o
页面上看到的三个页面是三个Fragment, 左右滑动使用viewpager,相信大家也都是这么再用，那么底部用的是什么技术呢，底部渐变其实就是重写了ImageView,以及在左右滑动时，改变了TextView的颜色值，是不是很简单...下面我们一步一步的来：
1.自定义ImageView：
/**
* 初始化资源图片bitmap及相关绘制对象
* @param normal normals
* @param selected focus
*/
public final void init(int normal, int selected, int width, int height) {
this.mNormalIcon = createBitmap(normal);
this.mSelectedIcon = createBitmap(selected);
this.mNormalRect = new Rect(0, 0, width, height);
this.mSelectedRect = new Rect(0, 0, width, height);
this.mPaint = new Paint(1);
}
这里定义了两个Bitmap，分别对应获得焦点和失去焦点时显示的bitmap图像，两个矩阵，在绘制过程中使用到，定义了一个外部调用的方法，在左右滑动过程中，通过偏移值改变透明值，两张图片叠加就是对应的过度效果。
然后通通过滑动过程中不断刷新view完成重新绘制，由此有了重写onDraw方法：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (this.mPaint == null) {
return;
}
this.mPaint.setAlpha(255 - this.mSelectedAlpha);
canvas.drawBitmap(this.mNormalIcon, null, this.mNormalRect, this.mPaint);
this.mPaint.setAlpha(this.mSelectedAlpha);
canvas.drawBitmap(this.mSelectedIcon, null, this.mSelectedRect, this.mPaint);
}
这里可以看到同伙Paint改变传入的两个bitmap透明度，从而达到渐变效果,其中mSelectedAlpha为外部传入透明值
2.自定义实现底部bar容器，这里通过重写LinearLayout实现(姑且叫做container), 在container中我们要做这么几件事：
1).定义外表调用接口，接收底部显示资源信息：
a.首先是初始化参数：
public void initContainer (String[] titles, int[][] iconsRes, int[] colors, boolean showTransitionColor) {
this.mTitles = titles;
this.mIconRes = iconsRes;
this.mTextNormalColor = getResources().getColor(colors[0]);
this.mTextSelectedColor = getResources().getColor(colors[1]);
this.mShowTransitionColor = showTransitionColor;
}
这里传入了tab显示的文字数组、显示的图片资源数组、默认颜色和获得焦点时颜色值数组（数组大小=2），以及切换时是否显示过渡效果
b.设置布局文件及布局文件里对应的控件ID、显示图片时图片宽高参数，提供了三种方式：
①图文tab：
/**
* 设置布局文件及相关控件id
* @param layout layout布局文件 id
* @param iconId ImageView 控件 id id <=0 时不显示
* @param textId TextView 控件 id id <=0 时不显示
* @param width icon 宽度
* @param height icon 高度
*/
public void setContainerLayout (int layout, int iconId, int textId, int width, int height) {
mLayoutId = layout;
mTextViewId = textId;
mIconVIewId = iconId;
mIconWidth = width;
mIconHeight = height;
}
这里的layout及tab的布局文件， iconId对应的是自定义ImageView的资源Id, textId对应的是TextView的Id, 宽高指的是图片显示的宽高
②只有文字tab： 只显示文字tab时传入iconId即可
③只有图片tab: 相应的，是在图文tab提供的方法上，传入文本textId=0即可
c.注入ViewPager:这里需要监听ViewPager的滑动来改变渐变色
2).添加tab到容易container中：
这里需要判断iconId以及TextId是否大于0，=0即不显示，同时为了居中平分底部container长度， 所有tab等分底部container
/**
* <p>添加tab view到当前容器</p>
*/
private void addTabViewToContainer() {
final PagerAdapter adapter = mViewPager.getAdapter();
mTabView = new View[adapter.getCount()]; //这里根据adapter判断底部要显示的tab总数
for (int index = 0, len = adapter.getCount(); index < len; index++) {
final View tabView = LayoutInflater.from(getContext()).inflate(mLayoutId, this, false); //加载tab布局
mTabVi