Android如何实现适配图片尺寸的双列布局？（代码调试求助）

Hey there! Let's tackle that TableLayout issue you're facing. Right now your code is adding every image to its own row, but we need to adjust the logic to match your desired layout rules:

• Two small images → same row (one per column)
• Medium/large images → single row (spanning both columns)
• Mix of small and medium/large → each gets their own separate row

Step 1: Update Your Layout Logic #

Here's the revised version of your getBannerList method's success block, with key changes to handle the layout rules:

private void getBannerList() { 
    final Call<BannerList_Model> itemMainResponse = APIHandler.getApiService().bannerList(getFiledMapForItemList()); 
    itemMainResponse.enqueue(new Callback<BannerList_Model>() { 
        @Override 
        public void onResponse(Response<BannerList_Model> response, Retrofit retrofit) { 
            BannerList_Model itemResponse = response.body(); 
            if (itemResponse == null) { 
                UIUtils.showToast(getContext(), "Server Error !"); 
                return; 
            } 

            String msg = itemResponse.getMsg().toString(); 
            if (!msg.equals("success")) { 
                return; 
            } 

            userList = itemResponse.getBannerList(); 
            if(userList == null || userList.isEmpty()) { 
                return; 
            } 

            TableLayout table = (TableLayout) view.findViewById(R.id.tblBanner_list); 
            table.setColumnStretchable(0, true); 
            table.setColumnStretchable(1, true); 
            table.removeAllViews(); // Clear existing views to avoid duplicates

            int i = 0; 
            while (i < userList.size()) { 
                // Assume your banner item class is named BannerItem; adjust if needed
                BannerItem currentItem = userList.get(i); 
                String currentSize = currentItem.getBannerSize().toString().trim().toLowerCase(); 

                TableRow row = new TableRow(getContext()); 
                row.setLayoutParams(new TableLayout.LayoutParams(
                    TableLayout.LayoutParams.MATCH_PARENT, 
                    TableLayout.LayoutParams.WRAP_CONTENT
                ));

                // Check if current and next item are both small
                if (i + 1 < userList.size()) { 
                    BannerItem nextItem = userList.get(i+1); 
                    String nextSize = nextItem.getBannerSize().toString().trim().toLowerCase(); 

                    if (currentSize.equals("small") && nextSize.equals("small")) { 
                        // Add two small images to the same row
                        addBannerImage(row, currentItem, false); // false = no column span
                        addBannerImage(row, nextItem, false); 
                        table.addView(row); 
                        i += 2; // Skip next item since we handled it
                        continue; 
                    } 
                } 

                // Handle single items (medium/large or leftover small)
                addBannerImage(row, currentItem, true); // true = span both columns
                table.addView(row); 
                i += 1; 
            } 
        } 

        @Override 
        public void onFailure(Call<BannerList_Model> call, Throwable t) { 
            // Don't forget to handle network failures!
            UIUtils.showToast(getContext(), "Failed to load banners: " + t.getMessage()); 
        } 
    }); 
}

// Helper method to create and configure ImageViews for the table
private void addBannerImage(TableRow row, BannerItem item, boolean spanColumns) { 
    ImageView img = new ImageView(getContext()); 
    TableRow.LayoutParams imgParams; 

    if (spanColumns) { 
        // For medium/large images: span both columns and fill width
        imgParams = new TableRow.LayoutParams(
            TableRow.LayoutParams.MATCH_PARENT, 
            TableRow.LayoutParams.WRAP_CONTENT, 
            1.0f
        ); 
        imgParams.span = 2;
    } else { 
        // For small images: split row width equally with another small image
        imgParams = new TableRow.LayoutParams(
            0, 
            TableRow.LayoutParams.WRAP_CONTENT, 
            1.0f
        ); 
    } 

    imgParams.setMargins(4, 4, 4, 4); // Add small margins for spacing
    img.setLayoutParams(imgParams); 
    img.setScaleType(ImageView.ScaleType.CENTER_CROP); // Adjust based on your design needs
    img.setAdjustViewBounds(true); 

    // Load image with Picasso
    Picasso.with(getContext()) 
        .load(Constants.VIDEO_URL + item.getBannerUrl()) 
        .into(img); 

    row.addView(img); 
}

Key Changes Explained #

• Batch Processing: Switched to a while loop to handle pairs of small images, incrementing the index by 2 when grouping two items together.
• Helper Method: addBannerImage reduces code duplication and handles both single-column (small) and double-column (medium/large) cases with proper layout parameters.
• Layout Parameters:
  • Small images use a weight of 1.0f to split the row width equally.
  • Medium/large images use span=2 to occupy both columns and fill the full row width.
• Image Scaling: Added scaleType and adjustViewBounds to prevent image distortion and ensure proper display.
• Error Handling: Added the missing onFailure callback to handle network errors gracefully.

Layout File Tweak #

Ensure your XML TableLayout has these attributes for proper stretching:

<TableLayout
    android:id="@+id/tblBanner_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="0,1"
    android:padding="4dp"/>

This setup will exactly match the layout behavior you described: small images paired in rows, medium/large images taking full rows, and mixed sizes each getting their own row.

内容的提问来源于stack exchange，提问作者Parth Panchal