Last time I learned how to automatically load and refresh lists through RecyclerView. This time I learned how to fix the head of the group at the top of the page when RecyclerView pulls up.

Ideas for Realization

If you look carefully, you will find that this effect is the effect of FrameLayout. A FrameLayout has a list in order, two views of the suspension bar, and the suspension bar covers the top of the list. When the time is right, it updates its position to make it look like a suspension effect. So we just need to decide when to update the position of the display bar. When the head of the second list item is away from a suspension bar at the top of the list, the suspension bar changes its position with the sliding of the list, thus it looks like a group title suspension effect. That is, when the suspension bar happens to be replaced, it updates its data and moves to the top of the list.

Implementation code

• Using RecyclerView to implement lists, the list layout of RecyclerView is determined by Layout Manager, and we usually use Linear Layout Manager.

• Layout: 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>
</android.support.v7.widget.recyclerview></framelayout>

• Through Linear Layout Manager, we can easily get the View of the corresponding location in Recycler View, and then get the View of the current suspension bar data source and the View of its next data source. The information displayed by the suspension bar is from the first visible view, and the view below is the second list item, and we can get its top value. All we need to do is add a ScrollListener to RecyclerView and do what we want in the corresponding callback.

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();
        }
    }
});