Android ViewPager内容部分随手势上下滑动隐藏与显示Indicator效果的实现
效果
ViewPager中的内容,比如ListView手势上下滑动,当内容向下滑动时,即手势上划,隐藏indictor,当内容向上滑动时,即手势下滑,显示indicator,效果如图所示
编码
借用两个库来快速完成
1. ViewPagerIndicator
2. ObservableScrollView
将两个库引入项目中去,快速的搭建一个ViewPager框架后,在ViewPager每页对应的Fragment的布局中增加一个ListView,这个ListView使用ObservableScrollView库中的ListView
- 主布局代码,使用线性布局,上方放置indicator,下方放置ViewPager
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="fill_parent"
android:layout_height="50dp" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
-Fragment代码,放置一个ObservableListView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="${relativePackage}.${activityClass}" >
<cn.edu.zafu.view.observableview.ObservableListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
- 业务逻辑代码
在Activity中初始化indicator和viewpager,然后再fragment中处理viewpager中内容即listview手势上下滑动与indicator的联动。在onCreateView中管理indicator,并获取其高度
indicator = (TabPageIndicator) getActivity().findViewById(indicatorId);
//获得indicator高度
indicator.post(new Runnable() {
@Override
public void run() {
height=indicator.getHeight();
Log.d("TAG", "height:"+height);
}
});
关联listview并设置监听器
listView = (ObservableListView) view.findViewById(R.id.list);
listView.setScrollViewCallbacks(this);
fragment实现对应的接口
implements ObservableScrollViewCallbacks
实现的方法如下
@Override
public void onScrollChanged(int scrollY, boolean firstScroll,
boolean dragging) {
}
@Override
public void onDownMotionEvent() {
}
@Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
}
在onUpOrCancelMotionEvent方法中完成显示和隐藏indicator
//获得高度的另一种方法
/*if(height==0){
height=indicator.getHeight();
Log.d("TAG", "height:"+height);
}*/
//如果手势向上则隐藏,手势向下则显示
if (scrollState == ScrollState.UP) {
//如果显示的并且动画没有在进行,则隐藏
if (isIndicatorShow&&!isShowing) {
hideIndicator();
}
} else if (scrollState == ScrollState.DOWN) {
//如果没显示的并且动画没有在进行,则显示
if (!isIndicatorShow&&!isShowing) {
showIndicator();
}
}
完成显示和隐藏的函数,使用属性动画完成一个过渡效果
public void showIndicator() {
//属性动画translationY
ObjectAnimator animator = ObjectAnimator.ofFloat(indicator, "translationY",
0f);
//持续时间
animator.setDuration(500);
//插值器,减速
animator.setInterpolator(new DecelerateInterpolator(2));
//监听器
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//不断增加indicator所在viewgroup的高度
LayoutParams layoutParams = indicator.getLayoutParams();
float v=(Float) animation.getAnimatedValue();
Log.d("TAG","show:"+v);
layoutParams.height=height+(int)v;
//重新布局
indicator.requestLayout();
}
});
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
//动画开始后设置为true
isShowing=true;
super.onAnimationStart(animation);
}
@Override
public void onAnimationEnd(Animator animation) {
//动画结束后设置为false
isShowing=false;
//显示后设置为已显示
isIndicatorShow = true;
super.onAnimationEnd(animation);
}
});
//开始动画
animator.start();
}
public void hideIndicator() {
ObjectAnimator animator = ObjectAnimator.ofFloat(indicator, "translationY",-height);
animator.setDuration(500);
//加速插值器
animator.setInterpolator(new AccelerateInterpolator(2));
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//不断减小indicator所在viewgroup的高度
LayoutParams layoutParams = indicator.getLayoutParams();
float v=(Float) animation.getAnimatedValue();
Log.d("TAG","hide:"+v);
layoutParams.height=height+(int)v;
indicator.requestLayout();
}
});
//同显示
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
isShowing=true;
super.onAnimationStart(animation);
}
@Override
public void onAnimationEnd(Animator animation) {
isShowing=false;
isIndicatorShow = false;
super.onAnimationEnd(animation);
}
});
animator.start();
}
所有用到的变量
private View view = null;//存储fragemnt的视图
private TabPageIndicator indicator = null;//indicator
private ObservableListView listView = null;//listview
private int indicatorId;//indicator对应的id值
private int height=0;//indicator高低
private boolean isIndicatorShow = true;//是否显示
private boolean isShowing=false;//动画是否正在进行
源码下载
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。