Question

问题

我有一个带有以下XML的按钮：

<Button
    android:id="@+id/firstNumber"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="@string/firstNumber"
    app:layout_constraintEnd_toStartOf="@+id/secondNumber"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

当前，按钮的layout_width设置为match_constraint（这是我认为它显示为“ 0dp”的原因）。

我想将按钮制作成正方形，其宽度等于高度。这是我到目前为止找到的解决方案：

解决方案1：

我可以执行类似于this answer的操作，在该操作中，我会将XML layout_width和layout_height的值更改为特定的值@dimen/box_size：

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

但是，这并不是理想的方法，因为它基本上是对按钮的宽度进行硬编码，对于不同的屏幕尺寸（与使用match_constraint相对），调整效果并不理想。

解决方案2：

我可以编写一些Java代码来做到这一点（source）：

public class SquareButton extends Button {

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

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
    }
}

这可以工作，但是我宁愿在XML中完成。有办法吗？

Answer 1

尝试以下方法并检查

您还可以将小部件的一个尺寸定义为另一尺寸的比例。为此，您需要至少将一个约束尺寸设置为0dp（即MATCH_CONSTRAINT），然后将layout_constraintDimensionRatio属性设置为给定的比例。

<Button
    android:id="@+id/firstNumber"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="First Number"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toStartOf="@+id/secondNumber"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

请参考以下代码，将四个方形按钮放在水平线上

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


    <Button
        android:id="@+id/firstNumber"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="FN"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/secondNumber"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/secondNumber"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="SN"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/firstNumber"
        app:layout_constraintRight_toLeftOf="@+id/thirdnumber"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/thirdnumber"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="TN"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/secondNumber"
        app:layout_constraintRight_toLeftOf="@+id/fourtnumber"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/fourtnumber"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp"
        android:text="FON"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/thirdnumber"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

有关更多信息，请参见此Link

中的比率

水平的四个动态正方形图像视图

Answer 2

在ImageView中使用Square Image而不是Button。使用该ImageView代替Button。

如何在Android Studio中指定视图的高度相对于视图的宽度？

问题

解决方案1：

解决方案2：

2 个答案: