如何制作完美的方形图像/按钮

本文介绍了如何制作完美的方形图像/按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在为Android设计基本的sudoko游戏.我想要一张4x4的桌子，上面所有的单元格都是正方形.

我正在尝试使用TableLayout中的16个按钮.

我的方式是这样

它们的形状是矩形:(

我的xml

<TableLayout android:id="@+id/tl" android:layout_width="match_parent" android:layout_height="fill_parent" android:gravity="center" > <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center" > <Button android:id="@+id/button1" style="@style/box_sky_blue" android:layout_weight="1" android:text="1" /> <Button android:id="@+id/button2" style="@style/box_sky_blue" android:layout_weight="1" android:text="2" /> <Button android:id="@+id/button3" style="@style/box_sky_blue" android:layout_weight="1" android:text="3" /> <Button android:id="@+id/button4" style="@style/box_sky_blue" android:layout_weight="1" android:text="4" /> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button5" style="@style/box_sky_blue" android:layout_weight="1" android:text="5" /> <Button android:id="@+id/button6" style="@style/box_sky_blue" android:layout_weight="1" android:text="6" /> <Button android:id="@+id/button7" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> <Button android:id="@+id/button8" style="@style/box_sky_blue" android:layout_weight="1" android:text="8" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button9" style="@style/box_sky_blue" android:layout_weight="1" android:text="9" /> <Button android:id="@+id/button10" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> <Button android:id="@+id/button11" style="@style/box_sky_blue" android:layout_weight="1" android:text="8" /> <Button android:id="@+id/button12" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button13" style="@style/box_sky_blue" android:layout_weight="1" android:text="9" /> <Button android:id="@+id/button14" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> <Button android:id="@+id/button15" style="@style/box_sky_blue" android:layout_weight="1" android:text="8" /> <Button android:id="@+id/button16" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> </TableRow> </TableLayout>

这是天蓝色的盒子

<style name="box_sky_blue"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">@color/box_color_sky_blue</item> <item name="android:layout_margin">5dp</item> <item name="android:padding">5dp</item> <item name="android:textSize">20sp</item> <item name="android:gravity">center</item> <item name="android:textColor">#ffffff</item> </style>

既然我有4x4,5x5&的正方形，如何使它们成为正方形? 6x6

解决方案

将wrap_contents更改为默认大小:

android:layout_width="wrap_content" android:layout_height="wrap_content"

到

android:layout_width="@dimen/box_size" android:layout_height="@dimen/box_size"

(然后在res/values/dimen.xml中将box_size设置为:<dimen name="box_size">50dp</dimen>)

或者，使用wrap_content作为宽度，然后在代码中使用myBox.setHeight(myBox.getMeasuredWidth);，使宽度和高度匹配.只需确保视图已完全加载即可，否则getMeasuredWidth返回0.

要在加载视图后更改高度以匹配wrap_content宽度，可以使用ViewTreeObserver:

if(yourActivityLayout.getViewTreeObserver().isAlive()){ yourActivityLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout(){ // The view is completely loaded now, so getMeasuredWidth() won't return 0 yourButton1.setLayoutParams(new TableLayout.LayoutParams(yourButton1.getMeasuredWidth(), yourButton1.getMeasuredWidth())); ... // Do this for all buttons (preferably in a for-loop to prevent repetition) // Destroy the onGlobalLayout afterwards, otherwise it keeps changing // the sizes non-stop, even though it's already done yourActivityLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this); } }); }

I am designing a basic sudoko GAME for android. I want a 4x4 table with all cells as squares in it.

I am trying this with the 16 Buttons in a TableLayout.

My way looks like this

they are rectange in shape :(

my xml

<TableLayout android:id="@+id/tl" android:layout_width="match_parent" android:layout_height="fill_parent" android:gravity="center" > <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center" > <Button android:id="@+id/button1" style="@style/box_sky_blue" android:layout_weight="1" android:text="1" /> <Button android:id="@+id/button2" style="@style/box_sky_blue" android:layout_weight="1" android:text="2" /> <Button android:id="@+id/button3" style="@style/box_sky_blue" android:layout_weight="1" android:text="3" /> <Button android:id="@+id/button4" style="@style/box_sky_blue" android:layout_weight="1" android:text="4" /> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button5" style="@style/box_sky_blue" android:layout_weight="1" android:text="5" /> <Button android:id="@+id/button6" style="@style/box_sky_blue" android:layout_weight="1" android:text="6" /> <Button android:id="@+id/button7" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> <Button android:id="@+id/button8" style="@style/box_sky_blue" android:layout_weight="1" android:text="8" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button9" style="@style/box_sky_blue" android:layout_weight="1" android:text="9" /> <Button android:id="@+id/button10" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> <Button android:id="@+id/button11" style="@style/box_sky_blue" android:layout_weight="1" android:text="8" /> <Button android:id="@+id/button12" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button13" style="@style/box_sky_blue" android:layout_weight="1" android:text="9" /> <Button android:id="@+id/button14" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> <Button android:id="@+id/button15" style="@style/box_sky_blue" android:layout_weight="1" android:text="8" /> <Button android:id="@+id/button16" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> </TableRow> </TableLayout>

here is box sky blue

<style name="box_sky_blue"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">@color/box_color_sky_blue</item> <item name="android:layout_margin">5dp</item> <item name="android:padding">5dp</item> <item name="android:textSize">20sp</item> <item name="android:gravity">center</item> <item name="android:textColor">#ffffff</item> </style>

How to make them sqaure since I have square of 4x4,5x5 & 6x6

解决方案

Change the wrap_contents to a default size:

android:layout_width="wrap_content" android:layout_height="wrap_content"

to

android:layout_width="@dimen/box_size" android:layout_height="@dimen/box_size"

(and then set the box_size in the res/values/dimen.xml like: <dimen name="box_size">50dp</dimen>)

OR, use wrap_content for the width, and then in code use myBox.setHeight(myBox.getMeasuredWidth); so the width and height match. Just make sure the view is completely loaded though, otherwise getMeasuredWidth returns 0.

EDIT:

To change the height to match the wrap_content width after the View is loaded, you can use a ViewTreeObserver:

if(yourActivityLayout.getViewTreeObserver().isAlive()){ yourActivityLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout(){ // The view is completely loaded now, so getMeasuredWidth() won't return 0 yourButton1.setLayoutParams(new TableLayout.LayoutParams(yourButton1.getMeasuredWidth(), yourButton1.getMeasuredWidth())); ... // Do this for all buttons (preferably in a for-loop to prevent repetition) // Destroy the onGlobalLayout afterwards, otherwise it keeps changing // the sizes non-stop, even though it's already done yourActivityLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this); } }); }