Android 将应用程序栏滚动视图行为添加到CoordinatorLayout中的多个视图

Android 将应用程序栏滚动视图行为添加到CoordinatorLayout中的多个视图,android,androiddesignsupport,android-coordinatorlayout,android-collapsingtoolbarlayout,android-appbarlayout,Android,Androiddesignsupport,Android Coordinatorlayout,Android Collapsingtoolbarlayout,Android Appbarlayout,我希望将滚动支持与AppBarLayout和CollingToolBarLayout结合使用,不仅仅是对CoordinatorLayout的单个可滚动子视图的支持。滚动RecyclerView或AppBarLayout(下面的压缩代码)时,应用程序栏及其内容将成功滚动和折叠。但是,当尝试在回收视图上方的线性布局上启动滚动事件时,由于线性布局不知道滚动或折叠视图,因此不会发生任何事情 目标是使线性布局充当回收视图的粘性页眉和AppBarLayout的页脚,并接收与回收视图相同的滚动行为,类似于。事

我希望将滚动支持与
AppBarLayout
CollingToolBarLayout
结合使用,不仅仅是对
CoordinatorLayout
的单个可滚动子视图的支持。滚动
RecyclerView
AppBarLayout
(下面的压缩代码)时,应用程序栏及其内容将成功滚动和折叠。但是,当尝试在
回收视图
上方的
线性布局
上启动滚动事件时,由于
线性布局
不知道滚动或折叠视图,因此不会发生任何事情

目标是使
线性布局
充当
回收视图
的粘性页眉和
AppBarLayout
的页脚,并接收与
回收视图
相同的滚动行为,类似于。事实上,如果
appbar\u scrolling\u view\u行为
layout\u行为
可以应用于
LinearLayout
,与
RecyclerView
类似,那就太好了,但我认为在不可滚动的视图上,该行为会被忽略。是否有人知道此解决方案不需要在
RecyclerView
中将
LinearLayout
视图实现为一行

<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:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/gradient_banner"
            app:contentScrim="@color/background_content_frame"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/image_header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/some_image"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/collapsible_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="pin"/>

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/slide_handle_height"
        android:orientation="horizontal"
        android:background="@color/slide_handle"
        android:gravity="center_vertical">

        <!-- three buttons -->

    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/slide_handle_height"
        android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

您不需要解决方法或奇怪的东西。库支持此行为。只需用此替换您的
线性布局
,并将其放在
回收视图
下方即可:

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:text="Button text"/>

    </LinearLayout>

</android.support.v4.widget.NestedScrollView>
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@+id/app_bar_layout"
    app:layout_anchorGravity="center|bottom"
    android:text="Shuffle Play"/>
这就是它的样子:

<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:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_banner"
        app:contentScrim="@color/background_content_frame"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/image_header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/some_image"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/collapsible_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="pin"/>

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

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="@dimen/slide_handle_height"
    android:scrollbars="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:paddingTop="30dp"
    android:clipToPadding="false"/>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:text="Button text"/>

    </LinearLayout>

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

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

<代码>

这是一个粘性标题,位于“代码>工具栏< /代码>和<代码> DealReVIEW < /代码>:

之间。
<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:text="Button text"/>

    </LinearLayout>

</android.support.v4.widget.NestedScrollView>
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@+id/app_bar_layout"
    app:layout_anchorGravity="center|bottom"
    android:text="Shuffle Play"/>
视频演示:

此外,您可以设置
工具栏的高度,但需要使用类似此项目的自定义行为创建自定义标题。我用一个没有行为的自定义标题制作了它:

<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:collapsedTitleTextAppearance="@style/TransparentText"
        app:expandedTitleTextAppearance="@style/TransparentText"
        app:contentScrim="?attr/colorPrimary">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="80dp"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:gravity="top"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Title"
                android:textSize="20sp"
                android:textColor="@android:color/white"/>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>

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


<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="@dimen/slide_handle_height"
    android:scrollbars="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="center|bottom"
    android:text="Shuffle Play"/>
</android.support.design.widget.CoordinatorLayout>

经过一些尝试和错误,这是最终对我有用的布局的浓缩版本:

<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.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/collapsible_app_bar_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="@color/background_content_frame"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/image_header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="@dimen/button_bar_height"
            android:scaleType="centerCrop"
            android:background="@android:color/transparent"
            android:src="@drawable/default_header"
            android:contentDescription="@string/description_content_image"
            app:layout_collapseMode="parallax"/>

        <ImageView
            android:id="@+id/image_header_gradient"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="@dimen/button_bar_height"
            android:src="@drawable/scrim_top_bottom_banner"
            app:layout_collapseMode="parallax"
            tools:ignore="ContentDescription"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/collapsible_toolbar"
            android:layout_width="match_parent"
            android:layout_height="104dp"
            android:minHeight="?attr/actionBarSize"
            android:gravity="top"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentInsetStart="0dp"
            app:titleMargins="0dp"
            app:layout_collapseMode="pin"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/landing_header_button_margin_horizontal"
            android:layout_marginEnd="@dimen/landing_header_button_margin_horizontal"
            android:layout_marginBottom="@dimen/button_bar_height"
            android:layout_gravity="bottom"
            android:gravity="center_vertical"
            app:layout_collapseMode="parallax">

            <Button
                android:id="@+id/button_one"
                android:layout_alignParentStart="true"
                android:drawableStart="@drawable/selector_one"
                android:textColor="@color/alabaster_white"
                android:visibility="gone"
                style="@style/Button.TextCount"/>

            <Button
                android:id="@+id/button_two"
                android:layout_alignParentEnd="true"
                android:layout_gravity="end"
                android:drawableStart="@drawable/selector_two"
                android:textColor="@color/alabaster_white"
                android:visibility="gone"
                style="@style/Button.TextCount"/>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/button_bar_height"
            android:layout_gravity="bottom"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:background="@color/slide_handle">

            <!-- three buttons -->

        </LinearLayout>

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

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


Ryan的方法很好,但可能有点复杂。通过对其子级使用
CoordinatorLayout
的属性,可以更轻松地实现相同的效果。使用

layout_anchor="@id/app_bar_layout"

在视图中(包含按钮),并将其放置在
工具栏下。同时增加此视图的仰角,因为向下滚动
工具栏时
将与视图重叠。

您可以尝试此操作

    <android.support.design.widget.CoordinatorLayout>
         <android.support.design.widget.AppBarLayout>
             <!-- another xml code -->
         </<android.support.design.widget.AppBarLayout>

         <android.support.v4.widget.NestedScrollView
              android:layout_width="match_parent"
              android:layout_height="match_parent"              
              app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

<!-- your recyler view or button or textview xml code -->        
   </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>
您可以使用:

app:layout_behavior="@strings/appbar_scrolling_view_behavior">

也许这是不可能的,因为Spotify没有使用设计支持库,但我没有know@MarioVelasco正确,Spotify没有使用CollasingToolbarLayout实现,但我引用了它作为我希望通过某种变通方法实现的行为的示例。好消息!我有一个真正的解决办法给你。这将解决你试图做的事情,看一看,如果你喜欢,标记为已解决。这似乎应该奏效。然而,我不久前(刚才)也尝试过类似的方法,
NestedScrollView
对滚动没有反应-即使是
appbar\u scrolling\u view\u行为
布局行为
。我相信,
CoordinatorLayout
只会通过
appbar\u scrolling\u view\u行为
查找要映射到
AppBarLayout
的单个视图。因此,一旦它在
RecyclerView
上找到它,搜索就结束了。我目前正在设法将
TouchEvent
添加到
LinearLayout
并重定向
MotionEvent
以触发
RecyclerView
+
AppBarLayout
滚动。到目前为止运气不好。我已经用另一个
NestedScrollView
而不是你的
RecyclerView
进行了测试,它成功了,我将用
RecyclerView
再次检查,并给你看一个视频。试着复制和粘贴我给你的xml,并告诉我结果。顺便问一下,你看到我写给你的另一种方法了吗?标准方法应该是使用CoordinatorLayout的锚定支持。在我看来,OP的意图与FAB锚定到CoordinatorLayout的方式完全相同。@m.vincent@ryan尝试此方法以避免重叠如果在AppBarLayout中使用图像,则无重叠的解决方案非常好。我尝试了XML布局代码,但在我的情况下,Shuffle Play按钮被工具栏重叠。那么我应该怎么做才能避免这种情况呢?@muhammaqsood如果你只是复制粘贴代码,你会看到类似于演示的东西。也许您正在更改元素的顺序或添加一个新的工具栏。@Mario Velasco,我只是在复制您的代码,但有一件事我不知道是“@dimen/slide\u handle\u height”,这可能是导致问题的原因。嘿@Ryan,您能附上您的解决方案的屏幕截图或视频演示吗?这应该不是公认的答案。没有显示布局的屏幕截图或视频。此外,还有一些风格和尺寸在回答中没有提及。@GeorgeBikas Ryan是这个问题的提问者,我认为让他确定自己的回答是正确的是公平的。这个“布局锚”回答帮助了我的船-D
    <android.support.design.widget.CoordinatorLayout>
         <android.support.design.widget.AppBarLayout>
             <!-- another xml code -->
         </<android.support.design.widget.AppBarLayout>

         <android.support.v4.widget.NestedScrollView
              android:layout_width="match_parent"
              android:layout_height="match_parent"              
              app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

<!-- your recyler view or button or textview xml code -->        
   </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>
<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>
app:layout_behavior="@strings/appbar_scrolling_view_behavior">