如何防止imageview重叠？

Question

我无法弄清楚如何阻止这个image重叠其他两个TextViews。我需要两个TextView来保持它们的位置，并且ImageView在它们之间被约束而不被裁剪。

所有这些视图都经历了不同的可见性状态（可见/不可见/消失），因此我尝试添加障碍，但这不起作用。我试过改变边距，填充，约束等。

顶部的TextView是tv_question。底部的TextView是tv_answer。两个TextView之间是两个在布局中位于彼此顶部的ImageView。但是，一次只显示一个ImageView。

Layout.xml

<?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.design.widget.FloatingActionButton
    android:id="@+id/fab_exit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:src="@drawable/ic_exit"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

<TextView
    android:id="@+id/tv_question"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="64dp"
    android:textAlignment="textStart"
    android:textSize="20sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Barrier
    android:id="@+id/barrier_question"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/tv_question"
    app:barrierDirection="top"
    app:barrierAllowsGoneWidgets="false"
    app:constraint_referenced_ids="iv_question, iv_answer" />

<ImageView
    android:id="@+id/iv_question"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:paddingBottom="16dp"
    android:paddingEnd="16dp"
    android:paddingStart="16dp"
    android:paddingTop="16dp"
    android:scaleType="centerInside"
    app:layout_constraintBottom_toTopOf="@+id/tv_answer"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv_question" />


<ImageView
    android:id="@+id/iv_answer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:paddingBottom="16dp"
    android:paddingEnd="16dp"
    android:paddingStart="16dp"
    android:paddingTop="16dp"
    android:scaleType="centerInside"
    app:layout_constraintBottom_toTopOf="@+id/tv_answer"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv_question" />

<android.support.constraint.Barrier
    android:id="@+id/barrier_answer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@id/tv_answer"
    app:barrierDirection="bottom"
    app:barrierAllowsGoneWidgets="false"
    app:constraint_referenced_ids="iv_question, iv_answer"/>

<TextView
    android:id="@+id/tv_answer"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="112dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:textAlignment="viewStart"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/tv_complete"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="@string/quiz_complete"
    android:textAlignment="center"
    android:textSize="30sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/btn_showAnswer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="32dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:text="@string/quiz_showAnswer"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btn_nextQuestion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="32dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:text="@string/quiz_nextQuestion"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btn_Restart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="32dp"
    android:layout_marginStart="64dp"
    android:text="@string/quiz_restart"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btn_Exit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="32dp"
    android:layout_marginEnd="64dp"
    android:text="@string/quiz_exit"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

Answer 1

尝试将两个Imageview的高度设置为match_constraint

机器人：layout_height = “0dp”

完整代码：

    <?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.design.widget.FloatingActionButton
    android:id="@+id/fab_exit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:src="@drawable/ic_exit"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

<TextView
    android:id="@+id/tv_question"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="64dp"
    android:textAlignment="textStart"
    android:textSize="20sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Barrier
    android:id="@+id/barrier_question"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/tv_question"
    app:barrierDirection="top"
    app:barrierAllowsGoneWidgets="false"
    app:constraint_referenced_ids="iv_question, iv_answer" />

<ImageView
    android:id="@+id/iv_question"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:paddingBottom="16dp"
    android:paddingEnd="16dp"
    android:paddingStart="16dp"
    android:paddingTop="16dp"
    android:scaleType="centerInside"
    app:layout_constraintBottom_toTopOf="@+id/tv_answer"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv_question" />


<ImageView
    android:id="@+id/iv_answer"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:paddingBottom="16dp"
    android:paddingEnd="16dp"
    android:paddingStart="16dp"
    android:paddingTop="16dp"
    android:scaleType="centerInside"
    app:layout_constraintBottom_toTopOf="@+id/tv_answer"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv_question" />

<android.support.constraint.Barrier
    android:id="@+id/barrier_answer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@id/tv_answer"
    app:barrierDirection="bottom"
    app:barrierAllowsGoneWidgets="false"
    app:constraint_referenced_ids="iv_question, iv_answer"/>

<TextView
    android:id="@+id/tv_answer"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="112dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:textAlignment="viewStart"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/tv_complete"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="@string/quiz_complete"
    android:textAlignment="center"
    android:textSize="30sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/btn_showAnswer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="32dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:text="@string/quiz_showAnswer"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btn_nextQuestion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="32dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:text="@string/quiz_nextQuestion"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btn_Restart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="32dp"
    android:layout_marginStart="64dp"
    android:text="@string/quiz_restart"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btn_Exit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="32dp"
    android:layout_marginEnd="64dp"
    android:text="@string/quiz_exit"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />