Material Design Series Behavior up slide shows back to top button _android

Effect Preview

Source code at the end of the article.

Citation

Sometimes our page content is too long, sliding to the bottom of the page users to slide to the top is cumbersome, Android is not like iOS can click StatusBar back to the top, usually double-click Toolbar/actionbar or at the bottom of a button.

Today put a back to the top button on the bottom of the effect to do a behavior based implementation. So the traditional way to do this is to listen to this sliding view, such as Scrollview/listview/recyclerview/gridview, so if we use coordinatorlayout, then everything will become so Easy

Today we use the custom behavior to implement this fade animation effect that goes back to the top button. If you're interested in my behavior blog, then reader can find my other blog posts about behavior at the top of the article.

Implementation of custom Bahavior?

After we selected Coordinatorlayout.behavior Ctrl + T, we found that there are many implementation classes, which do we choose? Here depends on the button we want to manipulate (show/hide) who, in the end can not use the system has been implemented by the base class? So the following questions were thrown.

Which basebahavior of the custom behavior inheritance system?

This problem is really easy, as long as the contact with the MD people must have heard a fab bar, which is our Floatingactionbutton, so we also use here is Floatingactionbutton, So our custom behavior is also based on Floatingactionbutton.

So we coordinatorlayout.behavior from the back Ctrl + T's inside see a floatingactionbutton.behavior, this guy is we want to inherit, use it to control Floatingactionbutton display and hide animation.

The realization of Scaleupshowbehavior

Because it is to slide up the finger, the following section of the page appears, show button is, so we call it Scaleupshowbehavior implementation.

Next, a big wave of code to attack, first we want to inherit Floatingactionbutton.behavior:

public class Scaleupshowbehavior extends Floatingactionbutton.behavior {public
  Scaleupshowbehavior Context, AttributeSet attrs) {
    super ();
  }
}

Here are three important ways to achieve this:

The page begins to slide.
Onstartnestedscroll ();

The page is sliding.
Onnestedscroll ();

The page stops sliding.
Onstopnestedscroll ();

The first method Onstartnestedscroll:

Copy Code code as follows:

Onstartnestedscroll (coordinatorlayout L, Floatingactionbutton C, view directtargetchild, view v, int nestedscrollaxes)

Onstartnestedscroll words too literally, it's called when you start nesting scrolling, so this method has a Boolean return value that requires us to tell coordinatorlayout my behavior to listen for the sliding direction Because we are sliding up and down when showing/hiding fab, so here we return returns nestedscrollaxes = = Viewcompat.scroll_axis_vertical;.

The second method Onnestedscroll:

Copy Code code as follows:

Onnestedscroll (coordinatorlayout L, Floatingactionbutton Child, View target, int dxconsumed, int dyconsumed, int dxuncons umed, int dyunconsumed)

Well, you guessed right, this method was called during the slide, which is slipping. So, here we control the animation of the view. After my test, I found the rules:

if (dyconsumed > 0 && dyunconsumed = 0) {
  System.out.println ... ");
}
if (dyconsumed = = 0 && dyunconsumed > 0) {
  System.out.println ("On the edge of the slide ... ");
}
if (dyconsumed < 0 && dyunconsumed = = 0) {
  System.out.println ("Slipping in ...") ");
}
if (dyconsumed = = 0 && dyunconsumed < 0) {
  System.out.println ("to the boundary, still slipping ...") ");
}

So when we're on the slide, that's when the user needs to look at the next section of the page to display fab:

if ((dyconsumed > 0 && dyunconsumed = 0) | | (dyconsumed = = 0 && dyunconsumed > 0))
&& child.getvisibility ()!= view.visible) {//Display
      animatorutil.scaleshow (child, NULL);
    }

Instead, hide the fab when the user's finger slides, showing the top half of the page:

if ((dyconsumed < 0 && dyunconsumed = 0) | | (dyconsumed = = 0 && dyunconsumed < 0))
&& child.getvisibility ()!= view.gone &&!isanimatingout) {
      animatorutil.scalehide (child, Viewpropertyanimatorlistener);
    }

So the complete code here is:

@Override public void Onnestedscroll (Coordinatorlayout coordinatorlayout, Floatingactionbutton Child, View target, int d xconsumed, int dyconsumed, int dxunconsumed, int dyunconsumed) {//if (dyconsumed > 0 && dyunconsumed = 0 {//System.out.println ("up) ...
"); }//if (dyconsumed = 0 && dyunconsumed > 0) {//System.out.println ("to the edge of the slip ...
"); }//if (dyconsumed < 0 && dyunconsumed = = 0) {//System.out.println ("down) ...
"); }//if (dyconsumed = 0 && dyunconsumed < 0) {//System.out.println ("to the border, still slipping ...")
"); if ((dyconsumed > 0 && dyunconsumed = 0) | | (dyconsumed = = 0 && dyunconsumed > 0))
  && child.getvisibility ()!= view.visible) {//Display animatorutil.scaleshow (child, NULL); else if ((dyconsumed < 0 && dyunconsumed = 0) | | (dyconsumed = = 0 && dyunconsumed < 0)) && child.getvisibility ()!= View.gone;&!isanimatingout) {animatorutil.scalehide (Child, Viewpropertyanimatorlistener);

 }
}

The realization of animation and fab display hiding

The eagle-eyed man must have seen the number of votes we had above us. Unknown code:

Animatorutil.scaleshow ();
Animatorutil.scalehide ();
Isanimatingout;
Viewpropertyanimatorlistener;

What the hell is this?
animatorutil.scaleshow () is used to animate fade fab, this is not a system, but a custom:

Show view public
static void Scaleshow (view view, Viewpropertyanimatorlistener Viewpropertyanimatorlistener) {
  view.setvisibility (view.visible);
  Viewcompat.animate (view)
      . ScaleX (1.0f)
      . ScaleY (1.0f)
      . Alpha (1.0f)
      . Setduration (a)
      . Setlistener (Viewpropertyanimatorlistener)
      . Setinterpolator (Fast_out_slow_in_interpolator)
      . Start ();

Animatorutil.scalehide () is used to gradually hide fab, of course, our Custom animation:

Hide view public
static void Scalehide (view view, Viewpropertyanimatorlistener Viewpropertyanimatorlistener) {
  viewcompat.animate (view)
      . ScaleX (0.0f)
      . ScaleY (0.0f)
      . Alpha (0.0f)
      . Setduration (a)
      . Setinterpolator (Fast_out_slow_in_interpolator)
      . Setlistener (Viewpropertyanimatorlistener)
      . Start ();

Viewpropertyanimatorlistener and isanimatingout used to monitor the execution of hidden animation, when the animation was completed after the view.setvisibility (View.gone); that's the routine. Haha:

Private Boolean isanimatingout = false;

Viewpropertyanimatorlistener Viewpropertyanimatorlistener = new Viewpropertyanimatorlistener () {

  @Override
  public void Onanimationstart (view view) {
    isanimatingout = true;
  }

  @Override public
  void Onanimationend (view view) {
    isanimatingout = false;
    View.setvisibility (View.gone);
  }

  @Override public
  void Onanimationcancel (View arg0) {
    isanimatingout = false;
  }
;

The use of Scaleupshowbehavior

First, we learn the system. Define a value in String.xml:

Copy Code code as follows:

<string name= "Scale_up_show_behavior" >com.yanzhenjie.definebehavior.behavior.scaleupshowbehavior</ String>

It is then used in the XML layout:

<android.support.design.widget.floatingactionbutton
  android:id= "@+id/fab" ...
  App:layout_behavior= "@string/scale_up_show_behavior"/>

Of course, you also write the full class name of the class directly in the XML layout, but this is not conducive to modifying the package in which the class is located:

App:layout_behavior= "Com.yanzhenjie.definebehavior.behavior.ScaleUpShowBehavior"

Well, the trivial pull out, put the complete code of this layout to come up:

<android.support.design.widget.coordinatorlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:app= "Http://schemas.android.com/apk/res-auto" android:layout_width= "Match_parent" android:layout_height= " Match_parent "> <android.support.design.widget.appbarlayout android:layout_width=" match_parent "Android:la yout_height= "Wrap_content" android:theme= "@style/apptheme.appbaroverlay" > <android.support.v7.widget.toolb Ar android:id= "@+id/toolbar" android:layout_width= "match_parent" android:layout_height= "Attr/actionBarS"? Ize "App:popuptheme=" @style/apptheme.popupoverlay "/> </android.support.design.widget.AppBarLayout> &l T;android.support.v7.widget.recyclerview android:id= "@+id/recyclerview" android:layout_width= "Match_parent" an droid:layout_height= "Match_parent" app:layout_behavior= "@string/appbar_scrolling_view_behavior"/> <android . Support.design.widget.FloatingActionButton android:id= "@+id/fab" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:l Ayout_gravity= "Bottom|end" android:layout_margin= "16DP" android:src= "@mipmap/abc_ic_ab_back_top" App:layout_be Havior= "@string/scale_up_show_behavior" app:layout_scrollflags= "Scroll|enteralways|snap"/> </

 Android.support.design.widget.coordinatorlayout>

Then give Recyclerview random to point data, run up to see Haha, is not perfect ah?

Yes, some students see this fab when the activity is running, so we need to hide it in onwindowfocuschanged ():

Private Boolean isinitializefab = false;

@Override public
void Onwindowfocuschanged (Boolean hasfocus) {
  super.onwindowfocuschanged (hasfocus);
  if (!isinitializefab) {
    Isinitializefab = true;
    Hidefab ();
  }

private void Hidefab () {
  fab.postdelayed (new Runnable () {
    @Override public
    void Run () {
      Animatorutil.scalehide (FAB, New Viewpropertyanimatorlistener () {
        @Override public
        void Onanimationstart ( View View {
        }
        @Override public
        void Onanimationend (view view) {
          fab.setvisibility (view.gone);
        }
        @Override public
        void Onanimationcancel (view view) {
        }}
      )
;}

Perfect, yes!

SOURCE Download: Http://xiazai.jb51.net/201609/yuanma/AndroidBehavior (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.