如何在viewpager中隐藏recyclerview滚动的顶部布局

Question

i am used bottom layout

i want hide tablayout, two layout of relative when recyclerview in viewpager

and if possiblely also want, normal layout visible after hide end

please some help

this my layout layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">

<com.ogaclejapan.smarttablayout.SmartTabLayout
    android:id="@+id/st_route_result"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@color/main_top_background"
    android:paddingLeft="8dp"
    app:stl_clickable="true"
    app:stl_defaultTabBackground="@color/main_top_background"
    app:stl_defaultTabTextAllCaps="true"
    app:stl_defaultTabTextColor="@color/main_top_background"
    app:stl_defaultTabTextHorizontalPadding="10dp"
    app:stl_defaultTabTextMinWidth="65dp"
    app:stl_defaultTabTextSize="@dimen/main_tab_title_size"
    app:stl_distributeEvenly="false"
    app:stl_dividerThickness="0dp"
    app:stl_drawDecorationAfterTab="true"
    app:stl_indicatorAlwaysInCenter="false"
    app:stl_indicatorColor="#f2f2f2"
    app:stl_indicatorCornerRadius="0dp"
    app:stl_indicatorGravity="bottom"
    app:stl_indicatorInFront="true"
    app:stl_indicatorInterpolation="linear"
    app:stl_indicatorThickness="1dp"
    app:stl_indicatorWidth="55dp"
    app:stl_indicatorWithoutPadding="false"
    app:stl_overlineThickness="0dp"
    app:stl_underlineThickness="0dp"


    />


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_below="@+id/st_route_result"
    android:layout_marginTop="-1dp"
    android:background="#11f2f2f2">

</LinearLayout>

<RelativeLayout
    android:id="@+id/rl_route_result_refresh"
    android:layout_width="50dp"
    android:layout_height="40dp"
    android:layout_toLeftOf="@+id/rl_route_result_exit">

    <ImageView
        android:id="@+id/iv_route_result_refresh"
        android:layout_width="29dp"
        android:layout_height="23dp"
        android:layout_centerInParent="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="13dp"
        android:src="@mipmap/main_search_station_refresh_un_real" />

    <ImageView
        android:id="@+id/iv_route_result_live"
        android:layout_width="20dp"
        android:layout_height="10dp"
        android:layout_marginLeft="23dp"
        android:layout_marginTop="15dp"
        android:src="@mipmap/livebtn"
        android:visibility="invisible" />
</RelativeLayout>


<RelativeLayout
    android:id="@+id/rl_route_result_exit"
    android:layout_width="50dp"
    android:layout_height="40dp"
    android:layout_alignParentRight="true">

    <ImageView
        android:layout_width="17dp"
        android:layout_height="17dp"
        android:layout_centerInParent="true"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/exit_white" />
</RelativeLayout>


<RelativeLayout
    android:id="@+id/rl_route_result_middle"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_below="@id/st_route_result"
    android:background="@color/main_top_background">


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_route_result_total_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/nomal_color_ffffff"
            android:textSize="14dp" />


        <TextView
            android:id="@+id/tv_route_result_total_station"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:textColor="@color/nomal_color_ffffff"
            android:textSize="14dp" />


        <TextView
            android:id="@+id/tv_route_result_total_trans"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:textColor="@color/nomal_color_ffffff"
            android:textSize="14dp" />


    </LinearLayout>


    <RelativeLayout
        android:id="@+id/rl_route_result_alarm"
        android:layout_width="50dp"
        android:layout_height="40dp"
        android:layout_toLeftOf="@+id/rl_route_result_share">

        <ImageView
            android:id="@+id/iv_route_result_alarm"
            android:layout_width="21dp"
            android:layout_height="21dp"
            android:layout_centerInParent="true"
            android:src="@mipmap/alarm_on" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_route_result_share"
        android:layout_width="50dp"
        android:layout_height="40dp"
        android:layout_toLeftOf="@+id/rl_route_result_favorit">


        <ImageView
            android:layout_width="17dp"
            android:layout_height="21dp"
            android:layout_centerInParent="true"
            android:layout_marginRight="22dp"
            android:src="@mipmap/route_share" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_route_result_favorit"
        android:layout_width="50dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true">

        <ImageView
            android:id="@+id/iv_route_result_favorit"
            android:layout_width="22dp"
            android:layout_height="22dp"
            android:layout_centerInParent="true"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="8dp"
            android:src="@mipmap/mymetro_unfavorit" />


    </RelativeLayout>


