如何调试意外的 Android 布局？

Question

我的 ConstraintLayout 在应用程序上显示了一些奇怪的项目绘图。它在 android studio 的预览屏幕上显示元素的正确位置，但是在手机上运行应用程序时，元素的位置很奇怪。

这是应用程序的屏幕截图：

我的布局是：

<?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"
android:background="@drawable/background"
>
 <android.support.v7.widget.Toolbar 
 xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="34dp"
    android:layout_height="56dp"
    android:text="appbar"
    android:background="@android:color/transparent"
    tools:layout_editor_absoluteY="25dp"
    tools:layout_editor_absoluteX="8dp" />
<ImageView
    android:id="@+id/imgBooks"
    android:layout_width="272dp"
    android:layout_height="302dp"
    android:src="@drawable/books"
    tools:layout_editor_absoluteY="81dp"
    tools:layout_editor_absoluteX="56dp"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/toolbar" />

<ImageView
    android:id="@+id/imgName"
    android:layout_width="40dp"
    android:layout_height="35dp"
    app:srcCompat="@drawable/name"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="373dp"
    android:layout_below="@+id/imgBooks"
    android:layout_alignParentStart="true" />
<EditText
    android:id="@+id/etEmail"
    android:layout_width="320dp"
    android:layout_height="43dp"
    android:ems="10"
    android:text="Email"
    android:inputType="textEmailAddress"
     tools:layout_editor_absoluteX="67dp"
    tools:layout_editor_absoluteY="417dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:layout_above="@+id/etPhone"
    android:layout_toEndOf="@+id/imgPhone" />
<ImageView
    android:id="@+id/imgEmail"
    android:layout_width="38dp"
    android:layout_height="34dp"
    app:srcCompat="@drawable/email"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="417dp"
    android:layout_alignTop="@+id/etEmail"
    android:layout_toStartOf="@+id/etEmail" />

<EditText
    android:id="@+id/etName"
    android:layout_width="320dp"
    android:layout_height="43dp"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="Name"
    tools:layout_editor_absoluteX="67dp"
    tools:layout_editor_absoluteY="373dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:layout_above="@+id/etEmail"
    android:layout_alignEnd="@+id/btn" />
<ImageView
    android:id="@+id/imgPhone"
    android:layout_width="35dp"
    android:layout_height="31dp"
    app:srcCompat="@drawable/phone"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="463dp"
    android:layout_alignTop="@+id/etPhone"
    android:layout_alignParentStart="true" />
<EditText
    android:id="@+id/etPhone"
    android:layout_width="320dp"
    android:layout_height="43dp"
    android:ems="10"
    android:inputType="phone"
    android:text="Phone"
    tools:layout_editor_absoluteX="67dp"
    tools:layout_editor_absoluteY="463dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:layout_above="@+id/btn"
    android:layout_alignStart="@+id/etName"
    android:layout_alignEnd="@+id/btn" />

<Button
    android:id="@+id/btn"
    android:layout_width="344dp"
    android:layout_height="48dp"
    android:text="Download Brochure"
    android:layout_gravity="center_vertical|center_horizontal"
    tools:layout_editor_absoluteX="20dp"
    tools:layout_editor_absoluteY="514dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:background="@drawable/curves"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true" />

</android.support.constraint.ConstraintLayout>

Answer 1

问题是你根本没有使用约束，这是约束布局的重点。

例如，如果您在“下载手册”按钮上不使用约束并且仅使用tools:layout_editor_absoluteX 和tools:layout_editor_absoluteY 属性，则该按钮将停留在您将其放在编辑器上的位置，但是当您编译应用程序时，按钮位于左上角。

您需要将这些添加到“下载手册”按钮，然后设置其位置。所以它在每一种可能的情况下都会处于相同的位置。

• app:layout_constraintLeft_toLeftOf="parent",

• app:layout_constraintRight_toRightOf="parent"

但我建议你在编辑器上进行操作，同时使用更容易的约束布局。

您也可以观看此视频。 https://www.youtube.com/watch?v=sO9aX87hq9c。很有帮助。