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

Question

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/white"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="320dp"
                android:importantForAccessibility="no"
                android:scaleType="centerCrop"
                android:src="@drawable/collapsing_image"
                app:layout_collapseMode="parallax" />

            <com.google.android.material.appbar.MaterialToolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-20dp"
        android:background="@drawable/rounded_collapsing_toolbar"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:text="@string/text_collapsing" />

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

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

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

我曾尝试将其放入 CollapsingToolbar 中作为一种“假视图”，但我在这里发现的问题是，在此处，它也会折叠，例如，如果我有工具栏与滚动视图颜色不同，当我展开它时你可以看到不同...

Answer 1

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

将 enterAlways 滚动标志添加到 CollapsingToolbarLayout: 这将启用 'quick return' 模式，在您的情况下允许显示圆形背景当 CollapsingToolbarLayout 开始扩展时向上。

这个documentation here也解释的很清楚了：

When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling. This is commonly referred to as the 'quick return' pattern.

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

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

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

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

Round corners in NestedScrollView with Collapsing Toolbar Layout

xml

android

android-collapsingtoolbarlayout