The Android ViewPager content is slide up and down with the gesture to hide and display the Indicator effect. viewpagerindicator

The Android ViewPager content is slide up and down with the gesture to hide and display the Indicator effect. viewpagerindicator
Effect

Content in ViewPager, such as ListView gesture slide up and down. When the content slides down, that is, the gesture moves up to hide indictor. When the content slides up, that is, the gesture slides down and displays indicator.

Encoding

Use two databases to quickly complete
1. ViewPagerIndicator
2. ObservableScrollView

Introduce the two libraries into the project, quickly build a ViewPager framework, and add a ListView in the layout of the Fragment corresponding to each page of ViewPager. This ListView uses the ListView in the ObservableScrollView Library

• The main layout code. Linear layout is used. indicator is placed above and ViewPager is placed below.

<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 code: place an 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>

• Business Logic code

Initialize indicator and viewpager in the Activity, and then process the content in viewpager in fragment, that is, the interaction between the up and down sliding of listview gesture and indicator. Manage indicator in onCreateView and obtain its height

Indicator = (TabPageIndicator) getActivity (). findViewById (indicatorId); // obtain the indicator height. post (new Runnable () {@ Override public void run () {height = indicator. getHeight (); Log. d ("TAG", "height:" + height );}});

Associate listview and set listeners

listView = (ObservableListView) view.findViewById(R.id.list);listView.setScrollViewCallbacks(this);

Fragment implementation Interface

implements ObservableScrollViewCallbacks

The implementation method is as follows:

@Overridepublic void onScrollChanged(int scrollY, boolean firstScroll,        boolean dragging) {}@Overridepublic void onDownMotionEvent() {}@Overridepublic void onUpOrCancelMotionEvent(ScrollState scrollState) {}

Display and hide indicator in onUpOrCancelMotionEvent Method

// Obtain another method of height/* if (height = 0) {height = indicator. getHeight (); Log. d ("TAG", "height:" + height);} * // hide the gesture if it is up, and show if (scrollState = ScrollState if it is down. UP) {// hide if (isIndicatorShow &&! IsShowing) {hideIndicator () ;}} else if (scrollState = ScrollState. DOWN) {// if not displayed and the animation is not in progress, if (! IsIndicatorShow &&! IsShowing) {showIndicator ();}}

Complete the display and hide functions, and use the property animation to complete a transition effect.

Public void showIndicator () {// attribute animation translationY ObjectAnimator animator = ObjectAnimator. ofFloat (indicator, "translationY", 0f); // The duration of the animation. setDuration (500); // interpolation tool, slowing down the animation or. setInterpolator (new DecelerateInterpolator (2); // listener animator. addUpdateListener (new AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {// increase the height of LayoutParams layoutParams = indicator in the viewgroup. getLayoutParams (); float v = (Float) animation. getAnimatedValue (); Log. d ("TAG", "show:" + v); layoutParams. height = height + (int) v; // relay the indicator. requestLayout () ;}}); animator. addListener (new AnimatorListenerAdapter () {@ Override public void onAnimationStart (Animator animation) {// set true isShowing = true; super. onAnimationStart (animation);} @ Override public void onAnimationEnd (Animator animation) {// set isShowing = false after the animation ends; // set isIndicatorShow = true after the display; super. onAnimationEnd (animation) ;}}); // starts animations. start ();} public void hideIndicator () {ObjectAnimator animator = ObjectAnimator. ofFloat (indicator, "translationY",-height); animator. setDuration (500); // The acceleration interpolation tool animator. setInterpolator (new AccelerateInterpolator (2); animator. addUpdateListener (new AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {// The height of the viewgroup where indicator is located is reduced continuously. getLayoutParams (); float v = (Float) animation. getAnimatedValue (); Log. d ("TAG", "hide:" + v); layoutParams. height = height + (int) v; indicator. requestLayout () ;}}); // displays 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 ();}

All variables used

Private View view = null; // The View storing fragemnt private TabPageIndicator indicator = null; // indicator private ObservableListView listView = null; // listview private int indicatorId; // id value of indicator private int height = 0; // indicator private boolean isIndicatorShow = true; // whether private boolean isShowing = false is displayed; // whether the animation is in progress

Source code download

Source code download