使用约束布局在横向模式下没有得到预期的布局

Question

我对 android 开发还很陌生。我有一个非常简单的类似登录的页面。这是图片：

这里是风景（蓝图）的样子：

以下是实际设备中的外观：

两个按钮之间的空间太大，而且它们没有完全对齐。而且，如果有更多元素，它们会出现在我的屏幕之外。

XML 文件：

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


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="80dp"
    android:layout_marginBottom="48dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.04"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/PasswordInput"
    app:layout_constraintVertical_bias="1.0" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="80dp"
    android:layout_marginBottom="48dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/PasswordInput"
    app:layout_constraintVertical_bias="1.0" />

<TextView
    android:id="@+id/textView"
    android:layout_width="246dp"
    android:layout_height="54dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/PasswordInput"
    app:layout_constraintVertical_bias="0.63"
    android:text="Forgot Password"
    android:textAlignment="center"

    />

<EditText
    android:id="@+id/UserNameInput"
    android:layout_width="339dp"
    android:layout_height="41dp"
    android:layout_marginTop="36dp"
    android:hint="User Name"
    android:inputType="text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<EditText
    android:id="@+id/PasswordInput"
    android:layout_width="339dp"
    android:layout_height="41dp"
    android:layout_marginTop="56dp"
    android:ems="10"
    android:hint="Password"
    android:inputType="textPassword"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/UserNameInput" />

</androidx.constraintlayout.widget.ConstraintLayout>

请帮帮我。

Answer 1

您正在为视图使用硬编码大小 (android:layout_width="339dp")。
当您旋转屏幕时，它的宽度和高度会发生变化，而之前看起来不错的339dp 在横向看起来会完全不同。

如果您想让您的视图具有响应性，您可以使用：

app:layout_constraintHeight_percent="0.xx"
app:layout_constraintWidth_percent="0.yy"

现在您的视图将响应。

---

例如：

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/UserNameInput"
        app:layout_constraintVertical_bias="1.0"
        app:layout_constraintWidth_percent="0.3" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="@+id/button"
        app:layout_constraintWidth_percent="0.3" />

    <EditText
        android:id="@+id/UserNameInput"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:hint="User Name"
        android:inputType="text"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.8" />

    <EditText
        android:id="@+id/PasswordInput"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/UserNameInput"
        app:layout_constraintWidth_percent="0.8" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Forgot Password"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/PasswordInput"
        app:layout_constraintVertical_bias="0.63"
        app:layout_constraintWidth_percent="0.5"/>