在 Android Studio 中对齐锚定的小部件以填充空白

Question

我是 Android 开发的新手，我正在努力解决以下问题。
我正在构建一个带有 4x4 键盘的简单计算器应用程序。
所有按钮都是从右到左、从下到上固定的。也使用基线。
左上角的按钮将锚定到上面的 TextView。
我需要按钮保持我给它们的正方形大小，但也要正确对齐，以便它们填充右侧剩余的白色 space。
我尝试将右边缘按钮的右侧锚定到 TextView 的右侧，但中间的列间距没有等分。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/txtResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:gravity="center"
        android:inputType="numberSigned|number|numberDecimal"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/txtNewNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:inputType="numberSigned|numberDecimal"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtResult" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:text="1"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/txtNewNumber"
        app:layout_constraintTop_toBottomOf="@+id/txtNewNumber" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="2"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn1"
        app:layout_constraintStart_toEndOf="@+id/btn1" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="48dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="3"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn2"
        app:layout_constraintStart_toEndOf="@+id/btn2" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:text="4"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/btn1"
        app:layout_constraintTop_toBottomOf="@+id/btn1" />

    <Button
        android:id="@+id/btn5"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="5"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn4"
        app:layout_constraintStart_toEndOf="@+id/btn4" />

    <Button
        android:id="@+id/btn6"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="6"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn5"
        app:layout_constraintStart_toEndOf="@+id/btn5" />

    <Button
        android:id="@+id/btn7"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="8"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn8"
        app:layout_constraintStart_toEndOf="@+id/btn8" />

    <Button
        android:id="@+id/btn8"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:text="7"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/btn4"
        app:layout_constraintTop_toBottomOf="@+id/btn4" />

    <Button
        android:id="@+id/btn9"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="9"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn7"
        app:layout_constraintStart_toEndOf="@+id/btn7" />

    <Button
        android:id="@+id/btnPlus"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="+"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn3"
        app:layout_constraintStart_toEndOf="@+id/btn3" />

    <Button
        android:id="@+id/btnMinus"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="-"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn6"
        app:layout_constraintStart_toEndOf="@+id/btn6" />

    <Button
        android:id="@+id/btnMultiply"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="*"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn9"
        app:layout_constraintStart_toEndOf="@+id/btn9" />

    <Button
        android:id="@+id/btnDot"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:text="."
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/btn8"
        app:layout_constraintTop_toBottomOf="@+id/btn8" />

    <Button
        android:id="@+id/btn0"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="0"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btnDot"
        app:layout_constraintStart_toEndOf="@+id/btnDot" />

    <Button
        android:id="@+id/btnEquals"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="="
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn0"
        app:layout_constraintStart_toEndOf="@+id/btn0" />

    <Button
        android:id="@+id/btnDivision"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="/"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btnEquals"
        app:layout_constraintStart_toEndOf="@+id/btnEquals" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

要按照您的意愿展开按钮，您可以使用 ConstraintLayout CHAIN_SPREAD_INSIDE chains.

这是您的 XML，第一行放置在水平链中。看到视图如何在最左边和最右边的锚点之间展开了吗？（我已将最右边的锚点设置到结果视图的末尾。）

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

    <EditText
        android:id="@+id/txtResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:gravity="center"
        android:inputType="numberSigned|number|numberDecimal"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/txtNewNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:inputType="numberSigned|numberDecimal"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtResult" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:text="1"
        android:textSize="24sp"
        app:layout_constraintEnd_toStartOf="@id/btn2"
        app:layout_constraintStart_toStartOf="@+id/txtNewNumber"
        app:layout_constraintTop_toBottomOf="@+id/txtNewNumber"
        app:layout_constraintHorizontal_chainStyle="spread_inside" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="2"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn1"
        app:layout_constraintEnd_toStartOf="@id/btn3"
        app:layout_constraintStart_toEndOf="@+id/btn1" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="48dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="3"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn2"
        app:layout_constraintEnd_toStartOf="@id/btnPlus"
        app:layout_constraintStart_toEndOf="@+id/btn2" />

    <Button
        android:id="@+id/btnPlus"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="+"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn3"
        app:layout_constraintEnd_toEndOf="@id/txtResult"
        app:layout_constraintStart_toEndOf="@+id/btn3" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:text="4"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/btn1"
        app:layout_constraintTop_toBottomOf="@+id/btn1" />

    <Button
        android:id="@+id/btn5"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="5"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn4"
        app:layout_constraintStart_toEndOf="@+id/btn4" />

    <Button
        android:id="@+id/btn6"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="6"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn5"
        app:layout_constraintStart_toEndOf="@+id/btn5" />

    <Button
        android:id="@+id/btn7"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="8"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn8"
        app:layout_constraintStart_toEndOf="@+id/btn8" />

    <Button
        android:id="@+id/btn8"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:text="7"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/btn4"
        app:layout_constraintTop_toBottomOf="@+id/btn4" />

    <Button
        android:id="@+id/btn9"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="9"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn7"
        app:layout_constraintStart_toEndOf="@+id/btn7" />

    <Button
        android:id="@+id/btnMinus"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="-"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn6"
        app:layout_constraintStart_toEndOf="@+id/btn6" />

    <Button
        android:id="@+id/btnMultiply"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="*"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn9"
        app:layout_constraintStart_toEndOf="@+id/btn9" />

    <Button
        android:id="@+id/btnDot"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:text="."
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/btn8"
        app:layout_constraintTop_toBottomOf="@+id/btn8" />

    <Button
        android:id="@+id/btn0"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="0"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btnDot"
        app:layout_constraintStart_toEndOf="@+id/btnDot" />

    <Button
        android:id="@+id/btnEquals"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="="
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn0"
        app:layout_constraintStart_toEndOf="@+id/btn0" />

    <Button
        android:id="@+id/btnDivision"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="8dp"
        android:text="/"
        android:textSize="24sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btnEquals"
        app:layout_constraintStart_toEndOf="@+id/btnEquals" />

</androidx.constraintlayout.widget.ConstraintLayout>

其他行将以相同的方式工作。

在 Android Studio 中对齐锚定的小部件以填充空白

Align anchored widgets to fill whitespace in Android Studio

spacing

android-studio

android-constraintlayout