Android Floating button + Slide up hide button + Slide Show button

Source: Internet
Author: User

1. Effect Demo

1.1. Follow this red floating button

As you can see, the float button disappears when the slide is up, because the user desperately wants to know what's underneath instead of going back to the top.

When the user wants to go back to their original position, they can click on the floating button and quickly return to the top. So the floating button bounced up.


2. Define an animated generic class Animatorutil

2.1. The source code is as follows

 Public classAnimatorutil {Private StaticLinearoutslowininterpolator Fast_out_slow_in_interpolator =NewLinearoutslowininterpolator (); Private StaticAccelerateinterpolator Liner_interpolator =NewAccelerateinterpolator (); //Show View     Public Static voidscaleshow (view view, Viewpropertyanimatorlistener Viewpropertyanimatorlistener) {view.setvisibility (View.VISI        BLE); Viewcompat.animate (view). ScaleX (1.0f). ScaleY (1.0f). Alpha (1.0f). Setduration (800). Setlistener (Viewpropertyanimatorlistener). Setinterpolator (Fast_out_slow_in_interpola    TOR). Start (); }    //Hide View     Public Static voidscalehide (view view, Viewpropertyanimatorlistener Viewpropertyanimatorlistener) {viewcompat.animate (view) . ScaleX (0.0f). ScaleY (0.0f). Alpha (0.0f). Setduration (800). Setinterpolator (Fast_out_slow_in_interpolator). Setlistener (Viewpropertyanimatorliste    NER). Start (); }    //Show View     Public Static voidtranslateshow (view view, Viewpropertyanimatorlistener Viewpropertyanimatorlistener) {view.setvisibility (view.        VISIBLE); Viewcompat.animate (view). Translationy (0). Setduration (400). Setlistener (Viewpropertyanimatorlistener). Setinterpolator (Fast_out_slow_in_interpola    TOR). Start (); }    //Hide View     Public Static voidtranslatehide (view view, Viewpropertyanimatorlistener Viewpropertyanimatorlistener) {view.setvisibility (view.        VISIBLE); Viewcompat.animate (view). Translationy (260). Setduration (400). Setinterpolator (Fast_out_slow_in_interpolator). Setlistener (Viewpropertyanimatorliste    NER). Start (); }}
View Code

2.2. Member Variable analysis

  

This defines a linearoutslowininterpolator, System class.

It then defines a accelerateinterpolator, generic system class.

2.3. Show View Method One

  

Viewcompat System class. This view is displayed dynamically. Set the period to 800ms.

2.4. Hide View Method One

  

Viewcompat System class, where this view is dynamically hidden. Set the period to 800ms.

2.5. Show View Method Two

  

method is similar, but here is a fine tuning.

2.6. Hide View Method Two

  

method is similar, but here is a fine tuning.


3. Floating button Behavior Controller

3.1. The source code is as follows.

//FAB Behavior Controller Public classScaledownshowbehaviorextendsFloatingactionbutton.behavior { PublicScaledownshowbehavior (Context context, AttributeSet attrs) {Super(); } @Override Public BooleanOnstartnestedscroll (Coordinatorlayout coordinatorlayout, Floatingactionbutton C Hild, view directtargetchild, view target,intnestedscrollaxes) {        if(Nestedscrollaxes = =viewcompat.scroll_axis_vertical) {            return true; }        return Super. Onstartnestedscroll (Coordinatorlayout, Child, Directtargetchild, Target, nestedscrollaxes); }    Private BooleanIsanimateing =false;//Are you animating    Private BooleanIsshow =true;//is already displayed     Public voidOnnestedscroll (coordinatorlayout coordinatorlayout, Floatingactionbutton child, View ta Rget,intDxconsumed,intdyconsumed,intDxunconsumed,intdyunconsumed) {        if((dyconsumed > 0 | | dyunconsumed > 0) &&!isanimateing && isshow) {//Swipe your finger to hide the fabAnimatorutil.translatehide (Child,NewStatelistener () {@Override Public voidOnanimationstart (view view) {Super. Onanimationstart (view); Isshow=false;        }            }); } Else if((dyconsumed < 0 | | dyunconsumed < 0 &&!isanimateing &&!)isshow)) {animatorutil.translateshow (Child,NewStatelistener () {@Override Public voidOnanimationstart (view view) {Super. Onanimationstart (view); Isshow=true; }            });//finger slide, show fab        }    }    classStatelistenerImplementsViewpropertyanimatorlistener {@Override Public voidOnanimationstart (view view) {isanimateing=true; } @Override Public voidonanimationend (view view) {isanimateing=false; } @Override Public voidonanimationcancel (view view) {isanimateing=false; }    }}
View Code

3.2. Constructor function.

  

This inherits the behavior of the floating button Floatingactionbutton.behavior, the constructor directly inherits the base class.

3.3. Rewrite the first function here Onstartnestedscroll

  

This is still the main inheritance of the original can.

3.4. Definition of two variables

  

3.5. Monitor finger slide and finger slide

  

The swipe of the finger is judged by dyconsumed>0, and the animatorutil hidden function can be executed.

The finger slide is judged by dyconsumed<0, and executes the animatorutil display function.

3.6.AnimatorUtil custom class functions need to pass in a listener

  

If the animation starts, sets whether the animation is true

If the animation ends, sets whether the animation is false

If the animation is canceled, sets whether the animation is false


4. Configure the Floating button behavior in the layout

4.1. Set App:layout_behavior in the layout of the floating button

  

4.2. Then define a custom path in the resource file, which can be written directly on it.

  

5. Summarize

5.1. First customize an animated universal Class Animatorutil, which is used to dynamically display or hide the view.

5.2. Then define a floating button behavior controller, inherit Floatingactionbutton.behavior, implement two overriding methods.

In the overridden Onnestedscroll, judge the finger to slip, and then call the generic class to implement the hidden view. Judging the finger slipped and then

Call the generic class implementation to display the view.

5.3. Then define a app:layout_behavior in the layout of the floating button, and add the path to the custom class with the resource file.



Android Floating button + Slide up hide button + Slide Show button

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.