使用约束布局或android中的任何其他方式进行垂直滚动的粘性视图

Posted 2023-04-19

【中文标题】使用约束布局或android中的任何其他方式进行垂直滚动的粘性视图

【英文标题】：Sticky view with vertical scrolling using constraint layout or any other way in android

【发布时间】：2021-05-02 02:41:55

【问题描述】：

红色部分是包装内容，可以扩展，取决于它包含多少数据。绿色部分/视图始终介于红色和白色之间。屏幕可垂直滚动。

附加的 XML 代码具有滚动视图和布局权重，但它将屏幕从中间分成两部分，这不符合要求。

请建议如何实现。

    <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:fillViewport="true">

    <RelativeLayout
        android:layout_
        android:layout_>

        <androidx.cardview.widget.CardView
            android:id="@+id/card_img_view"
            android:layout_
            android:layout_
            android:layout_centerInParent="true"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:elevation="10dp"
            app:cardBackgroundColor="@color/back_screen_color_list"
            app:cardElevation="10dp"
            app:cardUseCompatPadding="true"
            app:contentPadding="20dp">

            <RelativeLayout
                android:layout_
                android:layout_>

                <FrameLayout
                    android:id="@+id/frm_club_img_wrapper"
                    android:layout_
                    android:layout_
                    android:background="@drawable/circle_border_orange_bg">

                    <ImageView
                        android:id="@+id/img_club"
                        android:layout_
                        android:layout_
                        android:layout_gravity="center"
                        android:contentDescription="@string/img_desc"
                        app:srcCompat="@drawable/ic_logo_img_white" />
                </FrameLayout>

                <de.meinverein.app.view.RegularFontTextView
                    android:layout_
                    android:layout_
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="20dp"
                    android:layout_toRightOf="@+id/frm_club_img_wrapper"
                    android:text="Jetzt Profil\nverfolständigen"
                    android:textColor="@color/black"
                    android:textSize="@dimen/h1_lbl_size" />
            </RelativeLayout>
        </androidx.cardview.widget.CardView>


        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="vertical"
            android:weightSum="2">


            <RelativeLayout
                android:layout_
                android:layout_
                android:layout_weight="1"
                android:background="#0C0F12">

                <LinearLayout
                    android:layout_
                    android:layout_
                    android:layout_alignParentLeft="true"
                    android:layout_marginLeft="40dp"
                    android:layout_marginTop="50dp"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/img_club1"
                        android:layout_
                        android:layout_
                        android:layout_marginBottom="20dp"
                        android:contentDescription="@string/img_desc"
                        app:srcCompat="@drawable/ic_logo_img_white" />

                    <de.meinverein.app.view.BoldFontTextView
                        android:layout_
                        android:layout_
                        android:layout_centerInParent="true"
                        android:text="MEINVEREIN"
                        android:textColor="@color/refs_btn"
                        android:textSize="@dimen/dashboard_app_txt_size" />

                    <de.meinverein.app.view.BoldFontTextView
                        android:layout_
                        android:layout_
                        android:layout_centerInParent="true"
                        android:layout_marginTop="30dp"
                        android:text="Hallo Daniel,\ngerade nichts Neues!"
                        android:textColor="@color/white"
                        android:textSize="@dimen/list_view_item_txt_size_h1" />
                </LinearLayout>


            </RelativeLayout>

            <RelativeLayout
                android:layout_
                android:layout_
                android:layout_weight="1"
                android:background="#F6F6F6">

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/rvAnimals"
                    android:layout_
                    android:layout_marginTop="20dp"
                    android:layout_/>

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/rvAdnimals"
                    android:layout_below="@+id/rvAnimals"
                    android:layout_
                    android:layout_marginTop="20dp"
                    android:layout_/>

            </RelativeLayout>


        </LinearLayout>
    </RelativeLayout>
</ScrollView>

【问题讨论】：

可以显示布局代码吗？

更新了代码。请查看

我还是一头雾水。你有什么例子可以展示吗？任何实现这种布局或任何原型的应用程序？

顺便说一句，你为什么要在滚动视图中扩展红色部分？如果您有足够的数据将红色部分扩展到父视图的底部，您的绿色视图会发生什么？

红色部分可以有多个水平的recyclerview，所以会相应的扩展。绿色视图应位于红色和白色的边界之间。

【参考方案1】：

您可以像这样在nestedScrollView 中使用约束布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_ android:layout_>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_
    android:layout_>


    <LinearLayout
        android:id="@+id/redPortion"
        android:layout_
        android:layout_           //Red Portion
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
    
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/green_sticky_view"
        android:layout_
        android:layout_
        app:layout_constraintTop_toBottomOf="@+id/redPortion"     //Green Sticky View
        app:layout_constraintBottom_toBottomOf="@+id/redPortion"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        />
    
    <LinearLayout
        android:id="@+id/whitePortion"
        android:layout_
        android:layout_
        android:orientation="vertical"                        //White Portion
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/redPortion"
        />
    

  </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.core.widget.NestedScrollView>

为红色、白色和绿色视图使用您想要的任何布局。

我希望这会有所帮助。

【讨论】：

它有效。不需要 NestedScrollView