Android实现微信首页左右滑动切换效果

大家看到微信首页切换效果有没有觉得很炫，滑动切换，点击底部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布局 mTabView[index] = tabView; /*tabIconView初始化*/ TabIconView iconView = null; if （mIconVIewId > 0） { // 传入的图片资源文件ID不为0时，表示需要显示icon,然后初始化该ViewiconView = （TabIconView） tabView.findViewById（mIconVIewId）;iconView.init（mIconRes[index][0], mIconRes[index][1], mIconWidth, mIconHeight）; //这里调了自定义ImageView的init方法 } /*tabTextView初始化*/ TextView textView = null; if （mTextViewId > 0） {textView = （TextView） tabView.findViewById（mTextViewId）;textView.setText（mTitles[index]）; } /*设置宽度，等分container*/ LayoutParams lp = （LayoutParams） tabView.getLayoutParams（）; lp.width = 0; lp.weight = 1; /*添加tab点击事件*/ addTabOnClickListener（tabView, index）; /*设置当前状态*/ if （index == mViewPager.getCurrentItem（）） { //当先显示tab，设置初始状态为获得焦点状态if （iconView ！= null） { iconView.offsetChanged（0）;}tabView.setSelected（true）;if （textView ！= null） { textView.setTextColor（mTextSelectedColor）;} } addView（tabView）;} }

3）.监听viewPager的滑动事件，根据偏移值更新container，完成重绘操作

4）.在container的onDraw中根据偏移量计算透明值，这里文本偏移值计算用了一个开源的代码

@Override protected void onDraw（Canvas canvas） {super.onDraw（canvas）;final int childCount = getChildCount（）;if （childCount > 0） { /*当发生偏移时，绘制渐变区域*/ if （mSelectionOffset > 0f && mSelectedPosition < （getChildCount（） - 1） && mShowTransitionColor） {/*获取当前tab和下一tab view */View selectedTab = getChildAt（mSelectedPosition）;View nextTab = getChildAt（mSelectedPosition + 1）;/*显示tab icon时,刷新各自view 透明度*/if （mIconVIewId > 0） { View selectedIconView = selectedTab.findViewById（mIconVIewId）; View nextIconView = nextTab.findViewById（mIconVIewId）; //draw icon alpha if （selectedIconView instanceof TabIconView && nextIconView instanceof TabIconView） {（（TabIconView） selectedIconView）.offsetChanged（mSelectionOffset）;（（TabIconView） nextIconView）.offsetChanged（1 - mSelectionOffset）; }} /*显示tab text,刷新各自view 透明度*/if （mTextViewId > 0） { View selectedTextView = selectedTab.findViewById（mTextViewId）; View nextTextView = nextTab.findViewById（mTextViewId）; //draw text color Integer selectedColor = （Integer） evaluate（mSelectionOffset, mTextSelectedColor, mTextNormalColor）; Integer nextColor = （Integer） evaluate（1 - mSelectionOffset, mTextSelectedColor, mTextNormalColor）; if （selectedTextView instanceof TextView && nextTextView instanceof TextView） {（（TextView） selectedTextView）.setTextColor（selectedColor）;（（TextView） nextTextView）.setTextColor（nextColor）; }} }} }

3.定义个FragmentAdapter，这个就略过，比较简单了

4.做了以上准备工作，就可以写个测试例子试试效果了，当然这里为了看到效果，我们需要事先准备好几张图片，以及几个fragment

private void initViews（） {//得到apdaterTabFragmentAdapter mAdapter = new TabFragmentAdapter（getSupportFragmentManager（）, fragments）;ViewPager mPager = （ViewPager） findViewById（R.id.tab_pager）;mPager.setAdapter（mAdapter）;//如果当前类需要对viewPager做监听TabContainerView mTabLayout = （TabContainerView） findViewById（R.id.ll_tab_container）;mTabLayout.setOnPageChangeListener（this）;mTabLayout.initContainer（getResources（）.getStringArray（R.array.tab_main_title）, ICONS_RES, TAB_COLORS, true）;int width = getResources（）.getDimensionPixelSize（R.dimen.tab_icon_width）;int height = getResources（）.getDimensionPixelSize（R.dimen.tab_icon_height）;mTabLayout.setContainerLayout（R.layout.tab_container_view, R.id.iv_tab_icon, R.id.tv_tab_text, width, height）;//mTabLayout.setSingleTextLayout（R.layout.tab_container_view, R.id.tv_tab_text）;//mTabLayout.setSingleIconLayout（R.layout.tab_container_view, R.id.iv_tab_icon）;mTabLayout.setViewPager（mPager）;mPager.setCurrentItem（getIntent（）.getIntExtra（"tab", 0））; }

ManActivity对应的xml就比较简单了，可以参考源码，最后运行效果，就是上面的贴图了，到此防微信的滑动切换就完成了，源码请访问以下链接：

源码下载：https://github.com/JarekWang/wechathome.git
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。