Material Design series of behavior to achieve Android know home _android

The purpose of this blog: Imitation of the home page slide up when the Animation hidden toolbar, Flocationactionbutton, tab navigation, slide show, if and your expectations are different, then you can not need to see, avoid wasting your valuable time oh.

Effect Preview

Know the effect:

This blog implementation effect:

Today's effect of the source code download link at the end of the article.

Implementation analysis

This effect is not difficult to achieve, but it is very useful, when the user's fingers on the slide, the screen shows the content of the time, hidden toolbar, tab navigation, fab to free up more space to display content, so that users cool. Simple and rough, but that's what we're aiming for.

The first is the head of the toolbar, this is needless to say, the basic will, will not people casually see me a blog demo have this effect, just elementary school level.

Next look at Fab (Flocationactionbutton) show and hide, know is using the translation, we make an optimized change, of course, translation is also possible, if you have seen my Material design series, Custom behavior above slide shows back to top button this blog remark. So our fab animation hidden and displayed is also used in the principle of a blog, do not see a blog students need to look back oh, here is not to repeat.

Finally look at the following tab navigation hidden and display, this is indeed a practical translation is better, but I believe you if you have seen me material Design series, Behavior's Bottomsheetbehavior and bottomsheetdialog this blog, this effect is not difficult to achieve. It is highly recommended to read this article before reading it, otherwise it is impossible to continue to look at it.

In fact, the amount of code is still very small, mainly behavior principle, behavior and coordinatorlayout how to use together. So, it is highly recommended to read the above two blogs.

......

OK, five minutes later, I believe you have read the two blogs mentioned above. The effect of this in the first Fab blog is to show Fab to go back to the top when the finger slides up (the bottom of the screen), but this is exactly the opposite: Hide fab when you slide up. If you read the principle of the interpretation of the section or run the demo, this effect so easy. The second blog also talked about how to hide and display this tab navigation, then some students feel that today's blog is over? The answer, of course, is no, or I will not open a blog to talk about this.

Why, then? Still have the difficulty, where is the difficulty? The two behavior mentioned above are used in conjunction with coordinatorlayout to achieve two effects. and Bottomsheetbehavior Hide and Show tab navigation this inside before we use button to control, how to do ' coordinatorlayout in the Contentview sliding when the dynamic display and hidden tab navigation?

Next to a bit of real material, lead everyone together code.

Page layout

The above citation and introduction, we already know the fab display and hide with a custom behavior implementation, tab navigation with Bottomsheetbehavior to achieve, then our layout file should also be published:

<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: layout_height= "Wrap_content" android:theme= "@style/apptheme.appbaroverlay" > < Android.support.v7.widget.Toolbar android:id= "@+id/toolbar" android:layout_width= "Match_parent" android:layout_he ight= "Attr/actionbarsize" app:layout_scrollflags= "Scroll|enteralways|snap" App:popuptheme= "@style Apptheme.popupoverlay "/> </android.support.design.widget.AppBarLayout> < Android.support.v7.widget.RecyclerView android:id= "@+id/recyclerview" android:layout_width= "Match_parent" Android
  : layout_height= "match_parent" app:layout_behavior= "@string/appbar_scrolling_view_behavior"/> <LinearLayout Android:id= "@+id/Tab_layout "android:layout_width=" match_parent "android:layout_height=" Actionbarsize "Android:layout_" Alignparentbottom= "true" android:background= @android: Color/white "app:layout_behavior=" @string/bottom_sheet_ Behavior "> <button android:layout_width=" 0dp "android:layout_height=" Match_parent "android:layout_weight = "1" android:text= "first"/> <button android:layout_width= "0DP" android:layout_height= "Match_parent" and roid:layout_weight= "1" android:text= "second"/> <button android:layout_width= "0DP" android:layout_height= "Ma Tch_parent "android:layout_weight=" 1 "android:text=" third "/> <button android:layout_width=" 0DP "Android : layout_height= "Match_parent" android:layout_weight= "1" android:text= "four"/> </LinearLayout> <android . Support.design.widget.FloatingActionButton android:id= "@+id/fab" android:layout_width= "Wrap_content" Android: layout_height= "Wrap_content" android:layout_gravity= "Bottom|end" android:layout_marginbottom= "70DP" android:layout_marginend= "16DP" android:layout_marginright= "16DP "Android:src=" @mipmap/ic_action_new "app:layout_behavior=" @string/scale_down_show_behavior "App:layout_
 scrollflags= "Scroll|enteralways|snap"/> </android.support.design.widget.CoordinatorLayout>

Or a little explanation, the content area is a recyclerview, using the behavior is the design of the Scrollingviewbehavior:

App:layout_behavior= "@string/appbar_scrolling_view_behavior"

Then a linearlayout, using the behavior is the design of the Bottomsheetbehavior:

App:layout_behavior= "@string/bottom_sheet_behavior"

The last Floatingactionbutton, using our custom Scaledownshowbehavior:

App:layout_behavior= "@string/scale_down_show_behavior"

The other two are the design of their own, only Floatingactionbutton Scaledownshowbehavior need us to customize, then we will implement the following scaledownshowbehavior.

Custom behavior to achieve fab animation control

And here's the custom behavior, which comes first: the user's finger slides on the screen, hides the fab, and leaves more places for the user.

Here is still inherited Floatingactionbutton.behavior:

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

Here our sliding direction is still unchanged, monitoring the vertical direction of the slide:

@Override Public
Boolean onstartnestedscroll (Coordinatorlayout coordinatorlayout, ...) {return
 nestedscrollaxes = = viewcompat.scroll_axis_vertical;
}

So we're going to have to change our starting slip a little bit. Callback This method: Onnestedscroll ():

 @Override//Hide whether the animation is executing private Boolean isanimatingout = false; public void Onnestedscroll (Coordinatorlayout coordinatorlayout, Floatingactionbutton Child, View target, int dxconsumed , int dyconsumed, int dxunconsumed, int dyunconsumed) {if (dyconsumed > 0 | | dyunconsumed > 0) &&!isanim
 Atingout && child.getvisibility () = = view.visible) {//fingers on slippery, hidden Fab animatorutil.scalehide (child, listener); else if ((dyconsumed < 0 | | dyunconsumed < 0) && child.getvisibility ()!= view.visible) {animatorutil.s Caleshow (child, NULL);//fingers slipping, showing fab}} private Viewpropertyanimatorlistener listener = 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;
}
}; 

Well, the code is very small and complete. So we'll define in String.xml, the variable @string/scale_down_show_behavior we just quoted:

Copy Code code as follows:

<string name= "Scale_down_show_behavior" >com.yanzhenjie.definebehavior.behavior.scaledownshowbehavior</ String>

Ah, so excited, I hastened to run a moment. But, but ... After the run found that the hell ah, only the FAB will follow the show and hide, completely can not see the tab navigation Ah, Zhangjie you are kidding people? Haha, and listen to me carefully way.

Control the tab navigation bar by listening for view display/hide in Scaledownshowbehavior

In fact, as long as you have seen material design series, behavior Bottomsheetbehavior and Bottomsheetdialog This article students will find that The Bottomsheetbehavior control is hidden by default, and we need to call it to control the display of its view. So here we need to call the Bottomsheetbehavior method in the Coordinatorlayout contentview scrolling to make it dependent view display and hide.

Then we found Scaledownshowbehavior was automatically called by the system, also triggered the view of the hidden and display, coordinatorlayout This product does not give us automatic call Bottomsheetbehavior, what do we do? If you haven't forgotten, when we customize Scaledownshowbehavior, there is a place in the Onnestedscroll () method to invoke the display and concealment of fab, so we add a callback monitor here so that the outside can monitor its action, Is it possible to control bottomsheetbehavior at the same time? If you don't have xiangming, look at the code.

First, set a listener in the Scaledownshowbehavior:

External listening is displayed and hidden. Public
interface Onstatechangedlistener {
 void onchanged (Boolean isshow);
}

Then callback in the Onnestedscroll () method of Scaledownshowbehavior:

 private Onstatechangedlistener Monstatechangedlistener;
 public void Setonstatechangedlistener (Onstatechangedlistener monstatechangedlistener) {
This.monstatechangedlistener = Monstatechangedlistener;  @Override public void Onnestedscroll (Coordinatorlayout coordinatorlayout, Floatingactionbutton Child, View target, int dxconsumed, int dyconsumed, int dxunconsumed, int dyunconsumed) {if (dyconsumed > 0 | | dyunconsumed > 0) &&A MP!isanimatingout && child.getvisibility () = = view.visible) {//Down animatorutil.scalehide (child, Viewpropert
  Yanimatorlistener);
  if (Monstatechangedlistener!= null) {monstatechangedlistener.onchanged (false); else if ((dyconsumed < 0 | | dyunconsumed < 0) && child.getvisibility ()!= view.visible) {Animatoruti
  L.scaleshow (child, NULL);
  if (Monstatechangedlistener!= null) {monstatechangedlistener.onchanged (true); }
 }
}

So perfect. Come on, set up a listener ... I'm going to go and suddenly find out how to get this behavior from fab? And look at my analysis below to make sure you vista.

Get the Fab Behavior object, control the display/hide of Bottomsheetbehavior view by listening

We know that setting the behavior object to a view is set in XML, so behavior is the Layoutparams attribute of a view? hahaha understand it, and then behavior must be combined with the coordinatorlayout, otherwise it is also nonsense, so, this view must also be Coordinatorlayout's son view, Therefore, a static method is produced in the Scaledownshowbehavior (in order to facilitate reading, the prompts are written in Chinese):

public static <v extends View> Scaledownshowbehavior from (V View) {
 Viewgroup.layoutparams params = View.getlay Outparams ();
 if (!) ( params instanceof Coordinatorlayout.layoutparams)) {
  throw new IllegalArgumentException (" This view is not a coordinatorlayout view ");
 }
 Coordinatorlayout.behavior Behavior = ((coordinatorlayout.layoutparams) params). Getbehavior ();
 if (!) ( Behavior instanceof Scaledownshowbehavior)) {
  throw new IllegalArgumentException (" The Behaviro of this view is not Scaledownshowbehavior ");
 }
 Return (scaledownshowbehavior) behavior;
}

So we are in the activity:

Private Bottomsheetbehavior Mbottomsheetbehavior;
@Override
protected void onCreate (Bundle savedinstancestate) {
 super.oncreate (savedinstancestate);
 Setcontentview (r.layout.zhihu_main);

 Scaledownshowbehavior Scaledownshowfab = Scaledownshowbehavior.from (FAB);
 Scaledownshowfab.setonstatechangedlistener (Onstatechangedlistener);
 Mbottomsheetbehavior = Bottomsheetbehavior.from (Findviewbyid (r.id.tab_layout));
}

Private Onstatechangedlistener Onstatechangedlistener = new Onstatechangedlistener () {
 @Override
 public void OnChanged (Boolean isshow) {
  mbottomsheetbehavior.setstate (
  isshow?) bottomsheetbehavior.state_expanded
  : bottomsheetbehavior.state_collapsed);
 }
;

Oh hello, unconsciously has been our effect has been achieved, here is the most important is Onstatechangedlistener, where the tab navigation to achieve the hidden and display, its state is from the Scaledownshowbehavior callback.

Show tab Navigation When page initialization is good

As we said above, the view that adds the Bottomsheetbehavior attribute is hidden by default, so we need to display our tab navigation when the page is initialized:

Private Boolean initialize = false;

@Override public
void Onwindowfocuschanged (Boolean hasfocus) {
 super.onwindowfocuschanged (hasfocus);
 if (!initialize) {
  initialize = true;
  Mbottomsheetbehavior.setstate (bottomsheetbehavior.state_expanded);
 }

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.