如何防止imageview重叠?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何防止imageview重叠?相关的知识,希望对你有一定的参考价值。

我无法弄清楚如何阻止这个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" />

答案

尝试将两个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" />

以上是关于如何防止imageview重叠?的主要内容,如果未能解决你的问题,请参考以下文章

片段中的视频视图与另一个片段重叠

如何修复重叠的片段

如何在 Android 中单击 ImageView 时从一个片段移动到另一个片段?

自定义ImageView类与屏幕中的其他元素重叠

如何防止文本与页面底部的元素重叠

如何防止收缩包装的容器滚动条与其内容重叠?