予期しないAndroidレイアウトをデバッグする方法は？

Question

My ConstraintLayoutは、アプリ上のアイテムの奇妙なプロットを表示しています。それはアンドロイドスタジオのプレビュー画面上の要素の正しい位置を表示していますが、電話でアプリを実行している間は要素の位置が奇妙です。

私のレイアウトは次のとおりです：ここで

はアプリのスクリーンショットである

<?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。それは多くの助けになります。