Aufrufe gehen an falscher Stelle, wenn ConstraintLayout

Question

Ich übe in Constraint-Layout, aber mein Problem ist, wenn ich Constraint-Layout verwenden und alle Ansichten in meinem Layout anpassen scheint es an einem falschen Ort zu sein, wenn der Android-Emulator ausgeführt wird, wie kann ich beheben oder wie kann ich sicherstellen, dass mein Layout wird, wie es in dem Emulator erscheint
hier ist der activitymain.xml

<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:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView 
     tools:text="@string/passenger_label" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textViewPassangerLabel" 
     android:textAppearance="@style/TextAppearance.AppCompat.Caption" 
     android:layout_marginTop="16dp" 
     app:layout_constraintTop_toTopOf="parent" 
     android:layout_marginStart="32dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginLeft="32dp" 
     app:layout_constraintBottom_toTopOf="@+id/txtViewPassangerName" 
     android:layout_marginBottom="16dp" /> 

    <TextView 
     tools:text="@string/passenger_name" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/txtViewPassangerName" 
     android:textColor="@color/colorPrimary" 
     android:textSize="35sp" 
     tools:layout_editor_absoluteY="57dp" 
     android:layout_marginStart="16dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginLeft="16dp" 
     android:layout_marginEnd="16dp" 
     app:layout_constraintRight_toRightOf="parent" 
     android:layout_marginRight="16dp" 
     app:layout_constraintHorizontal_bias="0.39" /> 

    <ImageView 
     android:layout_width="60dp" 
     android:layout_height="80dp" 
     app:srcCompat="@drawable/shape_rectangle_stroke" 
     android:id="@+id/rightRectangle" 
     tools:layout_editor_absoluteY="99dp" 
     android:layout_marginStart="16dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginLeft="16dp" /> 

    <ImageView 
     android:layout_width="60dp" 
     android:layout_height="80dp" 
     app:srcCompat="@drawable/shape_rectangle_stroke" 
     android:id="@+id/leftRectangle" 
     tools:layout_editor_absoluteY="97dp" 
     android:layout_marginEnd="16dp" 
     app:layout_constraintRight_toRightOf="parent" 
     android:layout_marginRight="16dp" 
     android:layout_marginStart="16dp" 
     app:layout_constraintLeft_toRightOf="@+id/imageView10" 
     android:layout_marginLeft="16dp" 
     app:layout_constraintHorizontal_bias="0.96" /> 

    <ImageView 
     android:layout_width="1dp" 
     android:layout_height="1dp" 
     app:srcCompat="@android:color/background_dark" 
     android:background="@color/colorPrimary" 
     android:id="@+id/divider" 
     tools:layout_editor_absoluteY="97dp" 
     tools:layout_editor_absoluteX="367dp" /> 

    <TextView 
     tools:text="SFO" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView3" 
     android:textSize="25sp" 
     tools:layout_editor_absoluteY="128dp" 
     tools:layout_editor_absoluteX="32dp" /> 

    <TextView 
     tools:text="LAX" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView4" 
     android:textSize="25sp" 
     tools:layout_editor_absoluteY="114dp" 
     tools:layout_editor_absoluteX="315dp" /> 

    <TextView 
     android:text="PassangerTime" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView5" 
     tools:layout_editor_absoluteX="22dp" 
     app:layout_constraintTop_toBottomOf="@+id/rightRectangle" 
     android:layout_marginTop="8dp" /> 

    <TextView 
     android:text="PassangerT" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView6" 
     tools:layout_editor_absoluteY="179dp" 
     android:layout_marginEnd="32dp" 
     app:layout_constraintRight_toRightOf="parent" 
     android:layout_marginRight="32dp" /> 

    <TextView 
     android:text="02:10 PM" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView7" 
     android:textSize="25sp" 
     android:textColor="@android:color/background_dark" 
     app:layout_constraintTop_toBottomOf="@+id/textView5" 
     android:layout_marginStart="16dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginLeft="16dp" /> 

    <TextView 
     android:text="00:15" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView8" 
     android:textSize="25sp" 
     android:textColor="@color/colorBad" 
     app:layout_constraintTop_toBottomOf="@+id/textView6" 
     android:layout_marginTop="8dp" 
     android:layout_marginEnd="48dp" 
     app:layout_constraintRight_toRightOf="parent" 
     android:layout_marginRight="48dp" /> 

    <TextView 
     android:text="Department" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView9" 
     tools:layout_editor_absoluteY="246dp" 
     tools:layout_editor_absoluteX="32dp" /> 

    <TextView 
     android:text="Arrival" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView10" 
     app:layout_constraintTop_toBottomOf="@+id/textView8" 
     android:layout_marginTop="8dp" 
     android:layout_marginEnd="48dp" 
     app:layout_constraintRight_toRightOf="parent" 
     android:layout_marginRight="48dp" /> 

    <TextView 
     android:text="02:40PM" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView11" 
     android:textSize="25sp" 
     android:textColor="@color/colorGood" 
     tools:layout_editor_absoluteY="271dp" 
     tools:layout_editor_absoluteX="27dp" /> 

    <TextView 
     android:text="12:40PM" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView12" 
     android:textSize="25sp" 
     android:textColor="@color/colorGood" 
     app:layout_constraintTop_toBottomOf="@+id/textView10" 
     android:layout_marginTop="8dp" 
     android:layout_marginEnd="16dp" 
     app:layout_constraintRight_toRightOf="parent" 
     android:layout_marginRight="16dp" /> 

    <ImageView 
     app:srcCompat="@drawable/shape_rectangle_stroke" 
     android:id="@+id/imageView4" 
     android:layout_width="352dp" 
     android:layout_height="40dp" 
     android:background="@color/colorPrimaryDark" 
     tools:layout_editor_absoluteY="305dp" 
     android:layout_marginStart="16dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginLeft="16dp" /> 

    <TextView 
     android:text="Terminal" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView13" 
     android:textSize="20sp" 
     android:textColor="@android:color/background_dark" 
     app:layout_constraintBottom_toTopOf="@+id/imageView5" 
     app:layout_constraintLeft_toLeftOf="@+id/imageView4" 
     app:layout_constraintTop_toTopOf="@+id/imageView4" 
     android:layout_marginStart="16dp" 
     android:layout_marginLeft="16dp" /> 

    <TextView 
     android:text="Gate" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView14" 
     android:textSize="20sp" 
     android:textColor="@android:color/background_dark" 
     android:layout_marginStart="16dp" 
     app:layout_constraintLeft_toRightOf="@+id/textView13" 
     android:layout_marginLeft="16dp" 
     app:layout_constraintRight_toLeftOf="@+id/textView15" 
     android:layout_marginEnd="16dp" 
     android:layout_marginRight="16dp" 
     app:layout_constraintTop_toTopOf="@+id/imageView4" 
     android:layout_marginTop="8dp" /> 

    <TextView 
     android:text="Seat" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView15" 
     android:textSize="20sp" 
     android:textColor="@android:color/black" 
     app:layout_constraintRight_toRightOf="@+id/imageView4" 
     android:layout_marginEnd="40dp" 
     android:layout_marginRight="40dp" 
     app:layout_constraintTop_toTopOf="@+id/imageView4" 
     android:layout_marginTop="8dp" /> 

    <ImageView 
     app:srcCompat="@drawable/shape_rectangle_stroke" 
     android:id="@+id/imageView5" 
     android:layout_width="120dp" 
     android:layout_height="69dp" 
     android:background="@color/colorPrimary" 
     tools:layout_editor_absoluteY="345dp" 
     android:layout_marginStart="16dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginLeft="16dp" /> 

    <ImageView 
     android:layout_width="120dp" 
     android:layout_height="70dp" 
     app:srcCompat="@drawable/shape_rectangle_stroke" 
     android:id="@+id/imageView6" 
     android:background="@color/colorPrimary" 
     tools:layout_editor_absoluteY="346dp" 
     tools:layout_editor_absoluteX="136dp" /> 

    <ImageView 
     android:layout_height="72dp" 
     app:srcCompat="@drawable/shape_rectangle_stroke" 
     android:id="@+id/imageView7" 
     android:layout_width="112dp" 
     android:background="@color/colorPrimary" 
     tools:layout_editor_absoluteY="344dp" 
     tools:layout_editor_absoluteX="256dp" /> 

    <TextView 
     tools:text="@string/terminal" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView16" 
     android:textSize="50sp" 
     android:textColor="@android:color/background_light" 
     tools:layout_editor_absoluteY="355dp" 
     tools:layout_editor_absoluteX="67dp" /> 

    <TextView 
     tools:text="@string/gate" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView17" 
     android:textSize="50sp" 
     android:textColor="@android:color/background_light" 
     tools:layout_editor_absoluteY="349dp" 
     tools:layout_editor_absoluteX="153dp" /> 

    <TextView 
     tools:text="@string/seat" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/textView18" 
     android:textSize="50sp" 
     android:textColor="@android:color/background_light" 
     tools:layout_editor_absoluteY="350dp" 
     tools:layout_editor_absoluteX="272dp" /> 

    <ImageView 
     app:srcCompat="@drawable/shape_rectangle_stroke" 
     android:id="@+id/imageView8" 
     android:layout_height="3dp" 
     android:layout_width="190dp" 
     tools:layout_editor_absoluteY="143dp" 
     tools:layout_editor_absoluteX="97dp" /> 

    <ImageView 
     android:layout_width="wrap_content" 
     app:srcCompat="@mipmap/barcode" 
     android:id="@+id/imageView9" 
     android:layout_height="87dp" 
     tools:layout_editor_absoluteY="414dp" 
     android:layout_marginEnd="16dp" 
     app:layout_constraintRight_toRightOf="parent" 
     android:layout_marginRight="16dp" 
     android:layout_marginStart="16dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginLeft="16dp" /> 

    <ImageView 
     android:layout_width="90dp" 
     android:background="@drawable/ic_plane_icon1" 
     android:id="@+id/imageView10" 
     android:layout_height="51dp" 
     tools:layout_editor_absoluteY="92dp" 
     android:layout_marginStart="64dp" 
     app:layout_constraintLeft_toRightOf="@+id/rightRectangle" 
     android:layout_marginLeft="64dp" /> 
