在 Android 中创建二维滚动视图的正确方法是什么？

Question

我需要创建一个支持垂直滚动和水平滚动每行的二维视图，这与 Google 的画廊设计或 Netflix 的做法非常相似。我看过一些关于最佳实践和对使用嵌套滚动视图等的保留意见的帖子，但其中大部分都是非常古老的帖子。

鉴于当前的 Android 版本，实现此类行为的正确方法是什么？

参考资料：

ScrollView Inside ScrollView

Gorges Android Two-Dimensional Scroll View

这是我目前使用的代码：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    android:paddingLeft="@dimen/activity_horizontal_margin"
    tools:context="com.example.culami.RecipeDashboardActivity"
    android:orientation="vertical"
    android:background="#2E2E2E"
     >

    <!-- Parent Linear Layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center|left"
        android:orientation="vertical">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel1"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Recently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_1_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_2_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_3_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>    

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel2"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Frequently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_4_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_5_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_6_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>    

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel3"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Frequently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_7_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_8_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_9_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>  

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel4"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Frequently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_10_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_11_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_12_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>  

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/recipeDashLabel5"
            android:gravity="left"
            android:textSize="24sp"
            android:padding="5dp"
            android:textColor="#ffffff" />

         <!-- Frequently viewed Recipes -->
         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal"
            android:baselineAligned="false" >

            <ImageButton
                android:id="@+id/recipe_13_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recipe_1"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_14_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_2"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

            <ImageButton
                android:id="@+id/recipe_15_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:src="@drawable/recipe_4"
                android:contentDescription="@string/descMSG"
                android:background="@drawable/arrow_imagebutton_selector"
                android:layout_gravity="center"
                android:onClick="" />

        </LinearLayout>   

    </LinearLayout>  <!-- End Parent Linear Layout -->

</ScrollView>

我需要能够将每行 LinearLayout 中的三个虚拟图像替换为适用于多个图像的水平可滚动视图。 我怎样才能做到这一点？

Answer 1

结帐TwoWay-View 由 Lucas Rocha 提供。您可以选择在 2 维中滚动，或将其固定为 1 维（水平/垂直）。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <org.lucasr.twowayview.TwoWayView
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <!-- some more horizontal TwoWayView here -->
    </LinearLayout>
</ScrollView>