如何创建宽度填满屏幕的正方形按钮

Question

我有一个活动，基于TableLayout和TableRow，在其中动态添加了一些按钮，就像这样:

    private TableLayout buttonTableLayout;
    //-----
    for (int row = 0; row < buttonTableLayout.getChildCount(); ++row)
        ((TableRow) buttonTableLayout.getChildAt(row)).removeAllViews();

    LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    for (int row = 0; row < 5; row++) {
        TableRow currentTableRow = getTableRow(row);

        for (int column = 0; column < 5; column++) {
                Button newGuessButton = (Button) inflater.inflate(R.layout.my_button, currentTableRow, false);
                newGuessButton.setText(String.valueOf((row * 5) + column + 1));
                currentTableRow.addView(newGuessButton);
            }

        }
    }
    //----
    private TableRow getTableRow(int row) {
        return (TableRow) buttonTableLayout.getChildAt(row);
    }

我希望制作一个5*5的按钮列表，要求：1. 所有按钮大小相同；2. 让它们填满屏幕。我的代码中已经有一个名为“my_button”的布局：

<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/newButton"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/button_style"></Button>

或者

<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/newButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/button_style"></Button>

并且结果是： 我已经更改了重力，但它没有起作用。有没有办法让它们变成正方形并填满屏幕宽度。

- Beppe

---

请在此处发布您的@drawable/button_style代码，我认为您设置了圆角半径值。请将其删除或将值设置为0。 - MohanRaj S

@MohanRajS 是的，我有一个值，但当我将其设为0时，没有任何变化。 - Beppe

请刷新Android Studio。 - MohanRaj S

Answer 1

2022年更新:

现在我们可以通过使用ConstraintLayout和app:layout_constraintDimensionRatio="1:1" 轻松实现。这是谷歌指南链接。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="My Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

之前的回答： 你应该对Button视图进行子类化并覆盖以下函数：

public class SquareButton extends Button {

    public SquareButton(Context context) {
        super(context);
    }

    public SquareButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public SquareButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int size = width > height ? height : width;
        setMeasuredDimension(size, size); // make it square
    }

}

修改：好的，您需要按照上述方式自定义按钮。然后，您可以使用上面的SquareButton而不是使用默认按钮。

 <com.kingfisher.utils.SquareButton
            android:id="@+id/btnSearch"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="100"
            android:text="Downloaded"/>

- Kingfisher Phuoc

---

我还有一个问题：在将按钮添加为视图之前，如何获取您之前提到的按钮高度/宽度？我想传递给它们一张图片，并且我想在这行代码之前执行某些操作：currentTableRow.addView（newGuessButton）；提前致谢。 - Beppe

我认为这个 int size = width > height ? height : width; 应该反过来。 - Jimit Patel

是的，它创建了一个正方形按钮。但它会填充到最大可能的空间。你该怎么做才能使它“wrap_content”？ - SMBiggs

Answer 2

您需要动态获取屏幕宽度，如下所示：

Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;

获取宽度后，您需要将其除以5，以便根据屏幕宽度获得一个按钮的宽度。

int buttonWidthAndHeight = width/ 5;

现在，当您向表格布局添加按钮时，也要设置按钮的宽度和高度，如下所示：

 TableLayout.LayoutParams lp= new TableLayout.LayaoutParams(buttonWidthAndHeight ,buttonWidthAndHeight ); // width,height
 newGuessButton.setLayoutParams(lp);

愉快的编码！！！！

- Anjali

---

你的代码有问题，lp只获取了高度值，而lp.width得到了-1的值！ - Beppe

Answer 3

请尝试这段代码，将button_rect_shape.xml文件放置在drawable文件夹中。

button_rect_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
     />


<solid android:color="#fc5117"/>
    <!--<stroke
        android:width="1dp"
        android:color="#ffffff" />
-->

    <!--<gradient android:angle="270"
        android:centerColor="#fc5117"
        android:endColor="#fc5117"
        android:startColor="#fc5117" />-->
</shape>

SampleLayout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="100dp"


        android:layout_gravity="center_horizontal"
        android:background="@drawable/button_rect_shape"
        />



</LinearLayout>

- MohanRaj S

---

好的，这是我用来开发的，抱歉我没有其他想法。 - MohanRaj S