简体   繁体   中英

RecyclerView and ViewPager with collapsing toolbar

I am trying to create this kind of a layout where -

  1. A CollapsingToolbarLayout that has a ViewPager like google play app.
  2. Below that there is a Grid RecyclerView .
  3. And at the end, there is another ViewPager .

The RecylerView scrolls normally until the end when CollapsingToolbarLayout expands.

在此处输入图片说明

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:orientation="vertical"
                    app:layout_collapseMode="parallax">

                    <TextView
                        android:id="@+id/text_home_active"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/margin_normal"
                        android:background="@color/header_bg"
                        android:gravity="center_vertical"
                        android:textColor="@android:color/black"
                        android:textSize="@dimen/title_date_text_size" />

                    <android.support.v4.view.ViewPager
                        android:id="@+id/viewpager_home"
                        android:layout_width="fill_parent"
                        android:layout_height="170dp"
                        android:layout_gravity="center"
                        android:overScrollMode="ifContentScrolls" />
                </LinearLayout>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@color/color_primary"
                    android:minHeight="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:theme="@style/ToolBarStyle" />

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

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

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/scroll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:weightSum="3">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="2"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/text_home_popular"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/header_bg"
                        android:gravity="center_vertical"
                        android:padding="@dimen/margin_normal"
                        android:textColor="@android:color/black"
                        android:textSize="@dimen/title_date_text_size" />

                    <android.support.v7.widget.RecyclerView
                        android:id="@+id/grid_home_popular"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:clipToPadding="false"
                        android:scrollbars="none"
                        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_gravity="bottom"
                    android:layout_weight="1"
                    android:elevation="5dp"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/text_home_offers"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/margin_normal"
                        android:gravity="center_vertical"
                        android:text="@string/text_home_offers"
                        android:textColor="@android:color/black"
                        android:textSize="@dimen/title_date_text_size" />

                    <android.support.v4.view.ViewPager
                        android:id="@+id/viewpager_home_offers"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:overScrollMode="ifContentScrolls" />
                </LinearLayout>

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerViewNavigation"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="#ffffff"
        android:scrollbars="none" />

</android.support.v4.widget.DrawerLayout>

My problem is toolbar collapse only when I move outside the RecyclerView.

This solution solved my problems.

So Simply when the Appbar is fully expanded do not allow the recycler view to scroll instead we will use the scroll from the NestedScrollView, otherwise the Recycler View will scroll normaly.

  appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
        @Override
        public void onStateChanged(AppBarLayout appBarLayout, State state) {
            if (state == State.COLLAPSED)
                mRecyclerView.setNestedScrollingEnabled(true);
            if (state == State.EXPANDED)
                mRecyclerView.setNestedScrollingEnabled(false);
        }
    });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM