[英]How to zoom Android TableLayout
I'm making a gomoku game for Android in Java. 我正在用Java制作Android的gomoku游戏。
I've created a scoreboard in the top of the activity and a new game Button
in the bottom . 我在活动的顶部创建了一个记分板,在底部创建了一个新游戏Button
。
In the center, I've created 100 ImageView
s (10 rows and 10 columns) in a TableLayout
. 在中心,我在TableLayout
创建了100个ImageView
(10行和10列)。 It works fine in tablets, but in phones — especially in smaller phones — the ImageView
s are too small , and you can't touch perfectly what you want. 它在平板电脑上运行良好,但在手机中 - 特别是在较小的手机中 - ImageView
太小了 ,你无法完美地触摸你想要的东西。
I would like to implement a zoom function . 我想实现缩放功能 。 It can be multi-touch zoom, or a ZoomControl
Button
, the only thing I need is to work. 它可以是多点触控变焦,或ZoomControl
Button
,我唯一需要的是工作。 So I would like to zoom in and zoom out in the TableLayout
, but the scoreboard and the new game Button
don't do anything. 所以我想放大并缩小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>
I think you may want to change the way you're creating the grid of images altogether, by using a GridView rather than a TableLayout. 我想你可能想要通过使用GridView而不是TableLayout来改变你完全创建图像网格的方式。 With a GridView, you can control how large your columns are (by calling gridView.setColumnWidth(int)
), and also it'll really clean up your layout/make your code easier to manage in the long run. 使用GridView,您可以控制列的大小(通过调用gridView.setColumnWidth(int)
),并且它将真正清理您的布局/使您的代码从长远来看更容易管理。 So, when your user presses your 'zoom' button, just increase the column width, have the ImageViews in each grid item match_parent
, and Android should automatically scale the images for you. 因此,当您的用户按下“缩放”按钮时,只需增加列宽,在每个网格项中使用ImageViews match_parent
,Android应自动为您缩放图像。 I think it will also make click events/future changes to your styling easier to handle, and make your layout xml much more manageable (fewer lines of code, more portability, fewer points of failure). 我认为它还可以使点击事件/未来的样式更改更容易处理,并使您的布局xml更易于管理(更少的代码行,更多的可移植性,更少的故障点)。 For a tutorial on GridViews, just check out Google's guide: 有关GridViews的教程,请查看Google的指南:
http://developer.android.com/guide/topics/ui/layout/gridview.html http://developer.android.com/guide/topics/ui/layout/gridview.html
For something with more than a column/row or two of the same type of view, you really shouldn't be using TableLayout anyway. 对于具有多个列/行或两个相同类型视图的内容,您实际上不应该使用TableLayout。
But if, despite the above, you're really super attached to your TableLayout, you have a few options. 但是,如果,尽管如此,你真的超级附加到你的TableLayout,你有几个选择。 The easiest probably involves putting it inside a ScrollView, and using various methods to scale the TableLayout. 最简单的可能是将其放在ScrollView中,并使用各种方法来扩展TableLayout。 For instance, you could manually adjust the width and height of the TableLayout, or set a ScaleGestureDetector on it. 例如,您可以手动调整TableLayout的宽度和高度,或者在其上设置ScaleGestureDetector。 This way, you could scale up the content, and also scroll around once it's bigger. 这样,您可以扩展内容,并且一旦更大就滚动。 However, I think GridView is definitely the better option, for a myriad of reasons. 但是,我认为GridView绝对是更好的选择,原因有很多。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.