约束布局 - Android - 避免重叠

Question

我有一个约束布局重叠的问题。基本上，我在左边放置了一张图片，在右边放置了一个文本视图。我试图让文本视图中的文本出现在屏幕中央，它也按预期出现了。但是当文本大小太大时，文本视图会与图像视图重叠。

如果我将TextView的左侧约束设置为ImageView的右侧，则不会发生重叠。但是当文本很小时，文本不会出现在屏幕中央。

我尝试从这个帖子实现解决方案。但是对我来说没有用。请帮助我解决这个问题。

 <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imgBack"
            android:layoutWidth="wrap_content"
            android:layoutHeight="match_parent"
            android:contentDescription="@null"
            android:src="@drawable/image"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        
        <TextView
            android:id="@+id/tvUserName"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:ellipsize="end"
            android:text="I have a problem when the text is so big. It's overlapping"
            android:fontFamily="@font/proxima_nova_semibold"
            android:gravity="center"
            android:lines="1"
            android:textColor="@color/white"
            android:textSize="@dimen/header_sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
           />


    </androidx.constraintlayout.widget.ConstraintLayout>

- Sethuraman Srinivasan

---

2023年有任何解决方案吗？ - ivan8m8

Answer 1

请尝试这个解决方案。

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imgBack"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tvUserName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/backgrounds/scenic" />

    <TextView
        android:id="@+id/tvUserName"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:ellipsize="end"
        android:gravity="center"
        android:lines="1"
        android:text="I have a problem when the text is so big. It's overlapping"
        android:textColor="@color/white"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

- shafayat hossain

---

我之所以为TextView设置了app:layout_constraintStart_toStartOf="parent"是因为当文本很小的时候，我希望文本出现在屏幕中间。问题是TextView重叠在ImageView上面，而不是反过来。 - Sethuraman Srinivasan

当你将文本设置为居中，并且文本很大时，就没有空间来显示图像。如果你想同时显示图像视图和文本视图，并且将文本居中，则必须设置文本视图的固定宽度。如果你同意，我会更新答案。 - shafayat hossain

Answer 2

不再重叠了：

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

    <ImageView
        android:id="@+id/imgBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvUserName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="I have a problem when the text is so big. It's overlapping"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imgBack"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

除了其他用户提到的问题，比如 app:layout_constraintStart_toStartOf="parent" 或者对 ImageView 使用 wrap_content 等属性，还有这些属性：

        android:layoutWidth="wrap_content"
        android:layoutHeight="match_parent"

打错字了。

- ʍѳђઽ૯ท

---

如果文本很小，它会出现在屏幕中央吗（而不是TextView）？我认为较小的文本不会位于屏幕中央。它会向右倾斜。 - Sethuraman Srinivasan