如何防止imageview重叠？

时间：2018-09-09 08:50:51

标签： android android-layout textview imageview android-constraintlayout

我不知道如何阻止此image重叠其他两个TextView。我需要两个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" />

1 个答案:

答案 0 :(得分：0)

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

  

android：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" />
相关问题
最新问题