</android.support.constraint.ConstraintLayout> 

hier ist ein Foto von Emulator (linke) und die activitymain.xml (rechte)

Answer 1

Nehmen Sie zum Beispiel diese zwei Ansichten:

<TextView 
    android:text="PassangerTime" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:id="@+id/textView5" 
    tools:layout_editor_absoluteX="22dp" 
    app:layout_constraintTop_toBottomOf="@+id/rightRectangle" 
    android:layout_marginTop="8dp" /> 

<TextView 
    android:text="PassangerT" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:id="@+id/textView6" 
    tools:layout_editor_absoluteY="179dp" 
    android:layout_marginEnd="32dp" 
    app:layout_constraintRight_toRightOf="parent" 
    android:layout_marginRight="32dp" /> 

Jeder von ihnen hat einige Attribute wie

tools:layout_editor_absoluteY="179dp" 

und einige Attribute wie

app:layout_constraintRight_toRightOf="parent" 

Wenn Sie das Layout in Android Studio bearbeiten, werden diese Attribute tools Position Ihre Ansichten helfen, aber sie haben keine Auswirkungen auf alle, wenn Sie tatsächlich Ihre Anwendung ausgeführt werden. Die einzigen Attribute, die sich tatsächlich auf die Positionen Ihrer Ansichten auswirken, sind die Attribute layout_constraint.

