android - 根据另一个 RV 滚动增加和减少 RV 高度

Question

我想实现以下行为 -

https://ezgif.com/optimize/ezgif-6-66c61806b01c.gif

这是我的 XML 文件 -

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/fragment_marketplace_root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="7dp">

    <LinearLayout
        android:id="@+id/fragment_marketplace_main_linear_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:focusableInTouchMode="true"
        android:orientation="vertical">

        <com.twoverte.views.ClearableAutoCompleteTextView
            android:id="@+id/fragment_marketplace_searchview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="14dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="14dp"
            android:completionThreshold="0"
            android:hint="@string/fragment_marketplace_search_hint"
            android:iconifiedByDefault="false"
            android:inputType="text|textAutoCorrect"
            android:maxLength="25"
            android:textIsSelectable="false"
            android:textSelectHandle="@xml/empty_shape"
            tools:layout_editor_absoluteX="1dp"
            tools:layout_editor_absoluteY="1dp" />

        <TextView
            android:id="@+id/fragment_marketplace_discover_products_from_myverte_textview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="14dp"
            android:layout_marginTop="15dp"
            android:fontFamily="@font/noto_sans"
            android:text="@string/fragment_marketplace_discover_products_from_myverte"
            android:textSize="17sp" />

        <androidx.core.widget.NestedScrollView
            android:id="@+id/fragment_marketplace_vendors_nested_scrollview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/fragment_marketplace_vendors_recycler_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="14dp"
                android:layout_marginEnd="14dp"
                android:orientation="horizontal"
                tools:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
                tools:listitem="@layout/fragment_marketplace_vendor_row_item" />

        </androidx.core.widget.NestedScrollView>


        <androidx.core.widget.NestedScrollView
            android:id="@+id/fragment_marketplace_featured_products_nested_scroll_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/fragment_marketplace_featured_products_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/very_light_grey"
                    android:fontFamily="@font/noto_sans"
                    android:paddingStart="14dp"
                    android:paddingLeft="14dp"
                    android:paddingTop="15dp"
                    android:paddingEnd="14dp"
                    android:text="@string/fragment_marketplace_featured_products"
                    android:textSize="17sp"
                    android:visibility="gone"
                    tools:visibility="visible" />

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/fragment_marketplace_products_recycler_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:background="@color/very_light_grey"
                    app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
                    tools:listitem="@layout/fragment_marketplace_products_row_item" />

                <View
                    android:id="@+id/activity_product_page_bottom_view"
                    android:layout_width="match_parent"
                    android:layout_height="70dp"
                    android:layout_marginTop="60dp"
                    android:background="@color/light_black"
                    android:visibility="gone"
                    tools:visibility="visible" />


            </LinearLayout>

        </androidx.core.widget.NestedScrollView>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

我已经尝试过很多组合 setOnScrollChangeListener和 addOnScrollListener并没有什么按预期工作。

所需的结果是能够增加和减少顶部 RV 直至达到上限。

向下滚动底部 RV 时应减少，向上滚动时应增加。

如果有人能帮我解决这个问题，我真的会亲吻他的腿，我花了很多时间试图破解如何做出这种行为，我已经厌倦了。

编辑

所需的动画 -

Answer 1

我终于弄明白了。我将首先分享 XML 文件的代码，然后解释有关它的所有内容。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools">

    <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="256dp"
            android:minHeight="132dp"
            android:fitsSystemWindows="true"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <View
                android:id="@+id/blue_view"
                android:layout_width="match_parent"
                android:layout_height="128dp"
                android:background="@android:color/holo_blue_bright"
                app:layout_collapseMode="pin"
                app:layout_collapseParallaxMultiplier="0"
                android:layout_gravity="top"/>

            <HorizontalScrollView
                android:id="@+id/pink_view"
                android:layout_width="match_parent"
                android:layout_height="128dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="1"
                android:layout_gravity="bottom">

                <View
                    android:layout_width="2000dp"
                    android:minWidth="2000dp"
                    android:layout_height="match_parent"
                    android:background="@color/colorAccent"/>

            </HorizontalScrollView>

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

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Note: I used View with different colors in order to preview different segments in the Layout. I also used HorizontalScrollView in order to showcase something like a RecyclerView as in the gif you uploaded.

