CollapsingToolbarLayout 未按预期工作

Posted

技术标签:

【中文标题】CollapsingToolbarLayout 未按预期工作【英文标题】:CollapsingToolbarLayout not working as intended 【发布时间】:2021-06-04 04:53:15 【问题描述】:

我正在尝试创建一个带有复杂折叠工具栏的屏幕。这是它的布局

<?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:id="@+id/nested_scroll"
    android:layout_
    android:layout_
    android:background="@color/white"
    tools:context=".view.main.profile.ProfileFragment">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_
        android:layout_
        android:background="@drawable/lighter_gradient_background">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_
            android:layout_
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/cl_user_details"
                android:layout_
                android:layout_>

                <ImageView
                    android:id="@+id/iv_profile_picture"
                    android:layout_
                    android:layout_
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="20dp"
                    android:adjustViewBounds="true"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:ignore="ContentDescription" />

                <TextView
                    android:id="@+id/tv_place"
                    android:layout_
                    android:layout_
                    android:layout_marginTop="8dp"
                    android:fontFamily="@font/montserrat_medium"
                    android:paddingBottom="20dp"
                    android:text="@string/location"
                    android:textColor="@color/white"
                    android:textSize="14sp"
                    app:layout_constraintEnd_toEndOf="@id/iv_profile_picture"
                    app:layout_constraintStart_toStartOf="@id/iv_profile_picture"
                    app:layout_constraintTop_toBottomOf="@id/iv_profile_picture" />

                <TextView
                    android:id="@+id/tv_followers"
                    android:layout_
                    android:layout_
                    android:layout_marginStart="80dp"
                    android:fontFamily="@font/montserrat_medium"
                    android:text="321"
                    android:textColor="@color/white"
                    android:textSize="14sp"
                    app:layout_constraintStart_toEndOf="@id/iv_profile_picture"
                    app:layout_constraintTop_toTopOf="@id/iv_profile_picture" />

                <TextView
                    android:id="@+id/tv_followers_label"
                    android:layout_
                    android:layout_
                    android:layout_marginTop="4dp"
                    android:fontFamily="@font/montserrat_regular"
                    android:text="@string/followers"
                    android:textColor="@color/white"
                    android:textSize="14sp"
                    app:layout_constraintEnd_toEndOf="@id/tv_followers"
                    app:layout_constraintStart_toStartOf="@id/tv_followers"
                    app:layout_constraintTop_toBottomOf="@id/tv_followers" />

                <TextView
                    android:id="@+id/tv_following"
                    android:layout_
                    android:layout_
                    android:layout_marginStart="100dp"
                    android:fontFamily="@font/montserrat_medium"
                    android:text="123"
                    android:textColor="@color/white"
                    android:textSize="14sp"
                    app:layout_constraintStart_toEndOf="@id/tv_followers"
                    app:layout_constraintTop_toTopOf="@id/tv_followers" />

                <TextView
                    android:id="@+id/tv_following_label"
                    android:layout_
                    android:layout_
                    android:fontFamily="@font/montserrat_regular"
                    android:text="@string/following"
                    android:textColor="@color/white"
                    android:textSize="14sp"
                    app:layout_constraintEnd_toEndOf="@id/tv_following"
                    app:layout_constraintStart_toStartOf="@id/tv_following"
                    app:layout_constraintTop_toTopOf="@id/tv_followers_label" />

                <Button
                    android:id="@+id/btn_edit_profile"
                    android:layout_
                    android:layout_
                    android:layout_marginTop="16dp"
                    android:background="@drawable/edit_profile_button"
                    android:fontFamily="@font/poppins_medium"
                    android:text="@string/edit_profile"
                    android:textColor="@color/white"
                    android:textAllCaps="false"
                    android:textSize="12sp"
                    app:layout_constraintEnd_toEndOf="@id/tv_following_label"
                    app:layout_constraintStart_toStartOf="@id/tv_followers_label"
                    app:layout_constraintTop_toBottomOf="@id/tv_followers_label" />

            </androidx.constraintlayout.widget.ConstraintLayout>
        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <TextView
            android:id="@+id/tv_username"
            android:layout_
            android:layout_
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:fontFamily="@font/montserrat_semibold"
            android:text="@string/username"
            android:textColor="@color/white"
            android:textSize="18sp"/>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tl_tabs"
            android:layout_
            android:layout_
            android:background="@drawable/tab_layout_bottom_border"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/app_bar">

            <com.google.android.material.tabs.TabItem
                android:layout_
                android:layout_
                android:background="@color/white"
                android:text="@string/activity" />

            <com.google.android.material.tabs.TabItem
                android:layout_
                android:layout_
                android:text="@string/interests" />

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

    <androidx.core.widget.NestedScrollView
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/cl"
            android:layout_
            android:layout_>

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rv_posts"
                android:layout_
                android:layout_
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                />

            <View
                android:id="@+id/interests_background"
                android:layout_
                android:layout_
                android:background="@color/white"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Button
                android:id="@+id/btn_add_new_interests"
                style="?android:attr/borderlessButtonStyle"
                android:layout_
                android:layout_
                android:layout_marginStart="16dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="16dp"
                android:background="@drawable/add_interests_profile_button"
                android:fontFamily="@font/montserrat_medium"
                android:text="@string/add_new_interests"
                android:textAllCaps="false"
                android:textColor="@color/colorPrimary"
                android:textSize="15sp"
                android:visibility="gone"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <com.google.android.material.chip.ChipGroup
                android:id="@+id/cg_interests"
                android:layout_
                android:layout_
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                android:visibility="gone"
                app:chipSpacingVertical="5dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/btn_add_new_interests" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

我想要实现的行为是当用户按下 RecyclerView 所在的屏幕部分并将其向上拖动时,工具栏应该折叠。现在发生的行为是,当用户执行上述操作时,什么也没有发生,但是当他按下并轻弹 RecyclerView 时,工具栏才会崩溃。有谁知道为什么会这样?怎么解决?

我从教程中复制了说明,并且布局是相同的。这也是在应用程序的另一部分实现的,它运行良好,但该片段有一个更小更简单的标题,它没有嵌套视图。

【问题讨论】:

您复制了教程中的说明?复数?你不能随便拿些随机的东西,把它们放在一起,然后期望它们起作用。阅读文档,很简单。 我看过的所有教程都有相同的布局,所以这些不是随机的。我浏览的所有指南都指向相同的解决方案和相同的布局。最后,禁用 RV 上的嵌套滚动视图完成了这项工作 【参考方案1】:

在 RecyclerView 上使用 android:nestedScrollingEnabled="false" 禁用嵌套滚动视图后,布局具有预期的行为

【讨论】:

以上是关于CollapsingToolbarLayout 未按预期工作的主要内容,如果未能解决你的问题,请参考以下文章

如何更改 CollapsingToolbarLayout 字体和大小?

以编程方式折叠或展开 CollapsingToolbarLayout

Android:CollapsingToolbarLayout 和 SwipeRefreshLayout 卡住

CollapsingToolbarLayout 无法识别滚动投掷

检测 AppBarLayout/CollapsingToolbarLayout 何时完全展开

设置 CollapsingToolbarLayout 的起始高度