约束布局导致视图重叠答案

【问题标题】：Constraint Layout is causing views to overlap约束布局导致视图重叠
【发布时间】：2018-05-31 16:43:06
【问题描述】：

我正在尝试使用 ConstraintLayout 在 Android 中创建一个视图，但我遇到了很多视图重叠或被推离屏幕的问题。我想很多可能是因为我已经习惯了 iOS 的限制，而且我正在考虑它们。这是我的代码：

<?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/guideHorz125"
        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/guideHorz875"
        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:text="@string/previous"
        app:layout_constraintBottom_toTopOf="@id/newButton"
        app:layout_constraintLeft_toLeftOf="@id/guideHorz125"
        app:layout_constraintRight_toRightOf="@id/guideHorz875"
        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: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/previousButton"/>

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

第一张是我想看的，第二张是我得到的。

【问题讨论】：

标签： android android-constraintlayout

【解决方案1】：

尝试改变

 <Button style="@style/RoundedButton"
    android:id="@+id/resetButton"
    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/previousButton"/>

到

 <Button style="@style/RoundedButton"
    android:id="@+id/resetButton"
    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"/>

【讨论】：

这有点帮助。现在 3 个按钮的间距适当，但地图视图仍在将其他所有内容推离屏幕。我想将纵横比保持在 16:9，但是如果需要的话，有没有办法让它缩小，以便其他一切都适合？
我不知道您是否可以将layout_constraintHeight_percent 属性与MapView 一起使用。但我偶然发现了这里提到的另一个选项stackoverflow.com/a/40422223/8560690

【解决方案2】：

使用下面的布局：

<?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.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginTop="4dp"
                android:text="Current Selection"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="None"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.184"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView3" />

            <com.google.android.gms.maps.MapView
                android:id="@+id/mapView"
                android:layout_width="311dp"
                android:layout_height="114dp"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView4" />

            <Button
                android:id="@+id/button54"
                android:layout_width="296dp"
                android:layout_height="36dp"
                android:layout_marginTop="52dp"
                android:text="Button"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/mapView" />

            <Button
                android:id="@+id/button55"
                android:layout_width="296dp"
                android:layout_height="36dp"
                android:layout_marginTop="96dp"
                android:text="Button"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/mapView" />

            <Button
                android:id="@+id/button56"
                android:layout_width="296dp"
                android:layout_height="36dp"
                android:layout_marginTop="8dp"
                android:text="Button"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/mapView" />

            <ImageButton
                android:id="@+id/imageButton"
                android:layout_width="293dp"
                android:layout_height="116dp"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/button55"
                app:layout_constraintVertical_bias="0.529"
                app:srcCompat="@drawable/googleg_disabled_color_18" />
        </android.support.constraint.ConstraintLayout>

    </android.support.v4.widget.NestedScrollView>

</android.support.constraint.ConstraintLayout>

【讨论】：