Android实现可横向滚动2*2网格布局问题求助

Hey there! Let's figure out why your RecyclerView isn't behaving the way you want, and fix it step by step.

The issue here is how GridLayoutManager works when set to HORIZONTAL orientation. Unlike the vertical mode (where spanCount means the number of columns), in horizontal mode, spanCount refers to the number of rows in the vertical direction. Even more importantly, it uses a column-first layout logic: it fills all rows in the first column before moving to the next column.

So when you set spanCount=2 with horizontal orientation, your 4 items get split into 2 columns (2 items per column). If each item's width takes up the full width of the RecyclerView, you'll end up seeing one column (2 items stacked vertically) per "page" when scrolling—exactly the "two rows across two pages" problem you described.

Solution 1: Using RecyclerView (for dynamic/reusable items) #

If you need to keep using RecyclerView (e.g., for more items later or view reuse), here's how to get that 2x2 grid that scrolls horizontally while maintaining its 2-row structure:

1. Keep your existing LayoutManager setup:

   recyclerView.setLayoutManager(new GridLayoutManager(this, 2, GridLayoutManager.HORIZONTAL, false));
   

   The spanCount=2 ensures the grid always has 2 rows, which is what you want.

2. Adjust your item layout's width so two items fit side-by-side in the RecyclerView. You can do this either in XML or dynamically in code:

   • XML approach: Set your item's root view width to a fixed size that's half your desired grid width, or use weights if you're using a LinearLayout as the root. For example:

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:orientation="vertical">
     
         <!-- Your item content here -->
     
     </LinearLayout>
     

   • Dynamic code approach (more flexible for different screen sizes): Calculate the RecyclerView's width and set each item's width to half of it. You can do this in your Adapter's onBindViewHolder method, but make sure the RecyclerView has already been measured first. For example, in your Activity:

     recyclerView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
         @Override
         public void onGlobalLayout() {
             recyclerView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
             int recyclerViewWidth = recyclerView.getWidth();
             // Set each item's width to half the RecyclerView's width
             yourAdapter.setItemWidth(recyclerViewWidth / 2);
             yourAdapter.notifyDataSetChanged();
         }
     });
     

     Then in your Adapter, add a method to set the item width and apply it in onBindViewHolder:

     private int itemWidth;
     
     public void setItemWidth(int width) {
         this.itemWidth = width;
     }
     
     @Override
     public void onBindViewHolder(@NonNull YourViewHolder holder, int position) {
         ViewGroup.LayoutParams params = holder.itemView.getLayoutParams();
         params.width = itemWidth;
         holder.itemView.setLayoutParams(params);
         // Bind your data here
     }
     

With this setup, each column will take up half the RecyclerView's width, so you'll see 2 columns (and thus a 2x2 grid) on screen at once. Scrolling horizontally will reveal more columns while keeping the 2-row structure intact.

Solution 2: Using HorizontalScrollView + GridLayout (for fixed 4-item grid) #

If you only need a fixed 2x2 grid (no dynamic items or reuse), this simpler approach works perfectly and avoids RecyclerView complexity:

Wrap a GridLayout inside a HorizontalScrollView in your XML layout:

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fillViewport="true">

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:rowCount="2">

        <!-- Add your 4 items here, set fixed or wrap_content dimensions -->
        <TextView
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:background="#ff4444"
            android:gravity="center"
            android:text="Item 1"
            android:textSize="18sp" />

        <TextView
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:background="#44ff44"
            android:gravity="center"
            android:text="Item 2"
            android:textSize="18sp" />

        <TextView
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:background="#4444ff"
            android:gravity="center"
            android:text="Item 3"
            android:textSize="18sp" />

        <TextView
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:background="#ffff44"
            android:gravity="center"
            android:text="Item 4"
            android:textSize="18sp" />

    </GridLayout>
</HorizontalScrollView>

The HorizontalScrollView lets you scroll horizontally, and the GridLayout maintains the 2x2 structure you need.

内容的提问来源于stack exchange，提问作者A.S