Android easily implements RecyclerView suspension bar

When we are browsing Instagram news, have you noticed this little dynamic effect? ​​When a news (presented in the form of a card) slides upward, the header of the news card will always float at the top of the list until the header of the next news card pushes it away and replaces it. It may not be clear in words, so let's just take a look at its effect.

Combining my above description with this Gif picture, I think you should know what kind of effect this is. So without further ado, let me talk about a very simple implementation method.

Ideas

Although it is very simple to implement, it still took me more than an hour to think about it. Let me talk about the thinking process first. At noon that day, Instagram pushed a message to me (ha, it was my favorite idol Kim Taeyeon who updated Instagram), so I clicked in to see it. After I liked it, I started to study this effect. I slid up and down the list repeatedly. Because the list of Instagram has a scroll bar, I found that every time the scroll bar is near the floating bar, it will be very short. Seeing this phenomenon, did you notice something? Yes, I feel that this is like the effect of FrameLayout. A FrameLayout has a list in order, and two views of the floating bar. The floating bar covers the top of the list. It updates its position at the right time and updates its information at the right time, and then it looks like a floating effect.

Next, the focus of our thinking shifted to how to determine and find the right time.

Looking more closely at the Gif above, we can see that when the head of the second list item is one floating bar away from the top of the list, the floating bar changes its position as the list slides, making it look like it is being pushed down.

Then, the timing of data update is also easy to determine, that is, when the floating bar is completely pushed down, update your own data and move to the top of the list.

How to find this opportunity will be explained in the following implementation section.

accomplish

Building the Layout

As mentioned above, it is a simple FrameLayout.

 <FrameLayout
    android:layout_width= "match_parent"  
    android:layout_height= "match_parent"  
    app:layout_behavior= "@string/appbar_scrolling_view_behavior" > 
 
    <android.support.v7.widget.RecyclerView
        android:id= "@+id/feed_list"  
        android:layout_width= "match_parent"  
        android:layout_height= "match_parent"  
        android:background= "@android:color/white"  
        android:scrollbars= "vertical" /> 
 
 <your-head-layout>
 …
 </your-head-layout>
 </FrameLayout>

Note that the second child of FrameLayout should be the layout for your list item to be displayed floating.

Find the right time

According to our idea, we must first find the time when the head of the second list item is the distance from the top of the list to a floating bar. If we can find this time, then the second time is also found.

Here we use RecyclerView to implement the list. We all know that the list layout of RecyclerView is determined by LayoutManager. Since the lists that need to realize the floating bar display effect are generally linear lists, we generally use LinearLayoutManager. Through LinearLayoutManager, we can easily get the View at the corresponding position in RecyclerView. Here we need to get the View of the current floating bar data source and the View of its next data source. What are these two Views used for? The information displayed in the floating bar comes from the first visible View, and the View below it is the second list item. We can get its top value. Well, the next step is really simple. We just need to add a ScrollListener to RecyclerView and do what we thought before in the corresponding callback. Let's take a look at the code

 mFeedList.addOnScrollListener(new RecyclerView.OnScrollListener() {
 @Override
 public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        mSuspensionHeight = mSuspensionBar.getHeight();
 } 
 
 @Override
 public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
 View   view = linearLayoutManager.findViewByPosition(mCurrentPosition + 1);
 if ( view != null ) {
            if ( view .getTop() <= mSuspensionHeight) {
                mSuspensionBar.setY(-(mSuspensionHeight - view .getTop()));
 } else {
                mSuspensionBar.setY(0);
 }
 } 
 
        if (mCurrentPosition != linearLayoutManager.findFirstVisibleItemPosition()) {
            mCurrentPosition = linearLayoutManager.findFirstVisibleItemPosition();
            mSuspensionBar.setY(0); 
 
            updateSuspensionBar();
 }
 }
 });

Tips: mCurrentPosition is the position of the list item in RecyclerView where the floating bar information comes from. You can add multiple ScrollListeners here, and all ScrollListeners will be checked and triggered in RecyclerView.

One more thing...

Next, we need... Are you kidding me? Where is One more thing? We have already completed it? What? So fast? Such a small amount of code? Yes, that's right, it only takes such a small amount of code. Let's take a look at the effect we have achieved (of course, the final effect still depends on the layout of your list items. For example, this effect looks very good in Instagram~)

Replenish

In the above case, our RecyclerView has a single item, but our list items usually have many types, and we only need to update our floating bar information when we slide to the item of the type we want. For example, in the common address book, when we slide from a contact beginning with A to a contact beginning with B, the floating bar information changes from A to B; for another example, in the note list of Evernote, the floating bar at the top changes according to the date of the note.

So, in this case, how should we simply modify the code to meet our needs?

In fact, it is very simple. The idea has been determined above. We just need to change the timing of the floating bar moving and make it narrower. At the same time, the data content we want to update has also changed (this of course requires us to change the corresponding layout).

 mFeedList.addOnScrollListener(new RecyclerView.OnScrollListener() {
 @Override
 public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        mSuspensionHeight = mSuspensionBar.getHeight();
 } 
 
 @Override
 public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
 //We simply narrowed the conditions for the floating bar to move. Here, the movement will only occur when the ItemType corresponds.
          if (adapter.getItemViewType(mCurrentPosition + 1) == MultiFeedAdapter.TYPE_TIME) {
 View   view = linearLayoutManager.findViewByPosition(mCurrentPosition + 1);
            if ( view != null ) {
                if ( view .getTop() <= mSuspensionHeight) {
                    mSuspensionBar.setY(-(mSuspensionHeight - view .getTop()));
 } else {
                    mSuspensionBar.setY(0);
 }
 }
 } 
 
        if (mCurrentPosition != linearLayoutManager.findFirstVisibleItemPosition()) {
            mCurrentPosition = linearLayoutManager.findFirstVisibleItemPosition();
            mSuspensionBar.setY(0); 
 
            updateSuspensionBar();
 }
 }
 });

In the above code, we only need to pay attention to the comments, and the rest is the same as given before.

In short, although everyone's needs may be different, they all have the same basic principles. As long as you have a good idea, you won't be afraid of any needs.

The corresponding code has been added to Github. Let's take a look at our effect. The floating bar is moved only when the time changes.

Conclusion

Haha, isn't it very simple? *** Let me talk about encapsulation. I originally wanted to encapsulate it, but since everyone's list layout is different and the data update method is different, I didn't encapsulate it. Yes, I'm not good enough, although I don't want to admit it~ But the code is really very small. I hope this article can help you, and I will continue to work hard.