如何缩放布局中的多个视图以适应布局的大小？

Question

我正在制作一个应用程序，我希望它看起来像这样（我最初在 LinearLayout 中设计了这个布局，以便在我自己的手机上进行测试）

但是，既然我希望它在其他设备上看起来不错，我不知道如何将 EditText 缩放为相同大小并填充它们的父视图。我尝试为它们设置相同的权重，但第二个 EditText 总是超过第一个，看起来像这样（忽略“随机数”文本换行）：

这是我的布局：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/ConstraintLayout"
    android:gravity="center_horizontal">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/nunito_semibold"
        android:gravity="center"
        android:layout_marginRight="32dp"
        android:layout_marginLeft="32dp"
        android:text="random number"
        android:textColor="@color/accent"
        android:textSize="52sp"
        android:layout_marginTop="48dp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/eachText"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:fontFamily="@font/nunito_semibold"
        android:gravity="center"
        android:layout_marginRight="32dp"
        android:layout_marginLeft="32dp"
        android:text="tap anywhere on the screen for a new number"
        android:textColor="@color/accent_muted"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/outputText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/nunito_semibold"
        android:gravity="center"
        android:layout_marginRight="32dp"
        android:layout_marginLeft="32dp"
        android:text=""
        android:textColor="@color/accent"
        android:textSize="54sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/eachText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/linearLayout"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="32dp"
        android:layout_marginLeft="32dp"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@+id/outputText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <EditText
            android:id="@+id/from"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:background="@drawable/edittext_rightflat"
            android:fontFamily="@font/nunito_bold"
            android:textSize="24dp"
            android:hint="1"
            android:inputType="numberDecimal"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintHorizontal_weight="1"/>

        <EditText
            android:id="@+id/to"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:background="@drawable/edittext_leftflat"
            android:fontFamily="@font/nunito_bold"
            android:textSize="24dp"
            android:hint="100"
            android:inputType="numberDecimal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_weight="0"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="allow repeated results"
        android:fontFamily="@font/nunito_semibold"
        android:gravity="center"
        android:textColor="@color/accent_muted"
        android:textSize="24sp"
        android:textStyle="bold"
        android:button="@null"
        android:drawableRight="?android:attr/listChoiceIndicatorMultiple"
        android:checked="false"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

将您的宽度更改为 0dp，以便尊重您的水平重量约束并将您的布局相互约束（链）。

你的内部约束布局应该是这样的

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="32dp"
    android:layout_marginLeft="32dp"
    android:orientation="horizontal"
    app:layout_constraintTop_toBottomOf="@+id/outputText"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

    <EditText
        android:id="@+id/from"
        android:layout_width="0dp"  <-- this is now 0dp
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:background="@drawable/edittext_rightflat"
        android:fontFamily="@font/nunito_bold"
        android:textSize="24dp"
        android:hint="1"
        android:inputType="numberDecimal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/to"  <-- add this
        app:layout_constraintHorizontal_weight="1"/>

    <EditText
        android:id="@+id/to"
        android:layout_width="0dp"  <-- this should be 0 dp
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:background="@drawable/edittext_leftflat"
        android:fontFamily="@font/nunito_bold"
        android:textSize="24dp"
        android:hint="100"
        android:inputType="numberDecimal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/from"  <-- add this constraint
        app:layout_constraintHorizontal_weight="1"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

以上内容最接近您当前的实现，并且可以满足您的需求。

我想说几件你可能需要考虑的事情。

• 您可以只使用内部线性布局来定位文本视图，而不是使用内部约束布局。
• 您可以使用guideline 来定位您的编辑文本和 扁平化你的层次结构。