如何用RecyclerView实现列宽统一的横向滚动TableRow以解决UI卡顿？

Got it, let's work through this problem to get you a smooth, performant solution. The core issue with your original setup is that TableLayout doesn't reuse views—every update triggers full measure/layout passes for all child views, which causes jank when updating in bulk. RecyclerView's view reuse mechanism fixes this, and we can sync column widths across all rows to meet your requirement.

Step 1: Define Your Data Structure #

First, structure your data to represent rows and columns clearly. For example:

// Model class for your column content
public class ColumnItem {
    private String text;
    // Add other properties you need (images, icons, etc.)
    // Getters and setters
}

// Full dataset: list of rows, each row is a list of column items
List<List<ColumnItem>> allRowData = new ArrayList<>();

Step 2: Pre-Calculate Maximum Column Widths #

To ensure consistent column widths across all rows, we need to measure the widest view for each column first. Run this once before setting up your RecyclerViews (use a background thread if your dataset is large to avoid blocking the main thread):

List<Integer> columnMaxWidths = new ArrayList<>();
int columnCount = allRowData.get(0).size(); // Assume all rows have the same column count

for (int colIndex = 0; colIndex < columnCount; colIndex++) {
    int maxWidth = 0;
    for (List<ColumnItem> row : allRowData) {
        ColumnItem item = row.get(colIndex);
        // Inflate and bind your column item view to measure its natural width
        View tempView = LayoutInflater.from(context)
                .inflate(R.layout.your_column_item_layout, null);
        bindColumnData(tempView, item); // Your existing data-binding logic
        
        // Measure the view without constraints
        tempView.measure(
            View.MeasureSpec.UNSPECIFIED,
            View.MeasureSpec.UNSPECIFIED
        );
        
        int measuredWidth = tempView.getMeasuredWidth();
        if (measuredWidth > maxWidth) {
            maxWidth = measuredWidth;
        }
    }
    columnMaxWidths.add(maxWidth);
}

Step 3: Build Horizontal RecyclerViews for Each Row #

Each row will be a horizontal RecyclerView—this gives you smooth scrolling and view reuse, eliminating the jank from your original setup.

Layout XML Setup #

Use a vertical LinearLayout to hold your 4 rows:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gap="8dp"> <!-- Optional spacing between rows -->

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/row_1_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/row_2_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/row_3_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/row_4_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

RecyclerView Adapter Implementation #

Create a reusable adapter for your horizontal rows, using the pre-calculated column widths to enforce consistent sizing:

public class RowAdapter extends RecyclerView.Adapter<RowAdapter.ColumnViewHolder> {
    private List<ColumnItem> rowData;
    private List<Integer> columnMaxWidths;
    private LayoutInflater inflater;

    public RowAdapter(Context context, List<ColumnItem> rowData, List<Integer> columnMaxWidths) {
        this.rowData = rowData;
        this.columnMaxWidths = columnMaxWidths;
        this.inflater = LayoutInflater.from(context);
    }

    @NonNull
    @Override
    public ColumnViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.your_column_item_layout, parent, false);
        return new ColumnViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ColumnViewHolder holder, int position) {
        ColumnItem item = rowData.get(position);
        bindColumnData(holder.itemView, item); // Your data-binding logic
        
        // Enforce the column's maximum width to keep alignment across rows
        ViewGroup.LayoutParams params = holder.itemView.getLayoutParams();
        params.width = columnMaxWidths.get(position);
        holder.itemView.setLayoutParams(params);
    }

    @Override
    public int getItemCount() {
        return rowData.size();
    }

    static class ColumnViewHolder extends RecyclerView.ViewHolder {
        // Initialize your views here (e.g., TextView, ImageView)
        public ColumnViewHolder(@NonNull View itemView) {
            super(itemView);
        }
    }
}

Initialize Each RecyclerView #

In your activity/fragment, set up each row's RecyclerView with a horizontal layout manager and adapter:

// Initialize row 1
LinearLayoutManager row1LayoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
row1Recycler.setLayoutManager(row1LayoutManager);
row1Recycler.setAdapter(new RowAdapter(this, allRowData.get(0), columnMaxWidths));

// Repeat for rows 2-4, using allRowData.get(1), get(2), get(3) respectively

Key Optimizations to Avoid Jank #

• View Reuse: RecyclerView only creates enough ViewHolders to fill the screen, so bulk updates only affect visible items instead of the entire row.
• Pre-Measurement: Calculating column widths upfront avoids repeated measure passes during scrolling.
• Background Thread Work: If your dataset is large, run the column width calculation on a coroutine or AsyncTask to avoid blocking the main thread.

Alternative for Dynamic Row Counts #

If you ever need more than 4 rows, you can create a single vertical RecyclerView where each item is a horizontal RecyclerView. The column width sync logic remains the same—just pass the pre-calculated widths to each row adapter.

内容的提问来源于stack exchange，提问作者Vadym Borys