如何缩放Android TableLayout

Question

我正在用Java制作Android的gomoku游戏。

我已在活动的顶部中创建了一个记分板，并在底部中创建了一个新游戏Button。

在中心，我已在ImageView中创建了100 TableLayout个（10行和10列）。它在平板电脑上运行良好，但在手机中 - 尤其是在较小的手机中 - ImageView 太小，你无法完美地触摸你想要的东西。

我想实现缩放功能。它可以是多点触控缩放，或ZoomControl Button，我唯一需要的是工作。所以我想放大并缩小TableLayout，但记分牌和新游戏Button不做任何事情。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical" >

<TableRow
    android:id="@+id/tableRowE"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:paddingTop="5dip"
    android:paddingBottom="10dip"
    android:gravity="center" >

    <TextView
        android:id="@+id/twScoreboard"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/result"
        android:textSize="20sp"
        android:layout_span="10"
        android:gravity="center"
    />

</TableRow>

<TableRow
    android:id="@+id/tableRow0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingRight="5dip"
    android:paddingLeft="5dip"
    android:gravity="center"  >

    <ImageView
        android:id="@+id/ImageView1"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView2"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView3"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView4"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView5"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView6"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView7"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView8"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView9"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageViewx"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView11"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView12"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView13"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView14"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView15"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView16"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView17"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView18"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView19"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView20"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView21"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView22"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView23"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView24"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView25"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView26"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView27"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView28"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView29"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView30"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView31"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView32"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView33"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView34"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView35"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView36"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView37"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView38"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView39"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView40"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView41"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView42"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView43"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView44"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView45"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView46"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView47"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView48"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView49"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView50"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView51"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView52"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView53"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView54"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView55"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView56"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView57"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView58"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView59"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView60"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView61"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView62"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView63"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView64"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView65"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView66"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView67"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView68"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView69"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView70"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView71"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView72"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView73"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView74"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView75"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView76"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView77"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView78"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView79"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView80"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView81"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView82"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView83"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView84"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView85"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView86"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView87"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView88"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView89"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView90"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView91"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView92"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView93"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView94"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView95"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView96"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView97"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView98"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView99"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView100"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>


<TableRow 
    android:id="@+id/tableRowU"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:paddingTop="20dip"
    android:gravity="center" >

    <Button
        android:id="@+id/ImageViewNewGame"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_span="10"
        android:onClick="NewGame"
        android:text="@string/newGame"
        android:textSize="20sp" />

</TableRow>

Answer 1

我认为您可能希望通过使用GridView而不是TableLayout来改变您完全创建图像网格的方式。使用GridView，您可以控制列的大小（通过调用gridView.setColumnWidth(int)），并且它可以真正清理您的布局/使您的代码从长远来看更容易管理。因此，当您的用户按下“缩放”键时按钮，只需增加列宽，在每个网格项match_parent中都有ImageView，Android应自动为您缩放图像。我认为它还可以使点击事件/未来的样式更改更容易处理，并使您的布局xml更易于管理（更少的代码行，更多的可移植性，更少的故障点）。有关GridViews的教程，请查看Google的指南：

http://developer.android.com/guide/topics/ui/layout/gridview.html

对于具有多个列/行或两个相同类型视图的内容，您无论如何都不应该使用TableLayout。

但是，如果，尽管如此，你真的超级附加到你的TableLayout，你有几个选择。最简单的可能是将其放在ScrollView中，并使用各种方法来扩展TableLayout。例如，您可以手动调整TableLayout的宽度和高度，或者在其上设置ScaleGestureDetector。这样，您可以扩展内容，并在内容更大时滚动。但是，由于种种原因，我认为GridView绝对是更好的选择。