android - 如何根据大小在表格行中显示图像

Question

有 2x2 网格(动态使用 TableLayout)需要在其上显示图像。现在基于图像大小，意味着——如果图像适合 1 个单元格意味着 1 个单元格，否则大意味着 2 个单元格或 4 个单元格基于大小(我知道它将占用多少个单元格)

我可以在 1 个单元格中显示图像，但问题是如果图像需要 2 个单元格(第一列)如何在 2 个单元格中显示图像(不干扰网格)

Answer 1

在不干扰网格的情况下，我看到的解决方法是在 TableLayout 的顶部 动态设置图像。然后你可以存档:

我已经上传了测试项目的代码 here ;

您初始化 overlappingImage 并且一旦您需要将图像设置到您的单元格 - 您只需将它添加到布局并根据您要填充的单元格数量设置高度和宽度参数。

TableLayout 动态生成，cell的布局xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">
    <View
            android:layout_margin="4dp"
            android:background="#aacc00"
            android:layout_height="40dp"
            android:layout_width="40dp"/>
</FrameLayout>

Activity 的布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/container"
    android:padding="16dp"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TableLayout
        android:id="@+id/tableLayout"
        android:layout_width="match_parent"
        android:layout_height="280dp"/>

    <LinearLayout
        android:id="@+id/buttonsLinearLayout"
        android:layout_below="@+id/tableLayout"
        android:layout_marginTop="16dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:text="1x1"
            android:id="@+id/button11"
            android:onClick="onClick11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="4x1"
            android:id="@+id/button21"
            android:onClick="onClick41"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="2x3 at (2;2)"
            android:id="@+id/button12"
            android:onClick="onClick32"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="2x2"
            android:id="@+id/button22"
            android:onClick="onClick22"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

以及处理按钮点击和生成表格的 Activity 代码:

public class MainActivity extends AppCompatActivity {

    RelativeLayout container;
    int cellWidth = 0, cellHeight = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        TableLayout tableLayout = (TableLayout) findViewById(R.id.tableLayout);
        tableLayout.setStretchAllColumns(true);
        for (int i = 0; i < 4; i++) {
            TableRow tableRow = new TableRow(this);
            for (int j = 0; j < 10; j++) {
                LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                View cell = layoutInflater.inflate(R.layout.table_cell, null, false);
                if (cellHeight == 0 ) {
                    cell.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
                    cellWidth = cell.getMeasuredWidth();
                    cellHeight = cell.getMeasuredHeight();
                }

                tableRow.addView(cell);
            }

            tableLayout.addView(tableRow);
        }

        container = (RelativeLayout)findViewById(R.id.container);
        overlappingImage = new ImageView(this);
        overlappingImage.setScaleType(ImageView.ScaleType.FIT_XY);
    }

    ImageView overlappingImage;

    private void restoreTableLayout() {
        container.removeView(overlappingImage);
    }

    public void onClick11(View view) {
        restoreTableLayout();
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(cellWidth, cellHeight);
        overlappingImage.setLayoutParams(params);
        overlappingImage.setImageResource(R.drawable.horizontal_cat);
        container.addView(overlappingImage);
    }

    public void onClick41(View view) {
        restoreTableLayout();
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(cellWidth*4, cellHeight);
        overlappingImage.setLayoutParams(params);
        overlappingImage.setImageResource(R.drawable.horizontal_cat);
        container.addView(overlappingImage);
    }

    public void onClick32(View view) {
        restoreTableLayout();
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(cellWidth*3, cellHeight*2);
        params.setMargins(cellWidth*2, cellHeight*2, 0 ,0);
        overlappingImage.setLayoutParams(params);
        overlappingImage.setImageResource(R.drawable.vertical_cat);
        container.addView(overlappingImage);
    }

    public void onClick22(View view) {
        restoreTableLayout();
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(cellWidth*2, cellHeight*2);
        overlappingImage.setLayoutParams(params);
        overlappingImage.setImageResource(R.drawable.horizontal_cat);
        container.addView(overlappingImage);
    }
}

希望对您有所帮助。