滚动时折叠复杂视图

Question

如何在跟随图像滚动时折叠视图。在图像中，只有 UI 的第 4 节和第 5 节是折叠的。

我的 xml 在下面。我的想法是将可折叠视图放在 CollapsingToolbarLayout 中，并用app:layout_collapseMode="parallax" 和不可折叠的app:layout_collapseMode="pin" 标记它们。但这不起作用。
你有什么解决办法吗？示例代码的链接不胜感激。

<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"
    android:background="@color/white_ffffff"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/Theme.MyApplication.AppBarOverlay" >

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:background="@color/white_ffffff"
            app:toolbarId="@+id/toolbar" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                app:layout_collapseMode="parallax" >

                <include
                    android:id="@+id/toolbar"
                    layout="@layout/layout_toolbar_2"
                    app:layout_collapseMode="pin" />

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:paddingStart="@dimen/dp_33"
                    android:paddingTop="@dimen/dp_16"
                    android:paddingEnd="@dimen/dp_33"
                    android:paddingBottom="@dimen/dp_16"
                    app:layout_collapseMode="parallax" >

                    <de.hdodenhof.circleimageview.CircleImageView
                        android:id="@+id/imgAvatar"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_default_avatar"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_marginStart="@dimen/dp_20"
                        android:orientation="vertical"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toEndOf="@+id/imgAvatar"
                        app:layout_constraintTop_toTopOf="parent">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="김근육"
                            android:textColor="@color/black_000000"
                            android:textSize="@dimen/text_18sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="abc@gmail.com"
                            android:textSize="@dimen/text_12sp" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/imgSeeMore"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:contentDescription="TODO"
                        android:src="@drawable/ic_arrow_right"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </androidx.constraintlayout.widget.ConstraintLayout>

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/dp_16"
                    android:layout_marginEnd="@dimen/dp_16"
                    android:background="@drawable/ic_bg_colapsing_section">

                    <androidx.constraintlayout.widget.Guideline
                        android:id="@+id/guideline_1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:layout_constraintGuide_percent="0.1675" />

                    <androidx.constraintlayout.widget.Guideline
                        android:id="@+id/guideline_2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:layout_constraintGuide_percent="0.335" />

                    <androidx.constraintlayout.widget.Guideline
                        android:id="@+id/guideline_3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:layout_constraintGuide_percent="0.5" />

                    <androidx.constraintlayout.widget.Guideline
                        android:id="@+id/guideline_4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:layout_constraintGuide_percent="0.665" />

                    <androidx.constraintlayout.widget.Guideline
                        android:id="@+id/guideline_5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:layout_constraintGuide_percent="0.830" />

                    <View
                        android:layout_width="1dp"
                        android:layout_height="match_parent"
                        android:layout_marginTop="@dimen/dp_12"
                        android:layout_marginBottom="@dimen/dp_12"
                        android:background="@color/gray_CACBCB"
                        app:layout_constraintLeft_toLeftOf="@id/guideline_2" />

                    <View
                        android:layout_width="1dp"
                        android:layout_height="match_parent"
                        android:layout_marginTop="@dimen/dp_12"
                        android:layout_marginBottom="@dimen/dp_12"
                        android:background="@color/gray_CACBCB"
                        app:layout_constraintLeft_toLeftOf="@id/guideline_4" />

                    <LinearLayout
                        android:id="@+id/layoutMyCash"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center"
                        app:layout_constraintStart_toStartOf="@id/guideline_1"
                        app:layout_constraintEnd_toEndOf="@id/guideline_1"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"
                        android:layout_marginTop="@dimen/dp_16"
                        android:layout_marginBottom="@dimen/dp_20">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_my_cash" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:textSize="@dimen/text_12sp"
                            android:text="@string/my_cash"
                            android:textColor="@color/black_000000"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:textSize="@dimen/text_14sp"
                            android:text="10,000원"
                            android:textColor="@color/blue_1953E9"/>
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/layoutMyPoint"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center"
                        app:layout_constraintStart_toStartOf="@id/guideline_3"
                        app:layout_constraintEnd_toEndOf="@id/guideline_3"
                        app:layout_constraintTop_toTopOf="@id/layoutMyCash"
                        app:layout_constraintBottom_toBottomOf="@id/layoutMyCash">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_my_point" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:textSize="@dimen/text_12sp"
                            android:text="@string/my_point"
                            android:textColor="@color/black_000000"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:textSize="@dimen/text_14sp"
                            android:text="10,000P"
                            android:textColor="@color/blue_1953E9"/>
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/layoutMyClass"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center"
                        app:layout_constraintStart_toStartOf="@id/guideline_5"
                        app:layout_constraintEnd_toEndOf="@id/guideline_5"
                        app:layout_constraintTop_toTopOf="@id/layoutMyCash"
                        app:layout_constraintBottom_toBottomOf="@id/layoutMyCash">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_my_class" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:textSize="@dimen/text_12sp"
                            android:text="@string/my_class"
                            android:textColor="@color/black_000000"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:textSize="@dimen/text_14sp"
                            android:text="1"
                            android:textColor="@color/blue_1953E9"/>
                    </LinearLayout>

                </androidx.constraintlayout.widget.ConstraintLayout>

                <Button
                    android:id="@+id/btnCashCharge"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/cash_charge"
                    android:textSize="@dimen/text_18sp"
                    android:layout_marginStart="@dimen/dp_16"
                    android:layout_marginEnd="@dimen/dp_16"
                    android:background="@drawable/bg_border_nomal"
                    android:backgroundTint="@color/blue_1953E9"
                    android:textColor="@color/white_ffffff"
                    android:layout_marginTop="@dimen/dp_8"
                    app:layout_collapseMode="pin" />
                
                <View
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_8"
                    android:layout_marginTop="@dimen/dp_16"
                    android:paddingBottom="@dimen/dp_16"
                    android:background="@color/gray_F5F5F5"
                    app:layout_collapseMode="pin" />
            </LinearLayout>

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

<!--    <include layout="@layout/layout_my_page_scrolling"/>-->

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_marginEnd="@dimen/dp_16"
        android:layout_marginBottom="@dimen/dp_16"
        android:backgroundTint="@color/blue_1953E9"
        android:src="@drawable/ic_camera"
        android:contentDescription="TODO" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>```

Answer 1

您必须使用 NestedScrollView 来滚动项目。

在主布局之后放这个

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:orientation="vertical">
        // all other activity you want
        </LinearLayout>
   </androidx.core.widget.NestedScrollView>

您必须将nestedscrollview 放在另一个布局中，因为nestedscrollview 只包含一个用于调用的布局，它不会在其中调用多个布局。