首页 > 解决方案 > 如何让两个相互对齐的TextViews成为“wrap_content”,但在ConstraintLayout的约束范围内而不会溢出?

问题描述

我有两个 textViews 彼此相邻对齐: 这是图像,我现在不允许嵌入它

如果我尝试增加第一个文本视图的文本,我当前的布局工作正常,它应该保持在约束范围内。这是它的外观,这很好。

但是当我尝试做与此完全相反的事情时,即增加第二个 textView 的宽度,我希望第一个保持原位,但同样的事情不会发生并且它会溢出。像这样越界了。

所以我无法理解我做错了什么?我希望两个 textView 在约束范围内占用它们可用的任何空间。有人可以指导我哪里出错了吗?两个 textView 相互链接。

这是我当前的 XML 代码。

<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="match_parent"
    android:background="@color/colorPrimaryBackground">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.04" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.96" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.04" />

    <TextView
        android:id="@+id/tvStart"
        style="@style/StyleRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Text A"
        android:textSize="20sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toStartOf="@id/tvEnd"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="@id/guidelineStart"
        app:layout_constraintTop_toTopOf="@id/guidelineTop" />

    <TextView
        android:id="@+id/tvEnd"
        style="@style/StyleRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Text B Text B Text B Text B Text B T"
        app:layout_constrainedWidth="true"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
        app:layout_constraintStart_toEndOf="@id/tvStart"
        app:layout_constraintTop_toTopOf="@id/guidelineTop" />

</androidx.constraintlayout.widget.ConstraintLayout>

标签: androidandroid-layoutandroid-constraintlayoutandroid-design-library

解决方案


你可以试试这样的

<?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/tvStart"
    style="@style/TextAppearance.AppCompat.Body1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:ellipsize="end"
    android:maxLines="1"
    app:layout_constraintEnd_toStartOf="@id/tvEnd"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:text="Text A Text A Text" />

  <TextView
    android:id="@+id/tvEnd"
    style="@style/TextAppearance.AppCompat.Body1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:ellipsize="end"
    android:maxLines="1"
    app:layout_constraintStart_toEndOf="@id/tvStart"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    tools:text="Text B Text B Text B Text B Text B T" />

</androidx.constraintlayout.widget.ConstraintLayout>

这是布局的样子。您可以将layout_widthfrom更改为0dptowrap_content并查看 2 个视图之间的工作方式,以将其放在您想要的位置。

截屏


推荐阅读