Wenn Sie genau hinsehen, werden Sie sehen, dass die verschiedenen Ansichten nicht genug Beschränkungen haben, damit sie alle korrekt angeordnet werden können. Sie müssen durchgehen und die Einschränkungen hinzufügen, die Ihnen fehlen.

Answer 2

> Versuchen Sie unter: (Fügen Sie Marge wie pro Ihre Anforderung)

<?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:orientation="vertical"> 

<TextView 
    android:id="@+id/txt_pass" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="16dp" 
    android:layout_marginTop="16dp" 
    android:text="PASSENGER" 
    android:textAppearance="@style/TextAppearance.AppCompat.Caption" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 

<TextView 
    android:id="@+id/txt_jams_bond" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="8dp" 
    android:text="MR. JAMES BOND" 
    android:textSize="35sp" 
    app:layout_constraintLeft_toLeftOf="@+id/txt_pass" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/txt_pass" /> 

<ImageView 
    android:id="@+id/leftRectangle" 
    android:layout_width="60dp" 
    android:layout_height="80dp" 
    android:layout_marginTop="16dp" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/img_divider" 
    app:layout_constraintTop_toBottomOf="@+id/txt_jams_bond" 
    app:srcCompat="@mipmap/ic_launcher" /> 

<ImageView 
    android:id="@+id/middleRectangle" 
    android:layout_width="60dp" 
    android:layout_height="60dp" 
    android:layout_marginTop="8dp" 
    app:layout_constraintBottom_toTopOf="@id/img_divider" 
    app:layout_constraintLeft_toLeftOf="@+id/leftRectangle" 
    app:layout_constraintRight_toRightOf="@+id/rightRectangle" 
    app:layout_constraintTop_toBottomOf="@+id/txt_jams_bond" 
    app:srcCompat="@mipmap/ic_launcher" /> 

