浴火焚神无弹窗,埃及艳后的故事,黑扬沙
微信的主页分为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 studio 解决logcat无过滤工具栏的操作
Android Studio 恢复小窗口停靠模式(Docked Mode)
Android studio保存logcat日志到本地的操作
Android Studio快捷键生成TAG、Log.x日志输出介绍
网友评论