RecyclerView（GridLayoutManager）行尾空白填充：平板横屏元素适配需求

Hey there! Let's tackle this problem you're facing with your RecyclerView on tablet landscape mode. The issue is that with a fixed spanCount=2 and 12 items, you're left with empty space after the 6th item, and you want to fill that by letting the first row hold as many items as the screen can fit (6,7,8...), then arrange the rest in 2 columns. Here are two solid solutions depending on your exact needs:

This approach adjusts the spanCount for the entire RecyclerView based on the screen width, so every row will have as many items as possible to fill the screen. Perfect if you want a uniform grid that adapts to screen size.

Steps to Implement: #

• Calculate Item Width: First, confirm the width of your individual RecyclerView items. If your item uses a fixed width (e.g., 200dp), convert that value to pixels. If it's set to wrap_content, you can measure a dummy item to get its actual width.
• Compute Span Count: When the screen rotates to landscape (or during initial setup), calculate how many items fit in the screen width—don't forget to account for horizontal spacing between items from your ItemDecoration.
• Update GridLayoutManager: Set the dynamically calculated span count to your GridLayoutManager.

Code Example: #

// In your Activity/Fragment
private fun setupRecyclerView() {
    val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
    val layoutManager = GridLayoutManager(this, 2) // Default spanCount=2 for portrait
    recyclerView.layoutManager = layoutManager

    // Define your item's fixed width in dp
    val itemWidthInDp = 200
    val itemWidthInPx = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        itemWidthInDp.toFloat(),
        resources.displayMetrics
    ).toInt()

    // Horizontal spacing between items (adjust to match your ItemDecoration)
    val horizontalSpacing = 16.dpToPx(resources.displayMetrics)

    // Calculate max items per row based on screen width
    val screenWidth = resources.displayMetrics.widthPixels
    val maxItemsPerRow = (screenWidth / (itemWidthInPx + horizontalSpacing)).coerceAtLeast(2)

    // Update the span count to fill the screen
    layoutManager.spanCount = maxItemsPerRow

    // Attach your adapter with 12 fixed items
    recyclerView.adapter = YourItemAdapter(getFixed12Items())
}

// Helper extension to convert dp to pixels
fun Int.dpToPx(metrics: DisplayMetrics): Int {
    return TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        this.toFloat(),
        metrics
    ).toInt()
}

Notes: #

• For 12 items, if maxItemsPerRow=6, you'll get 2 full rows with no empty space. If maxItemsPerRow=4, you'll get 3 rows—all perfectly filling the screen.
• Handle configuration changes properly: either override onConfigurationChanged to recalculate the span count, or let the system recreate your Activity/Fragment and run the setup logic again.

If you specifically want the first row to fill the screen with as many items as possible, while keeping all subsequent rows in a 2-column grid, you'll need a custom LayoutManager. This gives you full control over how each item is positioned.

Key Logic: #

• Measure and layout the first row's items to fill the entire screen width (calculate how many fit based on item width and screen size).
• For all items after the first row, enforce a 2-column layout with fixed equal-width columns.

Simplified Custom LayoutManager Example: #

class AdaptiveFirstRowLayoutManager(private val defaultSpanCount: Int) : RecyclerView.LayoutManager() {
    private var firstRowItemCount = 0
    private val itemDimensions = mutableListOf<Pair<Int, Int>>() // width, height

    override fun generateDefaultLayoutParams(): RecyclerView.LayoutParams {
        return RecyclerView.LayoutParams(
            RecyclerView.LayoutParams.WRAP_CONTENT,
            RecyclerView.LayoutParams.WRAP_CONTENT
        )
    }

    override fun onLayoutChildren(recycler: RecyclerView.Recycler, state: RecyclerView.State) {
        if (state.itemCount == 0) {
            detachAndScrapAttachedViews(recycler)
            return
        }

        detachAndScrapAttachedViews(recycler)
        val availableWidth = width - paddingLeft - paddingRight

        // Calculate how many items fit in the first row
        val firstItem = recycler.getViewForPosition(0)
        measureChildWithMargins(firstItem, 0, 0)
        val singleItemWidth = getDecoratedMeasuredWidth(firstItem)
        firstRowItemCount = (availableWidth / singleItemWidth).coerceAtLeast(1).coerceAtMost(state.itemCount)

        // Layout first row
        var currentX = paddingLeft
        for (i in 0 until firstRowItemCount) {
            val view = recycler.getViewForPosition(i)
            addView(view)
            measureChildWithMargins(view, 0, 0)
            val viewWidth = getDecoratedMeasuredWidth(view)
            val viewHeight = getDecoratedMeasuredHeight(view)
            
            layoutDecorated(
                view,
                currentX,
                paddingTop,
                currentX + viewWidth,
                paddingTop + viewHeight
            )
            currentX += viewWidth
            itemDimensions.add(Pair(viewWidth, viewHeight))
        }

        // Layout remaining items in 2 columns
        val columnWidth = availableWidth / defaultSpanCount
        var currentY = paddingTop + itemDimensions.maxOf { it.second }
        var columnIndex = 0

        for (i in firstRowItemCount until state.itemCount) {
            val view = recycler.getViewForPosition(i)
            addView(view)
            
            // Force item width to fit 2-column layout
            val layoutParams = view.layoutParams as RecyclerView.LayoutParams
            layoutParams.width = columnWidth - layoutParams.leftMargin - layoutParams.rightMargin
            view.layoutParams = layoutParams
            measureChildWithMargins(view, 0, 0)

            val viewHeight = getDecoratedMeasuredHeight(view)
            val xPos = paddingLeft + columnIndex * columnWidth
            val yPos = currentY

            layoutDecorated(
                view,
                xPos,
                yPos,
                xPos + columnWidth,
                yPos + viewHeight
            )

            columnIndex = (columnIndex + 1) % defaultSpanCount
            if (columnIndex == 0) currentY += viewHeight
        }
    }

    override fun canScrollVertically(): Boolean = true

    override fun scrollVerticallyBy(dy: Int, recycler: RecyclerView.Recycler, state: RecyclerView.State): Int {
        offsetChildrenVertical(-dy)
        return dy
    }
}

Usage: #

// In your Activity/Fragment
val customLayoutManager = AdaptiveFirstRowLayoutManager(2) // 2 columns for remaining rows
recyclerView.layoutManager = customLayoutManager
recyclerView.adapter = YourItemAdapter(getFixed12Items())

Notes: #

• This is a simplified version—you'll want to add edge case handling (like item decoration margins, smooth scrolling, and correct measurement for variable-height items) for production use.
• Adjust the firstRowItemCount calculation to include spacing between items if needed.

内容的提问来源于stack exchange，提问作者Pradeep Sodhi