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) { } });
如上代码,只需简单的几行代码就能实现这个顺滑的动画的效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。