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

Question

我正在为安卓设计一个基本的数独游戏。我想要一个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的正方形，如何使它们变得相同？

- Maveňツ

---

你能发布一下style文件夹中box_sky_blue.xml的代码吗？ - Android is everything for me

@Androidiseverythingforme 请审核 :) - Maveňツ

如果您正在使用约束布局，并且高度设置为0dp，则将宽度设置为0dp，并使用此代码：app:layout_constraintDimensionRatio="H,1:1" - Abdulrahman Abdelkader

@AbdulrahmanAbdelkader 在4年前，约束布局（constraint layout）没有在SDK中被引入，它是在2018年才出现的。 - Maveňツ

Answer 1

将wrap_contents更改为默认大小：

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

to

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。

编辑：

为了在视图加载后将高度改为与包裹内容宽度匹配，您可以使用 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);
        }
    });
}

- Kevin Cruijssen

Answer 2

更新的答案，已经可以使用:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="1"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

- Addev

Answer 3

XML中的按钮代码

<Button
    android:id="@+id/btn"  
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:background="@drawable/buttonshape"/>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
 android:shape="rectangle" >
<corners
android:topLeftRadius="0dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"/>
<solid
android:color="#0000ff"/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"/>
<size
android:width="64dp"
android:height="64dp"/>
</shape>

- Android is everything for me

---

这是硬编码的。你必须提供一个不是硬编码的解决方案。 - Yash Jain

Answer 4

尝试添加固定的宽度和高度。

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

并在res/values/dimen.xml中添加

 <dimen name="box_size">40dp</dimen>

- nayana bhoj