</RelativeLayout>

<RelativeLayout
    android:id="@+id/rl_route_result_bottom"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_below="@id/rl_route_result_middle"
    android:background="@color/main_top_background">

    <TextView
        android:id="@+id/tv_route_result_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:textColor="#ffffff"
        android:textSize="16dp" />


</RelativeLayout>

<RelativeLayout
    android:id="@+id/rl_route_result_enter_train_top"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#000000"
    android:visibility="gone">

    <ImageView
        android:id="@+id/iv_enter_train_mark"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="16dp"

        android:src="@mipmap/mark_for" />


    <TextView
        android:id="@+id/tv_enter_train_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="7dp"
        android:layout_toRightOf="@+id/iv_enter_train_mark"
        android:text="탑승중"
        android:textColor="#ffffff"
        android:textSize="14dp" />

    <TextView
        android:id="@+id/tv_enter_train_destination"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="3dp"
        android:layout_toRightOf="@+id/tv_enter_train_title"
        android:ellipsize="marquee"
        android:singleLine="true"
        android:text="창동행 4335"
        android:textColor="#ffffff"
        android:textSize="14dp" />


    <RelativeLayout
        android:id="@+id/rl_enter_train_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true">

        <ImageView
            android:id="@+id/tv_enter_train_dwon"
            android:layout_width="21dp"
            android:layout_height="11dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="10dp"
            android:src="@mipmap/list_down_white" />

    </RelativeLayout>


</RelativeLayout>

<adcapsule.smapp.View.Custom.CustomViewPager
    android:id="@+id/vp_route_result"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/rl_route_result_bottom"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Answer 1

Normal

After Scroll

If you are using recycler view inside viewpager follow steps below

1. take CoordinatorLayout as root layout
2. put all layouts in AppBarLayout you wanna hide on the scroll of recyclerview
   (also put TabLayout)
3. add viewpager after AppBarLayout 

Add this line in view you want to hide(inside AppBarLayout )

  app:layout_scrollFlags="scroll|enterAlways"

Add this line into viewpager

  app:layout_behavior="@string/appbar_scrolling_view_behavior" 

for example:

    <?xml version="1.0" encoding="utf-8"?>
    <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/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="@android:color/white"
                app:tabIndicatorHeight="6dp"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="@android:color/white" />
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>

Answer 2

Create a new abstract class which extends RecyclerView.OnScrollListener.

Then you can move item by set X,Y

public abstract class HidingScrollListener extends RecyclerView.OnScrollListener {

private int mToolbarOffset = 0;
private int mToolbarHeight;

public HidingScrollListener(Context context) {
    mToolbarHeight = Utils.getToolbarHeight(context);
}

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);

    clipToolbarOffset();
    onMoved(mToolbarOffset);
    //The most important
    if((mToolbarOffset <mToolbarHeight && dy>0) || (mToolbarOffset >0 && dy<0)) {
        mToolbarOffset += dy;
    }
}

private void clipToolbarOffset() {
    if(mToolbarOffset > mToolbarHeight) {
        mToolbarOffset = mToolbarHeight;
    } else if(mToolbarOffset < 0) {
        mToolbarOffset = 0;
    }
}

public abstract void onMoved(int distance);}

how to use

private void initRecyclerView() {
final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
RecyclerAdapter recyclerAdapter = new RecyclerAdapter(createItemList());
recyclerView.setAdapter(recyclerAdapter);

recyclerView.setOnScrollListener(new HidingScrollListener(this) {
    @Override
    public void onMoved(int distance) {
        mToolbarContainer.setTranslationY(-distance);
    }
});}

There is a Chinese site.And it is much more complete

click me;)