Question

我一直在使用ConstraintLayouts在Android Studio中构建我的用户界面。但是我遇到了一个问题，我在一个孩子ConstraintLayout的底部得到一些神秘的额外边缘，这会使一切都不对齐。

正如您在此gif中看到的，只要我将EditText约束到ImageView，ConstraintLayout底部就会出现一个大的边距。我似乎无法弄清楚为什么会这样。

因此，只要我将任何其他ConstraintLayouts约束到狡猾的ConstraintLayout，所有对齐都会出错，元素不再居中，如下面的gif所示。

以下是整个布局的代码（狡猾的形式有id＆＃39; createTaskViewFormContainer＆＃39;）：

<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:animateLayoutChanges="true"
    android:background="#E8ECEE"
    tools:context="apps.cal.lonesafe.CreateTaskFragment.CreateTaskView">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/createTaskViewFormContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:background="#ffffff"
        android:elevation="2dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/createTaskViewTeamName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:elevation="2dp"
            android:text="New Task"
            android:textColor="#000000"
            android:textSize="25dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/createTaskViewLabelIcon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginStart="32dp"
            android:src="@drawable/ic_label_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewTaskNameEditText"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewTaskNameEditText" />

        <EditText
            android:id="@+id/createTaskViewTaskNameEditText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="32dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="32dp"
            android:background="@drawable/edittext_alignment_background_grey"
            android:elevation="2dp"
            android:hint="Task Name"
            android:textSize="25dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/createTaskViewLabelIcon"
            app:layout_constraintTop_toBottomOf="@+id/createTaskViewTeamName" />

        <ImageView
            android:id="@+id/createTaskViewClockIcon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginBottom="8dp"
            android:layout_marginStart="32dp"
            android:layout_marginTop="8dp"
            android:src="@drawable/ic_clock_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewTimePickerTextView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewTimePickerTextView" />

        <TextView
            android:id="@+id/createTaskViewTimePickerTextView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="32dp"
            android:background="@drawable/edittext_alignment_background_grey"
            android:elevation="2dp"
            android:text="00h 00m"
            android:textColor="#94989a"
            android:textSize="25dp"
            app:layout_constraintEnd_toEndOf="@+id/createTaskViewTaskNameEditText"
            app:layout_constraintStart_toEndOf="@+id/createTaskViewClockIcon"
            app:layout_constraintTop_toBottomOf="@+id/createTaskViewTaskNameEditText" />

        <Button
            android:id="@+id/createTaskViewRecordMessageButton"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginTop="32dp"
            android:background="@drawable/button_blue_roundsquare"
            android:text="Record Message"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="18dp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="@+id/createTaskViewTimePickerTextView"
            app:layout_constraintStart_toStartOf="@+id/createTaskViewClockIcon"
            app:layout_constraintTop_toBottomOf="@+id/createTaskViewTimePickerTextView" />

    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout
        android:id="@+id/createTaskViewTeamSettingsLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:background="#ffffff"
        android:elevation="2dp"
        app:layout_constraintBottom_toTopOf="@+id/createTaskViewPanicButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/createTaskViewStartButton">

        <View
            android:id="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            android:layout_width="1dp"
            android:layout_height="1dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/createTaskViewGuardianSettingsFirstPinIcon"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginBottom="16dp"
            android:layout_marginEnd="24dp"
            android:layout_marginTop="16dp"
            android:src="@drawable/ic_mic_32dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/createTaskViewGuardianSettingsSecondPinIcon"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/createTaskViewGuardianSettingsSecondPinIcon"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginEnd="11.5dp"
            android:src="@drawable/ic_checkin_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            app:layout_constraintEnd_toStartOf="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewGuardianSettingsPinIconCentreView" />

        <ImageView
            android:id="@+id/createTaskViewGuardianSettingsThirdPinIcon"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginStart="11.5dp"
            android:src="@drawable/ic_pin_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            app:layout_constraintStart_toEndOf="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewGuardianSettingsPinIconCentreView" />

        <ImageView
            android:id="@+id/createTaskViewGuardianSettingsFifthPinIcon"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginStart="24dp"
            android:src="@drawable/ic_alert_pin_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewGuardianSettingsThirdPinIcon"
            app:layout_constraintStart_toEndOf="@+id/createTaskViewGuardianSettingsThirdPinIcon"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewGuardianSettingsThirdPinIcon" />

    </android.support.constraint.ConstraintLayout>

    <Button
        android:id="@+id/createTaskViewStartButton"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:background="@drawable/button_blue_roundsquare"
        android:elevation="2dp"
        android:text="Start Task"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="26dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/createTaskViewFormContainer" />

    <Button
        android:id="@+id/createTaskViewPanicButton"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginStart="24dp"
        android:background="@drawable/button_red_roundsquare_unfocused"
        android:elevation="2dp"
        android:text="Request Help"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="26dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <include
        android:id="@+id/voiceRecordOverlayLayout"
        layout="@layout/overlay_voice_record"
        android:visibility="gone" />

    <include
        android:id="@+id/teamSettingsOverlayLayout"
        layout="@layout/overlay_team_settings"
        android:visibility="gone" />

    <include
        android:id="@+id/submitCreateTaskOverlayLayout"
        layout="@layout/overlay_submit_create_task"
        android:visibility="gone" />

    <include
        android:id="@+id/updatingTeamRulesOverlayLayout"
        layout="@layout/overlay_updating_team_rules"
        android:visibility="gone" />

</android.support.constraint.ConstraintLayout>

有没有人遇到过类似的问题？

我如何设置布局有什么问题？

我对如何修复它缺乏想法。谢谢！

Answer 1

我使用ConstraintLayout 1.0.2重现了这种行为。但是，只需将gradle文件中的依赖项更改为最新版本（1.1.0-beta6）

'com.android.support.constraint:constraint-layout:1.1.0-beta6'

自动解决问题，无需对XML进行任何更改。不必要的空间消失，视图定位正确。

ConstraintLayout中出现额外的边距

1 个答案: