文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-06-06 07:42

关注

微信的主页分为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 高仿微信朋友圈动态支持双击手势放大并滑动查看图片效果Android实现微信首页左右滑动切换效果Android高仿微信对话列表滑动删除效果Android仿微信列表滑动删除 如何实现滑动列表SwipeListViewAndroid仿微信列表滑动删除之可滑动控件(一)Android仿微信滑动弹出编辑、删除菜单效果、增加下拉刷新功能Android仿微信右滑返回功能的实例代码


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