防止 ScrollView 中的孩子被滚出屏幕

Question

Somehow I came across Reddit app, and wondered how their Scrolling mechanism works. As you can see from the gif, there is a Menubar (Up/Downvote-comment-share bar) that always locates within the screen and can't be scrolled out of the screen when scrolled up/down. When scrolling up, it will be located underneath the Toolbar (the grey bar at the top) . When scrolling down, it will be located above the EditTextView (the Add-a-comment bar at the bottom) .

Relative layout

|-->Toolbar    (android:id="@+id/toolbar")

|-->ScrollView (android:layout_below="@id/toolbar")

    |-->Child (This child is located underneath the Toolbar when scrolling up)

    |-->Child

    |-->Child

If I wanted to write this page, what dependencies, widgets or concepts would I need to use or look into?

Note: You can give me snippets of codes if you prefer :)

Answer 1

you can use the CoordinatorLayout layout to realize that function. the layout like that. for details, you can see this blog in the medium.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/behavior_demo_coordinatorLayout"
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_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/behavior_demo_swipe_refresh"
    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/behavior_demo_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>

Answer 2

The toolbar (containing the menu) is outside of the ScrollView in the XML.

Or it may not even be a ScrollView at all.

It may just be view recycling- but even so the toolbar is outside of that XML layout used for displaying the content.

Answer 3

For hiding the TopBar and bottomBar (comment box) I recommend you use Animation

Simply call animation like

//on scrollUp
topLayout.animate().translationY(-300).alpha(0.0f).setDuration(300);
// this will make the layout go up and fade to invisible

//on scrollDown
topLayout.animate().translationY(0).alpha(1.0f).setDuration(300);
// this will make the layout come down and fade to be visible

Implement this will both Views using addOnScrollListener() or I suggest you to have a look at this answer for implementing scroll Up/Down using CoordinateLayout

Hope this will help!