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

时间:2021-03-22 ly513782705 人气:0

想了解Android实现仿微信tab高亮icon粘着手的滑动效果的相关内容吗，ly513782705在本文为您仔细讲解Android仿微信tab高亮icon滑动效果的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：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) {
      }
    });

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

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

加载全部内容