<ImageView 
    android:id="@+id/img_divider" 
    android:layout_width="190dp" 
    android:layout_height="3dp" 
    android:background="#808080" 
    app:layout_constraintBottom_toBottomOf="@id/leftRectangle" 
    app:layout_constraintLeft_toLeftOf="@id/leftRectangle" 
    app:layout_constraintRight_toRightOf="@id/rightRectangle" 
    app:layout_constraintTop_toTopOf="@id/leftRectangle" 
    tools:layout_editor_absoluteX="97dp" 
    tools:layout_editor_absoluteY="144dp" /> 

<ImageView 
    android:id="@+id/rightRectangle" 
    android:layout_width="60dp" 
    android:layout_height="80dp" 
    android:layout_marginTop="16dp" 
    app:layout_constraintLeft_toRightOf="@+id/img_divider" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/txt_jams_bond" 
    app:srcCompat="@mipmap/ic_launcher" /> 

<TextView 
    android:id="@+id/pass_time" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="8dp" 
    android:text="Passenger Time" 
    app:layout_constraintLeft_toLeftOf="@id/leftRectangle" 
    app:layout_constraintRight_toLeftOf="@+id/middleRectangle" 
    app:layout_constraintTop_toBottomOf="@id/leftRectangle" /> 

<TextView 
    android:id="@+id/txt_good_time" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="8dp" 
    android:text="02:10 PM" 
    android:textColor="@android:color/background_dark" 
    android:textSize="25sp" 
    app:layout_constraintLeft_toLeftOf="@id/pass_time" 
    app:layout_constraintRight_toRightOf="@id/pass_time" 
    app:layout_constraintTop_toBottomOf="@id/pass_time" /> 


<TextView 
    android:id="@+id/pass_t" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="35dp" 
    android:layout_marginTop="8dp" 
    android:text="Passenger Time" 
    app:layout_constraintLeft_toRightOf="@+id/middleRectangle" 
    app:layout_constraintRight_toRightOf="@id/rightRectangle" 
    app:layout_constraintTop_toBottomOf="@id/rightRectangle" /> 

