如何将RecyclerView置于工具栏下方，TabLayout和ViewPager上方，并以自定义方式处理对滚动的响应? [英] How to put RecyclerView below Toolbar and above TabLayout and ViewPager also handling responses to scrolls in a custom manner?
问题描述
我想创建一个如下图所示的布局:
I want to create a layout like the below image:
包含以下内容的CoordinatorLayout:
A CoordinatorLayout which contain :
- CollapsingToolbarLayout(包含ImageView和工具栏)
- RecyclerView
- TabLayout
- ViewPager(它的每个片段都包含一个RecyclerView)
我想以这种方式响应滚动事件:
I wanna responding to scroll events in this way:
- CollapsingToolbarLayout通过滚动展开和折叠
- 工具栏会一直停留在顶部，直到TabLayout到达顶部为止
- 该工具栏向上滚动，TabLayout停留在顶部
我在CollapsingToolbarLayout和TabLayout之间使用RecyclerView遇到麻烦.我可以在没有RecyclerView的情况下实现此布局(我将CollapsingToolbarLayout和TabLayout放在AppBarLayout内，并将ViewPager放在它的CoordinatorLayout内).
I'm having trouble with the RecyclerView between CollapsingToolbarLayout and TabLayout. I can implement this layout without that RecyclerView( I put CollapsingToolbarLayout and TabLayout inside the AppBarLayout and the ViewPager outside it, inside the CoordinatorLayout).
我的问题:
- 我应该将RecyclerView放在哪里?
- 哪个&我应该为每种布局设置
layout_scrollFlags和layout_behavior的位置?
- Where should I put that RecyclerView?
- Which & where
layout_scrollFlagsandlayout_behaviorshould I set for each layouts?
似乎AppBarLayout的高度有限.当我将RecyclerView放在AppBarLayout内时，只有RecyclerView的一部分可见，TabLayout也消失了.
It seems that AppBarLayout have a limited height. When I put the RecyclerView inside AppBarLayout, only a portion part of the RecyclerView is visible and also TabLayout disappear.
我阅读了很多教程，例如此一个和很多问题，例如这个和这一个，但没有一个能帮助我.
I read lots of tutorials like this one and lots of questions like this one and this one, but non of them help me.
推荐答案
将此作为主要布局
activity_main
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>
，对于选项卡的网格布局，请使用适配器类.
and for grid layout of tabs use adapter classes.
这篇关于如何将RecyclerView置于工具栏下方，TabLayout和ViewPager上方，并以自定义方式处理对滚动的响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
