The behavior of material design series realizes the home page of Android

The purpose of this blog is to simulate the animation of hiding toolbar, flocationactionbutton and tab navigation when the home page slides upward. If it is different from your expectations, you don't need to read it to avoid wasting your precious time.

Effect preview

Know the effect:

The effect of this blog:

The source code download link for today's effect is at the end of the article.

Implementation analysis

In fact, this effect is not difficult to achieve, but it is very useful. When the user's finger slides up and the content below is displayed on the screen, hide the toolbar, tab navigation and fab to make more space to display the content and make the user happy. Simple and rough, but that's our purpose.

The first is the toolbar of the head. Needless to say, people who can or can't read my blog demo have this effect. It's almost primary school level.

Secondly, let's take a look at the display and hiding of FAB (flocationaction button). We know that it is used for translation. We will make an optimization change here. Of course, translation is also possible. If you have seen my material design series, slide the display on the custom behavior and return to the top button. Then, the animation hiding and display of our Fab also use the principle of a blog. Students who don't read a blog need to look back. Oh, I won't repeat it here.

Finally, let's take a look at the hiding and display of tab navigation below. This is really practical and translation is better. However, I believe if you have read my material design series, behavior's bottomsheetbehavior and bottomsheetdialog, this effect is not difficult to achieve. It is strongly recommended that you read this article before reading the following, otherwise you really can't continue to read it.

In fact, the amount of code is still small, mainly due to the principle of behavior and how to use behavior and coordinatorlayout together. So, I strongly recommend reading the above two blogs.

……

OK, five minutes have passed. I believe you have probably read the two blogs mentioned above. In the first Fab blog, the effect is to show Fab when the finger slides up (when the content below the screen is displayed) to return to the top, but here is just the opposite: hide Fab when sliding up. If you have carefully read the paragraph of the principle explanation or run the demo, the effect is so easy. The second blog also talked about how to hide and display the tab navigation, so some students think today's blog is over? Of course, the answer is no, otherwise I won't open another blog about this.

Why? There are still difficulties. Where are the difficulties? It is how the two behaviors mentioned above are combined with coordinatorlayout to achieve two effects at the same time. In addition, the bottomsheetbehavior hides and displays tab navigation. Previously, we used the button to control it. How to dynamically display and hide tab navigation when the contentview in ` coordinatorlayout slides?

Next, let's have some real materials and lead you to roll up the code together.

Page layout

According to the above citations and introductions, we already know that the display and hiding of Fab are realized by user-defined behavior, and the tab navigation is realized by bottomsheetbehavior, so our layout file should also be published:

Let's explain that the content area is a recyclerview, and the behavior used is the scrollingviewbehavior of design:

app:layout_ behavior="@string/appbar_scrolling_view_behavior"

Then a LinearLayout is created. The behavior used is the bottomsheetbehavior of design:

app:layout_ behavior="@string/bottom_sheet_behavior"

The last floatingactionbutton uses our custom scaledownshowbehavior:

app:layout_ behavior="@string/scale_down_show_behavior"

The other two are self-contained in design. Only the scaledownshowbehavior of the floatingactionbutton needs to be customized. Let's implement the scaledownshowbehavior below.

Customize behavior to realize the animation control of Fab

Here we talk about custom behavior again. First, let's implement it: the user's finger slides on the screen, hides the Fab, and leaves more space for the user.

It still inherits floatingactionbutton Behavior：

Here, our sliding direction remains unchanged. Listen for sliding in the vertical direction:

Then we need to change our callback method at the beginning of sliding slightly: onnestedscroll():

Well, there's very little code. It's done. Then we'll be in string The variable @ string / scale that we just referenced is defined in XML_ down_ show_ behavior：

Ah, I'm so excited. I'll run it quickly. But, but... After running, I found that damn it, only Fab will show and hide, and I can't see the tab navigation at all. Yan Zhenjie, are you fooling people? Ha ha ha, listen to me carefully.

Control the tab navigation bar by listening to view show / hide in scaledownshowbehavior

In fact, as long as you read the material design series, the bottomsheetbehavior and bottomsheetdialog of behavior, you will find that the controls using bottomsheetbehavior are hidden by default, and we need to call its methods to control the display of its view. Therefore, we need to call the method of bottomsheetbehavior to display and hide the attached view when the contentview in coordinatorlayout scrolls.

Then we found that scaledownshowbehavior was automatically called by the system, which also triggered the hiding and display of the view. The coordinatorlayout didn't automatically call bottomsheetbehavior for us. What should we do? If you don't forget, when we customize scaledownshowbehavior, there is a place in the onnestedscroll () method to call the display and hiding of fab, so we add a callback monitoring here so that the external can monitor its actions. Can we control the bottomsheetbehavior at the same time? If you haven't seen Xiang Ming, look at the code.

First specify a listener in scaledownshowbehavior:

Then call back in the onnestedscroll() method of scaledownshowbehavior:

It's perfect. Come on, set up a monitor... I pulled my leg and suddenly found out how to get this behavior from Fab? Let's look at my analysis below. I'm sure it will make you another village.

Get the behavior object of Fab and control the display / hiding of bottomsheetbehavior's view through listening

We know that when setting a behavior object for a view, it is set in XML, so behavior is the layoutparams property of a view, right? Hahaha, you see, then behavior must be used in combination with coordinatorlayout, or it's bullshit. So, this view must also be a child view of coordinatorlayout, so the following static method is generated in scaledownshowbehavior (for ease of reading, the prompt is written in Chinese):

So in activity:

Oh, hey, our effect has been realized unknowingly. The most important thing here is onstatechangedlistener, which realizes the hiding and display of tab navigation. Its state is recalled from scaledownshowbehavior.

Display tab navigation after page initialization

As mentioned above, the view with bottomsheetbehavior attribute is hidden by default, so we need to display our tab navigation during page initialization:

Source code download: http://xiazai.jb51.net/201609/yuanma/AndroidBehavior (jb51.net). rar

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.