android - 如何在 Android Studio 中指定 View 相对于其宽度的高度？

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”的原因)。

我想把按钮做成一个正方形，它的宽度等于它的高度。以下是我目前找到的解决方案:

解决方案一:

我可以做类似于 this answer 的事情，我会将 XML layout_width 和 layout_height 值更改为特定值 @dimen/box_size:

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

但是，这并不理想，因为它基本上是对按钮宽度进行硬编码，不能很好地适应不同的屏幕尺寸(与使用 match_constraint 相比)。

方案二:

我可以编写一些 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

尝试下面的方法并检查

You can also define one dimension of a widget as a ratio of the other one. In order to do that, you need to have at least one constrained dimension be set to 0dp (i.e., MATCH_CONSTRAINT), and set the attribute layout_constraintDimensionRatio to a given ratio.

<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" />

Please refer below code, for put four square button in horizontal line

<?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 中的比率

水平方向的四个动态方形 ImageView