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

【问题标题】：Add app bar scrolling view behavior to multiple views in CoordinatorLayout将应用栏滚动视图行为添加到 CoordinatorLayout 中的多个视图
【发布时间】：2015-12-04 14:18:23
【问题描述】：

我希望将滚动支持添加到CoordinatorLayout 的单个可滚动子视图以及AppBarLayout 和CollapsingToolbarLayout 中。滚动RecyclerView 或AppBarLayout（下面的压缩代码）时，应用栏及其内容成功滚动和折叠。但是，当尝试在RecyclerView 上方的LinearLayout 上启动滚动事件时，没有任何反应，因为LinearLayout 不知道滚动或折叠视图。

目标是让LinearLayout 充当RecyclerView 的粘性页眉和AppBarLayout 的页脚，并接收与RecyclerView 相同的滚动行为，类似于Spotify's shuffle play/available offline header。事实上，如果appbar_scrolling_view_behavior layout_behavior 可以像RecyclerView 一样应用于LinearLayout，那就太好了，但我想这种行为在不可滚动的视图上会被忽略。是否有人知道不需要将LinearLayout 视图作为RecyclerView 中的一行来实现的解决方法？

<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>

【问题讨论】：

  • 也许不可能，因为 Spotify 不使用设计支持库，但我不知道
  • @MarioVelasco 正确，Spotify 不使用 CollapsingToolbarLayout 实现，但我引用它作为我希望通过某种解决方法实现的行为的示例。
  • 好消息！我有一个真正的解决方案给你。这将解决您尝试执行的操作，查看一下，如果您喜欢，请标记为已解决。

标签： android androiddesignsupport android-coordinatorlayout android-collapsingtoolbarlayout android-appbarlayout


【解决方案1】：

您不需要解决方法或奇怪的东西。库支持此行为。只需将您的 LinearLayout 替换为 RecyclerView 下方即可：

<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>

此外，您还需要将其放入您的 RecyclerView 以在 LinearLayout 后面显示：

    android:paddingTop="30dp"
    android:clipToPadding="false"

这就是它的样子：

<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>

这不是一个好的设计，但它是一个解决方案。您可以在 LinearLayout 中添加一个更好的 Layout 以使其像 Spotify。

编辑：添加了视频

【讨论】：

  • 看起来应该可以。但是，我不久前（现在）尝试了类似的方法，并且NestedScrollView 对滚动没有反应——即使使用appbar_scrolling_view_behavior layout_behavior。我相信CoordinatorLayout 只寻找一个视图以通过appbar_scrolling_view_behavior 行为映射到AppBarLayout。所以一旦在RecyclerView 上找到它，搜索就结束了。我目前正在想办法将TouchEvent 添加到LinearLayout 并重定向MotionEvent 以触发RecyclerView+AppBarLayout 滚动。到目前为止没有运气。
  • 我已经用另一个 NestedScrollView 而不是你的 RecyclerView 进行了测试，它成功了，我会用 RecyclerView 再次检查，我会给你看一个视频。试试把我给你的xml复制粘贴一下，告诉我结果。
  • 对了，你看到我给你写的另一种方法了吗？
  • 标准方式应该是使用 CoordinatorLayout 的锚定支持。在我看来，OP 的意图与 FAB 锚定到 CoordinatorLayout 的方式完全相同。
  • @m.vincent transparent CollapsingToolbarLayout title
【解决方案2】：

这是放在Toolbar 和RecyclerView 之间的粘性标题：

<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"/>

为避免与Toolbar 重叠，您可以为AppBarLayout 和CollapsingToolbarLayout 设置不同的高度：

<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="210dip"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginBottom="30dp"
        app:expandedTitleMarginEnd="64dp">

        <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_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            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"/>

<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>

视频演示：

此外，您可以为Toolbar 设置高度，但需要使用类似此项目CoordinatorLayoutExample 的自定义行为制作自定义标题。我用没有行为的自定义标题制作了它：

<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>

样式：

<style name="TransparentText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00000000</item>
</style>

视频演示：

【讨论】：

  • @ryan 试试这个以避免重叠
  • 在AppBarLayout中使用图片无重叠的解决方案非常好
  • 我已经尝试过您的 XML 布局代码，但在我的情况下，随机播放按钮与工具栏重叠。那我应该怎么做才能避免这种情况呢？
  • @MuhammadMaqsood 如果您只是复制粘贴代码，您将看到类似演示的内容。也许您正在更改元素的顺序或在下面添加新的工具栏。
  • @Mario Velasco ，我只是在复制您的代码，但我不知道的一件事是“@dimen/slide_handle_height”，这可能是导致问题的原因。
【解决方案3】：

经过反复试验，这是最终为我工作的布局的精简版本：

<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，你能附上你的解决方案的截图或视频演示吗？
  • 这不应该是公认的答案。没有显示布局的屏幕截图或视频。此外，还有响应中未引用的样式和尺寸。
  • @GeorgeBikas 因为 Ryan 是问题的提问者，我认为让他确定他自己的回答是正确的答案是唯一公平的..
【解决方案4】：

你可以试试这个

    <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>

或

你可以在strings.xml写这段代码

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

你可以使用：

app:layout_behavior="@strings/appbar_scrolling_view_behavior">

【讨论】：

    【解决方案5】：

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

    layout_anchor="@id/app_bar_layout"

    和

    layout_anchorGravity="bottom|right|end"

    在视图中（包含您的按钮）并将其放在Toolbar 下。还要增加此视图的高度，因为当您向下滚动时，Toolbar 将与您的视图重叠。

    【讨论】：

    • 这个“layout_anchor”答案帮助了我的船。 :-D
    猜你喜欢
    • 2017-01-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-04
    • 2012-07-19
    • 1970-01-01
    • 2014-09-10
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode