ConstraintLayout 中出现额外的边距
Extra margin appearing in ConstraintLayout
我一直在使用 ConstraintLayouts 在 Android Studio 中构建我的用户界面。但是我遇到了一个问题，我在子 ConstraintLayout 的底部得到了一些神秘的额外边距，这使得所有内容都没有对齐。
如您在此 gif 中所见，只要我将 EditText 约束到 ImageView，ConstraintLayout 的底部就会出现较大的边距。我似乎无法弄清楚为什么会这样。
因此，一旦我将任何其他 ConstraintLayout 约束到狡猾的 ConstraintLayout，所有对齐都会出错，元素不再居中，如下面的 gif 所示。
这是整个布局的代码（狡猾的形式有 id 'createTaskViewFormContainer'）：
<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>
有没有人遇到过类似的问题？
我的布局设置有问题吗？
我不知道如何修复它。谢谢！
我使用 ConstraintLayout 1.0.2 重现了此行为。但是，只是将 gradle 文件中的依赖项更改为最新版本 (1.1.0-beta6)
'com.android.support.constraint:constraint-layout:1.1.0-beta6'
自动解决了问题，无需对 XML 进行任何更改。不必要的 space 消失了，视图定位正确。
我一直在使用 ConstraintLayouts 在 Android Studio 中构建我的用户界面。但是我遇到了一个问题，我在子 ConstraintLayout 的底部得到了一些神秘的额外边距，这使得所有内容都没有对齐。
如您在此 gif 中所见，只要我将 EditText 约束到 ImageView，ConstraintLayout 的底部就会出现较大的边距。我似乎无法弄清楚为什么会这样。
因此，一旦我将任何其他 ConstraintLayout 约束到狡猾的 ConstraintLayout，所有对齐都会出错，元素不再居中，如下面的 gif 所示。
这是整个布局的代码（狡猾的形式有 id 'createTaskViewFormContainer'）：
<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>
有没有人遇到过类似的问题？
我的布局设置有问题吗？
我不知道如何修复它。谢谢！
我使用 ConstraintLayout 1.0.2 重现了此行为。但是，只是将 gradle 文件中的依赖项更改为最新版本 (1.1.0-beta6)
'com.android.support.constraint:constraint-layout:1.1.0-beta6'
自动解决了问题，无需对 XML 进行任何更改。不必要的 space 消失了，视图定位正确。