Question

我有ConstraintLayout，其中有两个TextView：

<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">
    <TextView
        android:id="@+id/first"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/second"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/first"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

我想将第一个放置在父容器的左上角，并将第二个放置在父容器的右上角。但是两个textview都可以具有任意长度的文本。当第一个文本很长时，它将与第二个文本视图重叠。我可以通过在LinearLayout中包装两个文本视图来解决此问题。但是在我看来，这种方式并不优雅。也许还有另一种方法吗？我的意思是说ConstraintLayout的功能

Answer 1

首先，从宽度中删除wrap_content，因为这会使左右约束无关紧要。在其位置使用0dp使其遵守约束的规则。

然后在视图之间创建一条水平链，并将其设置为spread，以使视图在任何时候都不会重叠，并且它们始终都位于屏幕的边缘。

最后，相应地对齐文本，以使左边的文本与视图的开始对齐，而右边的文本与视图的末尾对齐。在下面的示例中，您可以看到，无论文本多长，视图都不会重叠并保持在侧面。

注意：为了迎合具有不同文本方向的设备，使用开始/结束约束（如在我的代码中）代替左/右是更好的做法。您还可以通过添加适当的边距来修改下面的代码，以使文本离屏幕边缘更远。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <TextView
        android:id="@+id/first"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textAlignment="viewStart"
        app:layout_constraintEnd_toStartOf="@+id/second"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@tools:sample/lorem/random" />

    <TextView
        android:id="@+id/second"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textAlignment="viewEnd"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toEndOf="@id/first"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@tools:sample/lorem/random" />

</androidx.constraintlayout.widget.ConstraintLayout>

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">
    <TextView
        android:id="@+id/first"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="chauhan"/>
    <TextView
        android:id="@+id/second"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="mehul"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

<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">
    <TextView
        android:id="@+id/first"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/second"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/first"
        app:layout_constraintRight_toRightOf="parent"
        android:gravity="right"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

这样，第二个TextView肯定不会与第一个重叠，但是可能发生的情况是第一个TextView太长，因此第二个TextView没有位置。如果可能的话，我建议将maxWidth设置为第一个TextView，以便在最坏的情况下为第二个TextView留一些空间。

我也将重力添加到第二个重力中，以将文本保留在TextView的右侧。

Answer 4

<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">
    <TextView
        android:id="@+id/first"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="0dp"
        app:layout_constraintRight_toLeftOf="@+id/second"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/second"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/first"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 5

 <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

          <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/tvFirst"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toStartOf="@+id/tvSecond"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/tvSecond"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/tvFirst"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>

一个Textview与ConstraintLayout中的另一个重叠

5 个答案: