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

 更新时间:2016年08月31日 11:28:27   作者:ly513782705  
这篇文章主要为大家详细介绍了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) {
      }
    }); 

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

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

相关文章

  • 导入takephoto库编译失败与glide库冲突应排除依赖

    导入takephoto库编译失败与glide库冲突应排除依赖

    今天小编就为大家分享一篇关于导入takephoto库编译失败与glide库冲突应排除依赖的文章,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • Jetpack Compose实现动画效果的方法详解

    Jetpack Compose实现动画效果的方法详解

    compose为支持动画提供了大量的 api,通过这些 api 我们可以轻松实现动画效果。本文将为大家介绍利用compose实现的多种动画效果的示例代码,需要的可以参考一下
    2022-02-02
  • Android获取窗体信息的Util方法

    Android获取窗体信息的Util方法

    这篇文章主要介绍了Android获取窗体信息的Util方法的相关资料,需要的朋友可以参考下
    2015-07-07
  • Android中传递图片的2种方法

    Android中传递图片的2种方法

    这篇文章主要介绍了Android中传递图片的2种方法,本文分别给出种方法的操作代码实例,需要的朋友可以参考下
    2015-04-04
  • Android中TextureView与SurfaceView用法区别总结

    Android中TextureView与SurfaceView用法区别总结

    TextureView和SurfaceView都是继承自View类的,TextureView在Andriod4.0之后才引入的,SurfaceView不能加上动画、平移、缩放,TextureView可以但有1-3帧的延迟
    2018-04-04
  • Android FileProvider使用教程

    Android FileProvider使用教程

    主要摘要关键知识点和记录我的学习思路及验证结论,可以帮助读者比较全面的认识FileProvider,FileProvider是特殊的ContentProvider,目标是在为保护隐私和数据安全而加强应用沙箱机制的同时,支持在应用间共享文件
    2023-03-03
  • Android Content Provider详解及示例代码

    Android Content Provider详解及示例代码

    本文主要讲解Android Content Provider,这里提供相关文档资料,并附有实现代码和实现效果图,有需要的小伙伴可以参考下
    2016-08-08
  • android顶部(toolbar)搜索框实现代码

    android顶部(toolbar)搜索框实现代码

    这篇文章主要介绍了android顶部(toolbar)搜索框实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Android 百度地图marker中图片不显示的解决方法(推荐)

    Android 百度地图marker中图片不显示的解决方法(推荐)

    下面小编就为大家分享一篇Android 百度地图marker中图片不显示的解决方法(推荐),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • Android Studio实现简易计算器App (Java语言版)

    Android Studio实现简易计算器App (Java语言版)

    这篇文章主要为大家详细介绍了Android Studio实现简易计算器App,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论