好的，首先，我们需要创建一个 CollapsingToolbarLayout与 layout_scrollFlags .

我们使用 scroll必须启用标志才能使任何滚动效果生效

我们使用 snap标志来确定当 View 仅部分缩小时要做什么。如果滚动结束并且 View 大小已减小到其原始大小的 50% 以下，则此 View 将返回到其原始大小。如果尺寸大于其尺寸的 50%，它将完全消失。

我们使用 exitUntilCollapsed连同 minHeight为了崩溃Toolbar下降到指定的 minHeight

我们想要 CollapsingToolbarLayout具有:

layout_height设置为 Toolbar 的展开高度

minHeight设置为 Toolbar 的折叠高度

In this case, since we want the HorizontalScrollView (pink_view) only to get smaller in height, we set the minHeight to the [ height of blue_view + smaller height of pink_view ]

Therefore, since blue_view will remain 128dp and we want pink_view to go down to 4dp, we set the minHeight to 132dp.

 

So here is a small example. Assume the blue_view is like 100dp and the pink_view is initially 100dp. So that's how we want it to show at first, but when I start scrolling we want the pink_view to go down to 20dp and the blue_view will stay at 100dp.

Therefore, layout_height will be 200dp and the minHeight will be 120dp.

现在，我们想要 HorizontalScrollView或 pink_view与 CollapsingToolbarLayout 一起崩溃高度。

所以，我们添加 layout_collapseMode="parallax"到 pink_view这样它就会随着 CollapsingToolbarLayout 一起滚动.
layout_collapseParallaxMultiplier确定图像的哪一部分(百分比)将隐藏在底部内容下。在这里，我们希望将其全部隐藏。因此，我们将其设置为 1 .

同时，我们想要 blue_view保持固定在顶部。而且我们也不希望它隐藏在任何底部内容下。

所以，我们添加 layout_collapseMode="pin"到 blue_view这样它就固定在 CollapsingToolbarLayout 的顶部.

我们还添加了 layout_collapseParallaxMultiplier="0"为了不让它隐藏在任何内容下。

Please note that if the heights of the elements exceeds the minHeight, the CollapsingToolbarLayout will be pushed above the screen. It will then seem as if the height of the top item (here blue_view) is decreasing in size.

预览:



这是另一个带有 RecyclerView 的演示:



上面的 XML RecyclerView如果有人感兴趣，演示在下面。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        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="256dp"
            android:minHeight="148dp"
            android:fitsSystemWindows="true"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <View
                android:layout_width="match_parent"
                android:layout_height="128dp"
                android:background="@android:color/holo_blue_bright"
                app:layout_collapseMode="pin"
                app:layout_collapseParallaxMultiplier="0"
                android:layout_gravity="top"/>

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/hv_list"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="128dp"
                android:minHeight="20dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="1"
                android:layout_gravity="bottom"/>

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

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

编辑:RecyclerViews 和 ViewHolders 的重要事项

实现 RecyclerView的高度调整和 ViewHolder , 我们必须在 offset 时调整它们的大小的 AppBarLayout滚动变化。

This is because the CollapsingToolbarLayout just scrolls the elements inside it under each other instead of actually resizing them.

所以，我们必须使用 RecyclerView ，这里叫 hv_list ，以及 AppBarLayout ，这里叫 app_bar .

val hv_list: RecyclerView = findViewById(R.id.hv_list)

val app_bar: AppBarLayout = findViewById(R.id.app_bar)

之后，我们需要记住 hv_list的原始大小.

val hv_original_height: Int = hv_list.layoutParams.height

最后，我们需要设置一个 OffsetChangedListener为 AppBarLayout .在那里，我们将更改 RecyclerView 的高度然后给它一个边缘底部以将它向上推，因为它有一个重力底部。

app_bar.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener {
    override fun onOffsetChanged(appBarLayout: AppBarLayout, i: Int) {
        hv_list.updateLayoutParams {
            this.height = hv_original_height + i
            (this as CollapsingToolbarLayout.LayoutParams).setMargins(0, 0, 0, abs(i))
        }
    }
})

Make sure that your itemView in the RecyclerView has height of match_parent