使用ConstraintLayout时,视图会出错

时间:2017-07-22 09:49:27

标签: android android-constraintlayout

我在约束布局练习但我的问题是当我使用约束布局并调整我的布局中的所有视图时,它似乎是在错误的地方运行Android模拟器我如何修复它或我如何确保我的布局将出现在模拟器中 这里是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>

这里是模拟器(左侧)和activitymain.xml(右侧)的照片

the left photo is android emulator and the right is mylayout

2 个答案:

答案 0 :(得分:0)

enter image description here&GT;请尝试以下操作:(根据您的要求添加保证金)

<?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"
    />

答案 1 :(得分:0)

以这两个观点为例:

<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" />

他们每个人都有一些属性,如

    tools:layout_editor_absoluteY="179dp"

和一些属性,如

    app:layout_constraintRight_toRightOf="parent"

当您在AndroidStudio中编辑布局时,这些tools属性将有助于定位您的观看次数,但在您实际运行应用时,它们完全没有效果。实际影响您观看次数的唯一属性&#39;职位是layout_constraint属性。

如果你仔细观察,你会发现各种观点都没有足够的限制,所有观点都可以正确布局。您必须完成并添加您缺少的约束。