与布局文件相比，Android 模拟器中的布局看起来不同答案

【问题标题】：Layout in Android Emulator looks different as compared to the layout file与布局文件相比，Android 模拟器中的布局看起来不同
【发布时间】：2021-07-30 16:00:31
【问题描述】：

我最近开始学习 Android 开发。我正在使用 Android Studio，并用它创建了 XML 布局文件。但是模拟器上的布局看起来与我在 XML 上创建的布局不同，我不知道为什么会这样。

这是我的主要活动布局的图片：

这是我的模拟器的图片：

纯文本应该在文本视图下方，但在模拟器中，它的位置不同（我已将错误标记为红色）。

这是主要活动的代码：

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="208dp"
    android:text="SUBMIT"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="80dp"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="44dp"
    android:text="Enter the value in kg below"
    android:textSize="25sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<EditText
    android:id="@+id/editTextNumber"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="number"
    tools:layout_editor_absoluteX="100dp"
    tools:layout_editor_absoluteY="73dp" />

【问题讨论】：

在使用约束布局时这是一个很常见的错误，如果您不限制视图，它们将呈现在左上角您的 EditText(editTextNumber) 没有任何约束，所以它位于屏幕的左上角，向 EditText 添加约束应该可以解决这个问题
同样对视图使用绝对位置会导致应用的 UI 在不同屏幕尺寸的设备中不一致

标签： android-studio xml-layout

【解决方案1】：

我不确定为什么它在模拟器和预览中显示这种方式，但 EditText 字段不是您想要的位置的原因是因为您如何设置 @987654321 的位置@字段：

tools:layout_editor_absoluteX="100dp" 
tools:layout_editor_absoluteY="73dp"

您告诉 Android 将字段放置在屏幕顶部 100 像素和 73 像素的位置。发生这种情况很可能是因为您不小心在编辑器窗口中轻轻拖动了该字段，该窗口指定了确切的像素位置。

相反，由于您使用的是 ConstraintLayout，因此您需要设置 EditText 相对于布局中其他字段的位置。例如，删除上面的两行并将它们替换为如下内容：

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"

我还建议您在布局上使用它们所代表的描述来命名您的字段，而不是使用默认值 textView 和 textView2。例如，考虑将textView2 更改为weight_label_textview。这将使您更容易知道您在布局和代码中处理的是哪个字段。

【讨论】：

【解决方案2】：

当您使用约束布局时，每个 UI 项都必须垂直和水平约束。尝试向您的 EditText 添加约束。

【讨论】：