<TextView 
    android:id="@+id/txt_bad_time" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="8dp" 
    android:text="00:15" 
    android:textColor="#FF0000" 
    android:textSize="25sp" 
    app:layout_constraintLeft_toLeftOf="@id/pass_t" 
    app:layout_constraintRight_toRightOf="@id/pass_t" 
    app:layout_constraintTop_toBottomOf="@id/pass_t" /> 

<TextView 
    android:id="@+id/txt_depart" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="8dp" 
    android:text="Department" 
    app:layout_constraintLeft_toLeftOf="@id/pass_time" 
    app:layout_constraintRight_toRightOf="@id/pass_time" 
    app:layout_constraintTop_toBottomOf="@id/txt_good_time" /> 

<TextView 
    android:id="@+id/txt_depart_time" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="8dp" 
    android:text="02:40 PM" 
    android:textColor="#008000" 
    android:textSize="25sp" 
    app:layout_constraintLeft_toLeftOf="@id/txt_depart" 
    app:layout_constraintRight_toRightOf="@id/txt_depart" 
    app:layout_constraintTop_toBottomOf="@id/txt_depart" /> 

<TextView 
    android:id="@+id/txt_arrival" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="8dp" 
    android:text="Arrival" 
    app:layout_constraintLeft_toLeftOf="@+id/pass_t" 
    app:layout_constraintRight_toRightOf="@id/pass_t" 
    app:layout_constraintTop_toBottomOf="@id/txt_bad_time" /> 

<TextView 
    android:id="@+id/txt_arrival_time" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="8dp" 
    android:text="12:40 PM" 
    android:textColor="#008000" 
    android:textSize="25sp" 
    app:layout_constraintLeft_toLeftOf="@id/txt_arrival" 
    app:layout_constraintRight_toRightOf="@id/txt_arrival" 
    app:layout_constraintTop_toBottomOf="@id/txt_arrival" /> 

<LinearLayout 
    android:id="@+id/lnr_gate" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="10dp" 
    android:background="#0000FF" 
    app:layout_constraintLeft_toLeftOf="@id/pass_time" 
    app:layout_constraintRight_toRightOf="@id/pass_t" 
    app:layout_constraintTop_toBottomOf="@id/txt_depart_time"> 

    <TextView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:gravity="center" 
     android:text="Terminal" 
     android:textColor="@android:color/background_dark" 
     android:textSize="20sp" /> 

    <TextView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:gravity="center" 
     android:text="Gate" 
     android:textColor="@android:color/background_dark" 
     android:textSize="20sp" /> 

    <TextView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:gravity="center" 
     android:text="Seat" 
     android:textColor="@android:color/background_dark" 
     android:textSize="20sp" /> 

</LinearLayout> 

<LinearLayout 
    android:id="@+id/lnr_2" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="1dp" 
    android:background="#0000FF" 
    app:layout_constraintLeft_toLeftOf="@id/lnr_gate" 
    app:layout_constraintRight_toRightOf="@id/lnr_gate" 
    app:layout_constraintTop_toBottomOf="@id/lnr_gate"> 

    <TextView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:gravity="center" 
     android:text="2" 
     android:textColor="@android:color/background_dark" 
     android:textSize="30sp" /> 

    <TextView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:gravity="center" 
     android:text="58B" 
     android:textColor="@android:color/background_dark" 
     android:textSize="30sp" /> 

    <TextView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:gravity="center" 
     android:text="24A" 
     android:textColor="@android:color/background_dark" 
     android:textSize="30sp" /> 

</LinearLayout> 

<ImageView 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:srcCompat="@mipmap/ic_launcher" 
    android:layout_marginTop="10dp" 
    app:layout_constraintLeft_toLeftOf="@id/lnr_2" 
    app:layout_constraintRight_toRightOf="@id/lnr_2" 
    app:layout_constraintTop_toBottomOf="@id/lnr_2" 
    />