在 appbar 布局中滚动时，协调器布局的内容不会滚动答案

【问题标题】：Content of coordinator layout not gets scrolled when scrolling in appbar layout在 appbar 布局中滚动时，协调器布局的内容不会滚动
【发布时间】：2015-07-21 09:21:04
【问题描述】：

我正在尝试实现新的 android 设计支持库。我在 appbar 布局内有一个视图寻呼机，下面有一个选项卡布局。此外，我还需要在滚动时将工具栏和选项卡标题布局放在顶部。当我尝试通过滚动应用栏布局来滚动内容时，它没有滚动。但是当我滚动 tablayout 的内容时，整个内容都会滚动。这是我的xml：

 <android.support.design.widget.CoordinatorLayout
    android:id="@+id/outer_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffb4b4b4"
        android:fitsSystemWindows="true">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            app:layout_scrollFlags="scroll|enterAlways">

            <android.support.v4.view.ViewPager
                android:id="@+id/top_viewpager"
                android:layout_width="match_parent"
                android:layout_height="320dp"
                android:fitsSystemWindows="true" />

        </RelativeLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="enterAlwaysCollapsed"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabTextColor="@color/white" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

【问题讨论】：

标签： android android-coordinatorlayout android-appbarlayout androiddesignsupport

【解决方案1】：

我有一个类似的布局，效果很好。我将在这里发布，以便您受到启发。

activity_profile.xml：

<android.support.design.widget.CoordinatorLayout 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/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="me.danielpan.twitterlike.ProfileActivity">

    <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_tool_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/Widget.AppCompat.ActionBar.TabText"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="?attr/colorAccent">

            <include layout="@layout/profile_header_layout" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:backgroundTint="@color/app_color_primary"
                app:collapseIcon="@drawable/header_avatar"
                app:layout_collapseMode="pin"
                app:navigationIcon="@mipmap/ic_launcher"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:subtitle="Incredible Pics"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:title="Twitter Profile" />
            <!--app:layout_scrollFlags="scroll|exitUntilCollapsed"-->

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            style="@style/TabLayoutStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabContentStart="2dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/app_color_accent"
            app:tabIndicatorHeight="2dp"
            app:tabMinWidth="24dp"
            app:tabMode="fixed"
            app:tabPadding="1dp"
            app:tabSelectedTextColor="@color/text_color_secondary"
            app:tabTextColor="@color/text_color" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:paddingEnd="0dp"
        app:paddingStart="0dp" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@color/text_color"
        app:borderWidth="3dp"
        app:elevation="2dp"
        app:fabSize="mini"
        app:layout_anchor="@id/coordinator_layout"
        app:layout_anchorGravity="bottom|right|end"
        app:pressedTranslationZ="3dp"
        app:rippleColor="@color/text_color_secondary" />
</android.support.design.widget.CoordinatorLayout>

profile_header_layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
    app:layout_collapseMode="parallax"
    app:layout_scrollFlags="scroll|enterAlways">

    <ImageView
        android:id="@+id/header_cover"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:scaleType="centerCrop"
        android:src="@drawable/header_cover" />

    <LinearLayout
        android:id="@+id/header_detail_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/header_cover"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="5dp"
        android:gravity="left"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp">

            <Button
                android:id="@+id/header_btn_follow"
                android:layout_width="65dp"
                android:layout_height="30dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="5dp"
                android:background="@drawable/btn_blue_bg_selector"
                android:gravity="center"
                android:text="Follow"
                android:textAllCaps="false"
                android:textColor="#646464"
                android:textSize="18sp" />

            <Button
                android:id="@+id/header_btn_favorite"
                android:layout_width="65dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:layout_marginRight="5dp"
                android:layout_toLeftOf="@id/header_btn_follow"
                android:background="@drawable/btn_white_bg_selector"
                android:gravity="center"
                android:text="Favorite"
                android:textAllCaps="false"
                android:textColor="#646464"
                android:textSize="18sp" />
        </RelativeLayout>

        <TextView
            android:id="@+id/header_nickname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:gravity="center"
            android:text="Incredible Pics"
            android:textAllCaps="false"
            android:textColor="#000000"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/header_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:gravity="center"
            android:text="@string/header_id_text"
            android:textAllCaps="false"
            android:textColor="#767676"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/header_brief"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="4dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="4dp"
            android:gravity="left"
            android:text="Good still exists in the world. Inspiring you in 140 characters or less."
            android:textAllCaps="false"
            android:textColor="#565656"
            android:textSize="18sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="25dp"
            android:layout_marginLeft="5dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left|center_vertical"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/header_following"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left|top"
                    android:text="12K"
                    android:textAllCaps="false"
                    android:textColor="#000000"
                    android:textSize="17sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:gravity="left|top"
                    android:text="FOLLOWING"
                    android:textAllCaps="false"
                    android:textColor="#898989"
                    android:textSize="17sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left|center_vertical"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/header_follower"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left|top"
                    android:text="23.5K"
                    android:textAllCaps="false"
                    android:textColor="#000000"
                    android:textSize="17sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:gravity="left|top"
                    android:text="FOLLOWER"
                    android:textAllCaps="false"
                    android:textColor="#898989"
                    android:textSize="17sp" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/header_avatar"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:background="@drawable/iv_bg_round_corner"
        android:scaleType="centerCrop"
        android:src="@drawable/header_avatar" />
</RelativeLayout>

【讨论】：

感谢您的回复..但是当我替换您提到的 xml 时，我的选项卡布局不可见..现在我只能看到顶部的查看器和下方的空白区域。您能对此发表评论吗？
你应该改变app:layout_scrollFlags和app:layout_collapseMode。
我有类似的布局，效果很好。我将重新编辑我的答案，以便您受到启发。
感谢您的更新。但仍有一些问题。现在工具栏不可见。我认为 viewpager 是在工具栏上绘制的。另一个问题是我之前提到的，我无法通过在 appbar 布局中滚动来滚动协调器布局的内容。这可能吗？
@SilentKnight 在第一个 xml ViewPager 溢出屏幕高度

【解决方案2】：

要回答你的问题，首先你需要知道嵌套卷轴是如何工作的。

AppBarLayout实现的嵌套滚动行为主要基于NestScrolling系统。只有当触摸事件从 ViewPager 中的 RecyclerView 的 NestScrollingChild 开始时，系统才会启动嵌套滚动事件调度。

因此，如果你想从AppbarLayout开始嵌套滚动，没有简单的方法只是修改xml来实现。

【讨论】：

感谢您的回复。你能指导我修改xml来实现这个吗？
我的意思是只修改xml并不能达到你想要的效果。