根据另一个RV滚动增加和减小RV高度

问题描述 投票:1回答:1

我想实现以下行为-

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>

我已经尝试了setOnScrollChangeListeneraddOnScrollListener的许多组合,但没有按预期工作。

所需的结果是具有增加和减少最高RV的能力。

当向下滚动底部RV时要减小,而向上滚动则要增加。

[如果有人可以帮助我,我会亲吻他的腿,我花了很多时间试图破解如何做出这种行为,我对此感到厌烦。

编辑

所需的动画-

enter image description here

android android-recyclerview android-animation
1个回答
0
投票

我终于明白了。我将首先共享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>

注意:为了预览版式中的不同段,我将View用于不同的颜色。我还使用HorizontalScrollView来展示类似RecyclerView的内容,就像您上传的gif文件一样。


好,所以首先我们需要用CollapsingToolbarLayout创建一个layout_scrollFlags

  • 我们必须启用scroll标志,滚动效果才能生效
  • 我们使用snap标志来确定只缩小一部分视图时的处理方式。如果滚动结束并且视图大小已减小到其原始大小的50%以下,则此视图将返回其原始大小。如果大小大于其大小的50%,它将完全消失。
  • 我们将exitUntilCollapsedminHeight一起使用,以便将Toolbar折叠到指定的minHeight

我们希望CollapsingToolbarLayout具有:

  • layout_height设置为Toolbarexpanded高度
  • [minHeight设置为Toolbarcollapsed高度

在这种情况下,由于我们希望HorizontalScrollViewpink_viewonlyheight中变小,因此我们将minHeight设置为[C0的[height ] +较小的[blue_view的[[height]]

因此,由于pink_view将保留为blue_view,并且我们希望128dp降至pink_view,因此将4dp设置为minHeight


现在,我们希望132dpHorizontalScrollViewpink_view

height折叠。

因此,我们将CollapsingToolbarLayout添加到layout_collapseMode="parallax",以便它与pink_view一起滚动。

CollapsingToolbarLayout确定图像的哪一部分(百分比)将被隐藏在底部内容之下。在这里,我们希望它

all

隐藏。因此,我们将其设置为layout_collapseParallaxMultiplier
同时,我们希望1保持

固定

到顶部。而且我们也不希望将其隐藏在任何底层内容下。因此,我们将blue_view添加到layout_collapseMode="pin",以便将其固定在blue_view的顶部。

我们还添加CollapsingToolbarLayout,以便不将其隐藏在任何内容下。


请注意,如果元素的

高度

超过layout_collapseParallaxMultiplier="0",则minHeight将被推到屏幕上方。然后,似乎顶部项目的高度(此处为CollapsingToolbarLayout)的大小正在减小。
© www.soinside.com 2019 - 2024. All rights reserved.