如何把工具栏和以上的TabLayout和ViewPager下面的RecyclerView也以自定义的方式处理对滚动的响应?

我想创build一个如下图所示的布局:

在这里输入图像说明

一个CoordinatorLayout包含:

  1. CollapsingToolbarLayout(包含ImageView和工具栏)
  2. RecyclerView
  3. TabLayout
  4. ViewPager(它的每个片段都包含一个RecyclerView)

我想以这种方式回应滚动事件:

  1. CollapsingToolbarLayout通过滚动展开和折叠
  2. 工具栏粘贴到顶部,直到TabLayout到达顶部
  3. 之后,向上滚动工具栏并将TabLayout粘贴到顶部

我在CollapsingToolbarLayout和TabLayout之间的RecyclerView遇到问题。 我可以实现这个布局没有RecyclerView(我把CollapsingToolbarLayout和TabLayout里面的AppBarLayout和ViewPager外面,在CoordinatorLayout里面)。

我的问题:

  1. 我应该把那个RecyclerView放在哪里?
  2. 我应该为每个布局设置layout_scrollFlagslayout_behavior哪一个?

看来AppBarLayout的高度有限。 当我把RecyclerView放在AppBarLayout中时,只有RecyclerView的一部分是可见的,TabLayout也不见了。

我读了很多这样的教程,还有很多像这个和这个一样的问题,但没有一个能帮助我。

Related of "如何把工具栏和以上的TabLayout和ViewPager下面的RecyclerView也以自定义的方式处理对滚动的响应?"

用这个作为主要布局

activity_main

 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/swipe_refresh_layout_profile" android:layout_width="match_parent" android:layout_height="wrap_content"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:ignore="RtlHardcoded"> <android.support.design.widget.CoordinatorLayout android:id="@+id/co_profile_activity_root_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:visibility="visible"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar_profile" android:layout_width="match_parent" android:layout_height="@dimen/profile_img_placeholder_height" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapse_toolbar_profile" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <RelativeLayout android:id="@+id/rel_top" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop"> <ImageView android:id="@+id/img_bg_placeholder_profile" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:tint="#11000000" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.9" /> <LinearLayout android:id="@+id/lin_top_inner" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#BF473e6b" android:orientation="vertical" android:scaleType="centerCrop"> </LinearLayout> </RelativeLayout> <FrameLayout android:id="@+id/frame_detail_profile" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center|center_horizontal" android:orientation="vertical" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.3"> <android.support.v7.widget.RecyclerView android:layout_width="wrap_content" android:layout_height="wrap_content"> </android.support.v7.widget.RecyclerView> </FrameLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_profile" android:layout_width="match_parent" android:layout_height="@dimen/profile_toolbar_height" android:gravity="top|center" app:layout_anchor="@id/frame_detail_profile" app:layout_collapseMode="pin" app:theme="@style/ThemeOverlay.AppCompat.Dark" app:title=""> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/tv_toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/profile_toolbar_title_left_margin" android:gravity="center_vertical|center" android:ellipsize="end" android:singleLine="true" android:layout_gravity="center" android:textColor="@android:color/white" android:textSize="20sp" /> </LinearLayout> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tab_layout_profile" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" android:layout_marginTop="@dimen/profile_tab_layout_top_margin" android:background="@color/white" app:tabIndicatorColor="@color/colorPrimary" app:tabSelectedTextColor="@color/colorPrimary" app:tabTextColor="@color/charcoal_grey" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/view_pager_profile" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> </RelativeLayout> </android.support.v4.widget.SwipeRefreshLayout> 

对于选项卡的网格布局使用适配器类。

AppBarLayout开始,在其中添加CollapsingToolbarLayoutscrollFlags =“scroll | exitUntilCollapsed”

垂直方向的 LinearLayout添加到CollapsingToolbarLayout并添加

  • FrameLayoutImageView + Toolbar

  • RecyclerView

  • TabLayout

有两件事要做:

  1. 点击searchbutton时,将回收站视图的可见性设置为可见
  2. 当按下后退button时,将回收站视图的可见性设置为GONE

以下是实现:

1.将回收站视图的可见性设置为可见:

  public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == R.id.searchView) { rView.setVisibility(VISIBLE); } return true; } 

2.将回收适配器的可见性设置为GONE

  MenuItem searchMenuItem = menu.findItem(R.id.searchView); MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() { @Override public boolean onMenuItemActionExpand(MenuItem item) { return true; } @Override public boolean onMenuItemActionCollapse(MenuItem item) { recyclerView.setVisibility(GONE); return true; } }); 

注意:当活动开始时,不要忘记保持可视状态为“开始”