Android實現仿微信tab高亮icon粘著手的滑動效果

微信的主頁分為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) {
      }
    }); 

如上代碼，只需簡單的幾行代碼就能實現這個順滑的動畫的效果。

 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持本站。