Android游戏开发：TableLayout适配屏幕及SVG缩放布局问题

Hey there! Let's work through your map layout issues for your army conquest game—we'll fix the SVG scaling, misaligned vertical roads, and overly spaced images one by one.

Fixing SVG Adaptive Scaling & Compact Image Layout #

First, let's tackle the SVG size and spacing problem. Your current code uses overly large weights which are likely causing those excessive gaps. Here's what to adjust:

1. Layout XML Tweaks:

   • For your ImageViews, add android:adjustViewBounds="true" and set a proper scaleType to make SVGs fit their container without extra space. Use fitXY to stretch the SVG to fill the cell, or fitCenter to keep its aspect ratio—pick based on your visual needs.
   • Remove unnecessary nested LinearLayouts in TableRows (they break TableLayout's column alignment) and set all TableLayout/TableRow padding/spacing to 0:

     android:padding="0dp"
     android:spacing="0dp"
     

   • Configure the TableLayout to stretch all 5 columns equally so each cell gets the same amount of space:

     android:stretchColumns="0,1,2,3,4"
     

2. Code-Based Layout Adjustments:
   Ditch the oversized weight=1000 values—use smaller weights or let the TableLayout's stretchColumns handle sizing automatically. Here's a cleaned-up parameter setup:

   // TableRow parameters: let height wrap content, width match parent
   TableRow.LayoutParams rowParams = new TableRow.LayoutParams(
       TableRow.LayoutParams.MATCH_PARENT,
       TableRow.LayoutParams.WRAP_CONTENT
   );
   rowParams.setMargins(0, 0, 0, 0); // Remove any unwanted margins
   
   // ImageView parameters: fill the cell completely, no extra space
   TableRow.LayoutParams imageParams = new TableRow.LayoutParams(
       TableRow.LayoutParams.MATCH_PARENT,
       TableRow.LayoutParams.MATCH_PARENT
   );
   imageParams.weight = 1; // Equal weight for all image cells to distribute space evenly
   imageParams.setMargins(0, 0, 0, 0);
   

Fixing Misaligned Vertical Roads in the Second Row #

The root issue here is using a LinearLayout inside the TableRow—it bypasses the TableLayout's built-in column alignment system. Instead, structure the second row to match the 5-column grid of the first row:

Replace your second TableRow with this:

<TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="0dp"
    android:spacing="0dp">

    <!-- Column 0: Vertical road (aligns with top-left base) -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/street_v" />

    <!-- Columns 1-3: Empty placeholders to maintain grid alignment -->
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Column 4: Vertical road (aligns perfectly with top-right base) -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/street_v" />
</TableRow>

This way, the right vertical road sits exactly in the 5th column, matching the position of the top-right base from the first row.

Full Revised XML Example #

Here's how your complete layout should look to fix both issues:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="0dp">

    <TableLayout
        android:id="@+id/tableLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="0,1,2,3,4"
        android:padding="0dp"
        android:spacing="0dp">

        <!-- Row 0: Top bases + horizontal roads -->
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:spacing="0dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/base" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/street_h" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/street_h" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/street_h" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/base" />
        </TableRow>

        <!-- Row 1: Vertical roads -->
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:spacing="0dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/street_v" />

            <View android:layout_width="match_parent" android:layout_height="match_parent" />
            <View android:layout_width="match_parent" android:layout_height="match_parent" />
            <View android:layout_width="match_parent" android:layout_height="match_parent" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/street_v" />
        </TableRow>

        <!-- Rows 2-4: Fill in with remaining roads/bases as needed -->
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:spacing="0dp" />

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:spacing="0dp" />

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:spacing="0dp" />
    </TableLayout>
</LinearLayout>

A quick final tip: If you're using VectorDrawables (recommended for SVGs on Android), make sure your app module's build.gradle has this enabled (for compatibility with older Android versions):

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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