具有折叠工具栏布局的 NestedScrollView 中的圆角

Question

我正在使用 CoordinatorLayout 制作一个带有标题图像的详细视图，我想在具有 NestedScrollView 的视图中应用圆角边缘，如下所示：

\n

\n

我正在使用 CoordinatorLayout 制作一个带有标题图像的详细视图，我想在具有 NestedScrollView 的视图中应用圆角边缘，如下所示：

\n

<?xml version="1.0" encoding="utf-8"?>\n<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"\n    xmlns:app="http://schemas.android.com/apk/res-auto"\n    xmlns:tools="http://schemas.android.com/tools"\n    android:layout_width="match_parent"\n    android:layout_height="match_parent"\n    android:fitsSystemWindows="true"\n    tools:context=".MainActivity">\n\n    <com.google.android.material.appbar.AppBarLayout\n        android:layout_width="match_parent"\n        android:layout_height="wrap_content"\n        android:fitsSystemWindows="true">\n\n        <com.google.android.material.appbar.CollapsingToolbarLayout\n            android:layout_width="match_parent"\n            android:layout_height="match_parent"\n            android:fitsSystemWindows="true"\n            app:contentScrim="@color/white"\n            app:layout_scrollFlags="scroll|exitUntilCollapsed">\n\n            <ImageView\n                android:layout_width="match_parent"\n                android:layout_height="320dp"\n                android:importantForAccessibility="no"\n                android:scaleType="centerCrop"\n                android:src="@drawable/collapsing_image"\n                app:layout_collapseMode="parallax" />\n\n            <com.google.android.material.appbar.MaterialToolbar\n                android:layout_width="match_parent"\n                android:layout_height="?attr/actionBarSize"\n                app:layout_collapseMode="pin" />\n\n        </com.google.android.material.appbar.CollapsingToolbarLayout>\n\n    </com.google.android.material.appbar.AppBarLayout>\n\n    <androidx.core.widget.NestedScrollView\n        android:layout_width="match_parent"\n        android:layout_height="wrap_content"\n        android:layout_marginTop="-20dp"\n        android:background="@drawable/rounded_collapsing_toolbar"\n        app:layout_behavior="@string/appbar_scrolling_view_behavior">\n\n        <TextView\n            android:layout_width="match_parent"\n            android:layout_height="match_parent"\n            android:layout_margin="20dp"\n            android:text="@string/text_collapsing" />\n\n    </androidx.core.widget.NestedScrollView>\n\n</androidx.coordinatorlayout.widget.CoordinatorLayout>\n

\n

<?xml version="1.0" encoding="UTF-8"?>\n<shape xmlns:android="http://schemas.android.com/apk/res/android">\n    <solid android:color="#FFFFFF" />\n    <corners\n        android:topLeftRadius="20dp"\n        android:topRightRadius="20dp" />\n</shape>\n

\n

问题之一是它开始做奇怪的事情，因为当我放置负边距时，当我展开工具栏时，我会看到 -20dp 的白色块，直到它开始显示图像。

\n

我试图将一种“假视图”放入 CollapsingToolbar 内部，但我发现这里的问题是，在内部，它也会折叠，例如，如果我的工具栏颜色与滚动视图，当我展开它时你可以看到差异......

\n

Answer 1

您需要做一些事情来修复此行为：

1. 将滚动标志添加enterAlways到CollapsingToolbarLayout：CollapsingToolbarLayout这将启用“快速返回”模式，在您的情况下，该模式允许在开始扩展时显示圆形背景。

这里的文档也清楚地解释了这一点：

当进入（在屏幕上滚动）时，视图将在任何向下滚动事件上滚动，无论滚动视图是否也在滚动。这通常称为“快速返回”模式。

现在滚动标志应该是：app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"

2. android:fitsSystemWindows="true"从 中删除AppBarLayout：保留它会导致影响 的滚动行为的问题，NestedScrollView当您尝试向上滚动（即折叠）时CollapsingToolbarLayout， 的滚动行为NestedScrollView不会传播到使其CollapsingToolbarLayout处于展开状态。所以，你需要删除它。

预览： 我已将app:contentScrim颜色更改为与背景不同NestedScrollView，以显示行为：