如何調試意外的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屬性，則該按鈕將停留在放置在編輯器上的位置，但是當您編譯該應用程序時，該按鈕將跳轉到頂部左角。

您需要將這些添加到下載手冊按鈕，然後設置其位置。所以它會在每一種可能的情況下處於同一個位置。

• 應用：layout_constraintLeft_toLeftOf = 「父」，

• 應用：layout_constraintRight_toRightOf = 「父」

但我建議你做它的編輯器，而與約束佈局玩弄這要容易得多。

您還可以觀看此視頻。 https://www.youtube.com/watch?v=sO9aX87hq9c。它有很多幫助。