Android中ConstraintLayout视图重叠/被挤出屏幕问题求助

刚从iOS转Android用ConstraintLayout确实容易踩坑，我帮你排查下布局里的关键问题，先对比下你的效果：

预期效果：

实际效果：

核心问题分析 #

你的布局里有两处直接导致重叠和挤压的错误：

1. resetButton的顶部约束错误
   你给resetButton设置的app:layout_constraintTop_toBottomOf="@id/previousButton"完全错了——它应该连到newButton的底部，现在这个约束让resetButton和newButton都挂在previousButton的底部，直接重叠在一起。

2. 按钮组缺少垂直margin
   previousButton和mapView、newButton之间没有设置margin，加上resetButton的错误约束，导致整个按钮组的垂直空间被挤压，最终startButton被挤出屏幕边缘。

另外还有个小细节：你的垂直Guideline命名用了guideHorz（水平），改成guideVert（垂直）会更规范，虽然不影响功能，但可读性更好。

修正后的布局代码 #

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".LocationFragment">

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/guideVert125"
        app:layout_constraintGuide_percent="0.125"/>

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/guideVert875"
        app:layout_constraintGuide_percent="0.875"/>

    <TextView
        style="@style/Label"
        android:id="@+id/currentSelectionLabel"
        android:layout_marginBottom="21dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="11dp"
        android:text="@string/current_selection"
        app:layout_constraintBottom_toTopOf="@id/locationLabel"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        style="@style/Label"
        android:id="@+id/locationLabel"
        android:layout_marginLeft="41dp"
        android:text="@string/none"
        app:layout_constraintBottom_toTopOf="@id/mapView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/currentSelectionLabel"/>

    <com.google.android.gms.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        app:layout_constraintBottom_toTopOf="@id/previousButton"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/locationLabel"/>

    <Button
        style="@style/RoundedButton"
        android:id="@+id/previousButton"
        android:layout_marginTop="8dp"
        android:text="@string/previous"
        app:layout_constraintBottom_toTopOf="@id/newButton"
        app:layout_constraintLeft_toLeftOf="@id/guideVert125"
        app:layout_constraintRight_toRightOf="@id/guideVert875"
        app:layout_constraintTop_toBottomOf="@id/mapView"/>

    <Button
        style="@style/RoundedButton"
        android:id="@+id/newButton"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/new_location"
        app:layout_constraintBottom_toTopOf="@id/resetButton"
        app:layout_constraintLeft_toLeftOf="@id/previousButton"
        app:layout_constraintRight_toRightOf="@id/previousButton"
        app:layout_constraintTop_toBottomOf="@id/previousButton"/>

    <Button
        style="@style/RoundedButton"
        android:id="@+id/resetButton"
        android:layout_marginBottom="8dp"
        android:text="@string/reset"
        app:layout_constraintBottom_toTopOf="@id/startButton"
        app:layout_constraintLeft_toLeftOf="@id/previousButton"
        app:layout_constraintRight_toRightOf="@id/previousButton"
        app:layout_constraintTop_toBottomOf="@id/newButton"/>

    <com.company.ui.ImageButton
        android:id="@+id/startButton"
        android:layout_width="240dp"
        android:layout_height="90dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="11dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:src="@drawable/start"
        app:text="@string/get_started"/>

</android.support.constraint.ConstraintLayout>

iOS转Android ConstraintLayout的小提醒 #

• iOS Auto Layout里常用优先级处理约束冲突，但Android ConstraintLayout更看重完整的约束链，比如你的按钮组要形成mapView -> previousButton -> newButton -> resetButton -> startButton的垂直关联，每个视图的顶部都连到上一个的底部，这样空间才会合理分配。
• 用0dp（match constraints）时，一定要确保对应的左右/上下约束都设置到位，不然视图很容易挤压或消失。

内容的提问来源于stack exchange，提问作者Cody Harness