如何缩放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))，而且从长远来看，它将真正清理您的布局/使您的代码更容易管理。因此，当用户按下“缩放”按钮时，只需增加列宽，在每个网格项ImageViews中设置match_parent，安卓就会自动为您缩放图像。我认为它还将使单击事件/对样式的未来更改更容易处理，并使布局xml更易于管理(代码行更少、可移植性更强、故障点更少)。有关GridViews的教程，只需查看Google的指南：

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

对于一个或两个相同类型视图的列/行以上的对象，您实际上不应该使用TableLayout。

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