在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

Lucas Rocha结帐TwoWay-View。您可以选择滚动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>