ListView or Recyclerview Scroll when hidden toolbar (1)

• Original link: How to hide/show Toolbar when list is scroling (Part 1)
• Translator: Chaossss
• Reviewer: the GitHub user name of the reviewer here
• Status: In proofreading

Today I'm going to write a blog post to show you a cool effect of the Google + app--when scrolling up/down Listview/recyclerview, toolbar and Fab (the small button at the bottom right of the screen) will hide/appear. This effect is also considered by Google to conform to the Material design specification, see: Material design Checklist.

If possible, we hope that when the screen scrolls down, the app's toolbar and Fab will leave the screen, freeing up more space in the vertical direction to display our content. And when our screen scrolls up, the app's toolbar and Fab will reappear.

The final effect we make should be the following:

In this blog post, we will use Recyclerview as our list, but this does not mean that other scrollable containers can not achieve this effect, but other scrollable containers (such as the ListView) need to spend more effort to achieve this effect. So how are we going to make it? I think of two ways:

• Add a padding to the list container
• Add a header to the list container

Personally, I'd prefer to do it in the second way, because I found out in the process of designing the code: Adding a header to a recyclerview gives me a good chance to think about how to fix it, at the same time, In the process of thinking and solving problems, I can learn more knowledge, why not? But I will give you a brief introduction of how to use the first method of implementation!

Then let's start today's explanation!

First, we need to create a project and add the necessary tool libraries:

Then we need to define styles.xml to make sure our app doesn't add Actionbar (because we're going to use toolbar) and that our app is designed to conform to Google's Material design specifications.

Finally we will create the layout shown in our activity:

In fact, we just need a simple layout that includes: Recyclerview,toolbar and ImageButton. But it is important to note that we need to put them in a framelayout, otherwise when we hide the toolbar, a blank area will appear above the list, which is obviously not the effect we want. Our ideal effect should be: When toolbar is hidden, list can display an entire list in the visible area of the screen, which needs to be achieved by making the toolbar overlay on the Recycleview.

Then take a look at our mainactivity code:

As you can see, this is a very, very, very simple activity that only rewrites the OnCreate () method. and the OnCreate () method only does the following three things:

1. Initialize Toolbar

2. Get the Mfabbutton reference (Mfabbutton is the Fab object, which is the small button at the bottom right of the screen)

3. Initialize Recyclerview

In order to display the content in the list, we now need to create a adapter for Recyclerview. But before we do, we should add the corresponding sub-layout and corresponding Viewholder to the item in our list:

List of each item only need a text to display the text, very simple!

So how does that recycleradapter come true:

As you can see, this is a very ordinary recycleview.adapter, there is no special place, is not feeling cheated 23333~ (if you want to learn more about Recyclerview, I highly recommend that you go see Daniel Mark Allison's giant wrote these excellent articles series of posts)

Through the above efforts, we have the small parts of the car assembly of 7788, it is time to let the small car on the road run, show the real technology!

WTF, who can tell me what the hell this is ...?

I believe that as long as not blind will find that the app's toolbar unexpectedly put our item blocked!!! Perhaps some of the wit's little partners have discovered the problem: the problem arises because we use framelayout in Activity_main.xml, and it is framelayout that leads to the problem, and that is one of the problems I have mentioned at the beginning.

The first solution is to add a paddingtop to our Recyclerview and set the value of Paddingtop to the height of toolbar. But there is one detail we can't ignore, which is that Recyclerview will be clipped to the padding area of the child view by default, so for our great cause we have to turn this feature off.

After these changes, we can achieve the effect we want, which is the first way I say. But as I said, the purpose of my writing this blog is not just to teach you to achieve this effect, but to finish it. I want to teach you how to achieve the same effect in a variety of ways, and introduce you to the ideas that give you access to problems that are usually difficult to reach and teach you how to solve them. Some methods will be more complex (in this article is to add a header for list), but you can also learn more knowledge in the implementation process, after all, give people to fish rather than give people to fishing.

Add a header to Recycleview

The second way to achieve this effect, the first thing we have to do is to slightly modify our adapter:

Here's how it's implemented:

We need to define a constant to distinguish the type of item that recycler exhibits. What I need to introduce to you here is that Recyclerview is a very flexible component, and Recyclerview fully implements the desire that you want the list item to have a wide variety of layouts, and the constants that we define to differentiate the item type will be exploited. And that's what we want-to make the header the first item in Recyclerview, which is obviously not the same as the rest of the item. (3–4 line)

So we need to let recycler know what kind of sub-layout it needs to show, and the constants we use as type-sensitive in this article are Type_item and Type_header. (第49-54 line)

Next, we need to modify the Oncreateviewholder () and Onbindviewholder () methods, if the type of item is Type_item, so that they return and bind a normal item; If the type of item is Type_ Header, it returns to the header. (第14-34 line)

Furthermore, since our list is not just plain item, we have added a header to the list, so we need to modify the return value of the GetItemCount () method so that our return value is the total number of normal item + 1 (第43-45 line)

Finally, let's create a layout and a viewholder for the header layouts, but surprisingly, the layout and viewholder that we need to create for the header are very simple, The only thing to note is that the height of the header must match the height of the toolbar.

So we've got the layout ready ~ Don't believe you look at the picture!

So overall, we added a header with the same height as the toolbar for Recyclerview, and now our toolbar hides the header (because the header is now an empty view), and All of our ordinary item is visible. So now let's change the appearance and hiding of toolbar and fab when rolling.

Control the appearance and concealment of toolbar and fab when scrolling

In order to achieve this effect, we can create another--onscrolllistener class for Recyclerview. You believe it?

And now I'm going to tell you, in the Onscrolllistener class, we just need to reload the onscrolled () method to make this cool effect a black magic that kills users in the app! The parameter--dx,dy of the Onscrolled () method is the scrolling distance in both horizontal and vertical directions, respectively. However, it is important to note that this dx,dy does not represent the physical distance on the screen, but rather the relative distance of two events.

The specific implementation algorithm is as follows:

The total scrolling distance is calculated only when the list scrolls up and the toolbar and fab are hidden, or when the list is scrolled down and toolbar and Fab appear, because the scrolling distance in both cases is what we need to be concerned about to achieve this effect.

The total rolling distance needs to exceed the limit values we show/hide the toolbar and Fab's direction to show/hide (the larger you adjust the limit value, the greater the distance required to scroll through/hide toolbar and fab) (dy>0 means we're scrolling down, dy <0 means that we are sliding upwards)

We are not actually showing/hiding toolbar and fab in our scrolling listener class, we are showing/hiding toolbar and fab by calling the show ()/hide () method, so the caller can implement it through the interface.

Now we need to add its listener for Recyclerview:

Here's how we'll change our view by animating:

When we hide toolbar and fab, we have to take padding into account, otherwise the view cannot be completely hidden.

is a mule is a horse, let us pull out to sneak a slip!

It looks nice now, but there's a little bug--here. If you're at the top of the list, the threshold is very small, so you can hide the toolbar, but you'll see a blank area at the top of the list. But fortunately there is a very simple way to solve this bug: we can detect whether the first item of the current list is visible, only if it is not visible, use our design of the show/hide logic.

After such a modification, even if the first item is visible and there is an item blocked by it, we are also showing them, in addition to what we have said before to achieve our results.

Now, everyone, the time to witness the miracle is:

That's great, Scarlett! Feel like the failure before the rain after the rains and warm my fragile heart ~

In fact, ashamed to say a word ... This article is my first blog post in my life, if you feel bored or if I have a wrong explanation, please don't squirt me. I will become better in the future, and then do my best to contribute more articles for everyone!

If you see here or add a header to achieve this effect is very annoying, with the first method of combining Hidingscrolllistener is also possible to achieve this effect ~

If you have any questions, you can ask me in the comment area, I will do my best to answer for you!

Source

The source code for the entire project is on GitHub, and you can see repo here.

Thank Mirek Stanek help me proofread the article, What da! A good friend Michal z~ Love You

If you like this blog post, you can share it with your little friends on Twitter or follow me on Twitter!

ListView or Recyclerview Scroll when hidden toolbar (1)