滚动包含 x 个 GridView 的整个片段

Posted 2023-04-18

技术标签:

【中文标题】滚动包含 x 个 GridView 的整个片段【英文标题】：Scroll entire fragment containing x number of GridViews 【发布时间】：2021-12-17 16:14:54 【问题描述】：

所以我真的到处找都没有找到答案。我有一个包含 x 个 GridViews 的布局，它通过 MQTT 从 JSON 获取数据。问题是如果将 ScrollView 设置为容器，则每个 GridView 都会变成一行，并且能够分别滚动每一行。如果我使用fillViewPort，GridViews 会正确显示，但不会滚动，内容会在屏幕下方。

我只想像在没有任何 GridView 的网站上一样滚动整个片段。

这是一种组合的示例。我已经尝试了所有其他组合，有很多类似的问题，但在我的情况下没有解决方案。

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="viewModel"
            type="com.volvo.mechatronicsstudio.showcarcontrol.ui.main.viewmodels.MainViewModel" />

    </data>

    <ScrollView
        android:layout_
        android:layout_
        android:fillViewport="true"
        android:nestedScrollingEnabled="false" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/main"
            android:layout_
            android:layout_
            android:isScrollContainer="true"
            tools:context=".ui.main.fragments.MainFragment">

            <!--        HANDLES & DOORS-->
            <TextView
                android:id="@+id/tv_title_handles_doors"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_
                android:layout_
                android:text="Handles and Doors"
                android:layout_marginTop="10dp"
                android:layout_marginStart="20dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <GridView
                android:id="@+id/gridview_handles_doors"
                android:layout_
                android:layout_
                android:gravity="center"
                android:columnWidth="120dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:horizontalSpacing="30dp"
                android:verticalSpacing="30dp"
                android:layout_margin="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_title_handles_doors" />

            <!--        LIGHTS-->
            <TextView
                android:id="@+id/tv_title_lights"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_
                android:layout_
                android:text="Lights"
                android:layout_marginTop="15dp"
                android:layout_marginStart="20dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/gridview_handles_doors" />

            <GridView
                android:id="@+id/gridview_lights"
                android:layout_
                android:layout_
                android:gravity="center"
                android:columnWidth="120dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:horizontalSpacing="30dp"
                android:verticalSpacing="30dp"
                android:layout_margin="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_title_lights" />

            <!--        DECOR-->
            <TextView
                android:id="@+id/tv_title_decor"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_
                android:layout_
                android:text=""
                android:layout_marginTop="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/gridview_lights" />

            <GridView
                android:id="@+id/gridview_decor"
                android:layout_
                android:layout_
                android:gravity="center"
                android:columnWidth="120dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:horizontalSpacing="30dp"
                android:verticalSpacing="30dp"
                android:layout_margin="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_title_decor" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</Layout>

【问题讨论】：

【参考方案1】：

所以我尝试了很多方法，现在想出了一个部分解决方案。我使用 LinearLayout 和 NestedScrollView 而不是 ConstraintLayout，而不是 ScrollView。页面现在可以随意滚动了。

现在的问题是 GridView 的动态高度 - 它们只显示一行。但这是另一个问题。

这是工作示例：

<layout 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">

    <data>
        <variable
            name="viewModel"
            type="com.volvo.mechatronicsstudio.showcarcontrol.ui.main.viewmodels.MainViewModel" />
    </data>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollViewContainer"
        android:layout_
        android:layout_
        android:fillViewport="true">

        <LinearLayout
            android:id="@+id/main"
            android:layout_
            android:layout_
            android:scrollbars="vertical"
            android:background="@drawable/bg_mainfragment"
            tools:context=".ui.main.fragments.MainFragment"
            android:orientation="vertical">
    
            <!--        WELCOME-->
            <TextView
                android:id="@+id/tv_title_welcome"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_
                android:layout_
                android:layout_marginTop="10dp"
                android:layout_marginStart="20dp"
                android:text="Welcome"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <GridView
                android:id="@+id/gridview_welcome"
                android:layout_
                android:layout_
                android:layout_margin="20dp"
                android:columnWidth="120dp"
                android:gravity="center"
                android:horizontalSpacing="10dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:verticalSpacing="30dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_title_welcome" />

            <!--        LIGHTS-->
            <TextView
                android:id="@+id/tv_title_lights"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_
                android:layout_
                android:layout_marginTop="15dp"
                android:layout_marginStart="20dp"
                android:text="Lights"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/gridview_welcome" />

            <GridView
                android:id="@+id/gridview_lights"
                android:layout_
                android:layout_
                android:layout_margin="20dp"
                android:columnWidth="120dp"
                android:gravity="center"
                android:horizontalSpacing="10dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:verticalSpacing="30dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_title_lights" />

            <!--        DECOR-->
            <TextView
                android:id="@+id/tv_title_decor"
                style="@style/Widget.Theme.ShowcarControl.text.title.category"
                android:layout_
                android:layout_
                android:layout_marginTop="15dp"
                android:layout_marginStart="20dp"
                android:text="Decor"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/gridview_lights" />

            <GridView
                android:id="@+id/gridview_decor"
                android:layout_
                android:layout_
                android:layout_margin="20dp"
                android:columnWidth="120dp"
                android:gravity="center"
                android:horizontalSpacing="10dp"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidth"
                android:verticalSpacing="30dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_title_decor" />

            <View
                android:id="@+id/line_Decor_Bottom"
                android:layout_
                android:layout_
                android:background="@color/line_settings"
                android:layout_margin="20dp"
                app:layout_constraintTop_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</layout>

【讨论】：

我能找到的另一种方法是用 RecyclerViews 替换 GridViews，但在我的情况下它只有 1-5 个图块，所以使用 GridViews 似乎更好

以上是关于滚动包含 x 个 GridView 的整个片段的主要内容，如果未能解决你的问题，请参考以下文章

嵌套滚动视图自动滚动到底部

Android滚动问题

Android：滚动整个片段，里面有 ListView

滚动时在另一个片段视频视图中重叠一个片段的视频拇指

一起学Android之GridView

listview在上gridview在下，如何能够一起滚动？