如何制作完美的方形图像/按钮 [英] How to make perfect square shaped image/button
本文介绍了如何制作完美的方形图像/按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为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);
}
});
}
这篇关于如何制作完美的方形图像/按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
