Android实现仿微信tab高亮icon粘着手的滑动效果

概述微信的主页分为3个tab，被选中的tab的tabwidget下面会有一个高亮的长条icon，而当切换tab页面的时候，这个icon不是等到tab切换完成后再出现在当前被选中的tab的tabwidget的下面，而是会随着viewpager滑动页面的动作也

微信的主页分为3个tab，被选中的tab的tabWidget下面会有一个高亮的长条icon，而当切换tab页面的时候，这个icon不是等到tab切换完成后再出现在当前被选中的tab的tabWidget的下面，而是会随着vIEwpager滑动页面的动作也进行滑动，从前一个tabWidget滑到当前被选中的tabWidget，像vIEwpager一样有一种粘着你的手的效果，体验很赞。上个图： 

本篇分析如何实现这个效果。 

首先基本知识是，实现不同tab页之间可以滑动切换需要用到TabPageIndicator + VIEwPager，其中TabPageIndicator是一个开源控件，VIEwPager是androID的support.v4包里面的控件。这个实现这里不进行描述，网上有很多的例子。本篇主要实现高亮icon的粘手效果。 

先看布局： 

  <relativeLayout    androID:layout_wIDth="match_parent"    androID:layout_height="@dimen/height_56">    <com.Widget.TabPageIndicator      androID:ID="@+ID/indicator"      androID:layout_wIDth="fill_parent"      androID:layout_height="@dimen/height_56"      androID:background="@drawable/base_action_bar_bg" />    <ImageVIEw      androID:ID="@+ID/highlight_tab_iv"      androID:layout_height="wrap_content"      androID:layout_wIDth="90dp"      androID:background="@drawable/base_tabpager_indicator_selected"      androID:layout_alignParentBottom="true"/>  </relativeLayout>

如上面的代码，高亮icon用一个ImageVIEw实现，这个ImageVIEw就是那个高亮的长条icon。

然后针对这个ImageVIEw我们需要初始化的时候计算其宽度，保证它的宽度和一个单独的tabWidget是一样宽的：

     mHlTabIv = (ImageVIEw)findVIEwByID(R.ID.highlight_tab_iv);    relativeLayout.LayoutParams mParams =        (relativeLayout.LayoutParams)mHlTabIv.getLayoutParams();    mParams.wIDth = getScreenWIDth() / tabCount;    mTabVIEwWIDth = mParams.wIDth;    mHlTabIv.setLayoutParams(mParams);

然后，要做到这个ImageVIEw粘手的效果，要怎么做呢，其实androID3.0之后添加的API就能很简单的实现，3.0之前的就需要用到nineoldandroIDs这个第三方的开源框架，这个框架的目的就是让3.0之前的androID版本实现androID3.0之后的属性动画。这个框架的用法和3.0之后的API用法差不多，所以本篇直接用3.0之后的API。 

mAnimator = mHlTabIv.animate();

 下面是动画的实现代码：

    mTabPageIndicator.setonPagechangelistener(new OnPagechangelistener() {      @OverrIDe      public voID onPageSelected(int index) {      }      @OverrIDe      public voID onPageScrolled(int currentPos,float percent,int delta) {        if (!mIsScrolling)          mAnimator.translationX(mTabVIEwWIDth * currentPos + delta                      / tabCount).setDuration(50)              .setListener(new Animator.AnimatorListener() {                @OverrIDe                public voID onAnimationStart(Animator animation) {                  mIsScrolling = true;                }                @OverrIDe                public voID onAnimationRepeat(Animator animation) {                }                @OverrIDe                public voID onAnimationEnd(Animator animation) {                  mIsScrolling = false;                }                @OverrIDe                public voID onAnimationCancel(Animator animation) {                  mIsScrolling = false;                }              }).start();      }      @OverrIDe      public voID onPageScrollStateChanged(int arg0) {      }    }); 

如上代码，只需简单的几行代码就能实现这个顺滑的动画的效果。

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android实现仿微信tab高亮icon粘着手的滑动效果全部内容，希望文章能够帮你解决Android实现仿微信tab高亮icon粘着手的滑动效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。