时间戳

首页 > 解决方案 > 除非重叠文本视图，否则是否可以在约束布局中将图标居中

android - 除非重叠文本视图，否则是否可以在约束布局中将图标居中

问题描述

我试图将一个图标保持在约束布局内的中心，同时使其始终停留在约束布局底部的某个文本视图上（这是我实际问题的一个非常简化的版本，但同样代表了问题）。底部的文本可以大到足以越过布局的中心，在这种情况下，我希望图标向上移动。

为了将图标的底部与中心和文本视图的顶部相关联，我在布局的中心使用了一个指南，并使用了一个障碍来捕捉文本视图的顶部或指南的顶部，以较高者为准。

问题是图标的一半位于指南下方，因此文本仍然与图标重叠。只有当文本视图的顶部超过指南时，图标才会向上移动。或者，我可以将图标的底部设置在指南的顶部，这样文本视图就不会重叠，但图标并不完全居中。

这是包含所有项目的布局的当前状态：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_play"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/barrier"
        app:layout_constraintBottom_toBottomOf="@id/barrier"
        />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="guide,text" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guide"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Temporibus ea quasi ut dolores quae qui. Et dolor sit voluptatem fugit. Possimus nulla molestias maxime. Distinctio perferendis veniam modi sint numquam dolores esse. Minus consequuntur mollitia asperiores praesentium non minus. Temporibus ea quasi ut dolores quae qui. Et dolor sit voluptatem fugit. Et dolor sit voluptatem fugit."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

我找到了一个（不是很好）的解决方案，它为文本视图添加了图像视图一半大小的顶部填充。我宁愿避免这样的黑客攻击，而是找到一个好的实现。可能吗？

为了帮助理解这个问题，这里有一些来自 Android Studio 中的 UI 设计器的图片：

短文本的有希望的结果： 图标居中，短文本不重叠

当文本很长时会导致问题： 图标向上移动，长文本重叠

如果文本较短时图标未居中： 图标不居中，短文本不重叠

当文本很长时，我们不会遇到问题： 图标向上移动，长文本不重叠

标签： androidandroid-constraintlayout

解决方案

将paddingTopof设置TextView为的一半ImageView

<TextView
    android:id="@+id/text"
    android:paddingTop="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Temporibus ea quasi ut dolores quae qui. Et dolor sit voluptatem fugit. Possimus nulla molestias maxime. Distinctio perferendis veniam modi sint numquam dolores esse. Minus consequuntur mollitia asperiores praesentium non minus. Temporibus ea quasi ut dolores quae qui. Et dolor sit voluptatem fugit. Et dolor sit voluptatem fugit."
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

推荐阅读