如果两个水平文本视图一起小于某个宽度，则使它们保持在左侧，但如果它们比宽度长，则将左视图椭圆化？

Posted 2023-04-18

【中文标题】如果两个水平文本视图一起小于某个宽度，则使它们保持在左侧，但如果它们比宽度长，则将左视图椭圆化？

【英文标题】：Make two horizontal textviews stay left if together they are less than a certain width, but ellipsize left view if they'll be longer than the width?

【发布时间】：2021-10-20 19:37:44

【问题描述】：

我正在寻找的行为如下。想象一下括号 [] 的大小与 max_width 相同。

当text1 和text2 加起来小于max_width 时，比如100dp：

[text1short text2short --空格--]

当text1 和text2 组合大于max_width 时，text1 为椭圆形：

[text1sho...text2looooooooooooooooong]

这是我目前所拥有的，并且它有效，但是有没有办法只使用一个布局来完成这个？

<FrameLayout
      android:id="@+id/container"
      android:layout_
      android:layout_>

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="horizontal">

      <TextView
          android:id="@+id/text1"
          android:layout_
          android:layout_
          android:layout_weight="1"
          android:ellipsize="end"
          android:maxLines="1" />

      <TextView
          android:id="@+id/text2"
          android:layout_
          android:layout_
          android:maxLines="1"/>

    </LinearLayout>
</FrameLayout>

【问题讨论】：

我建议对此进行调查 ConstraintLayout 和 Guidelines。

【参考方案1】：

ConstraintLayout 是要走的路。下面是满足您需要的布局。此布局中包含一些关键的 ConstraintLayout 概念，例如链和指南。具有受限宽度小部件的链是关键。该指南对这种布局不太重要，只是限制 TextViews 可以传播多远的一种方式。

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_
    android:layout_
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvLeft"
        android:layout_
        android:layout_
        android:layout_marginStart="16dp"
        android:layout_marginEnd="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Short left view."
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tvRight"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvRight"
        android:layout_
        android:layout_
        android:layout_marginEnd="16dp"
        android:maxLines="1"
        android:text="Short right"
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="@id/tvLeft"
        app:layout_constraintEnd_toStartOf="@id/guideline"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/tvLeft"
        app:layout_constraintTop_toTopOf="@id/tvLeft" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_
        android:layout_
        android:orientation="vertical"
        app:layout_constraintGuide_begin="300dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

这是内容短的布局：

并且左侧TextView的内容很长：

图片来自 Android Studio 布局设计器。

【讨论】：

感谢 Cheticamp，我最终使用了与您的解决方案非常相似的东西，但没有使用指南。我使用了打包的链式约束布局，并为 text1 文本字段添加了layout_constraintWidth_default=wrap，效果很好。我在这个文档中找到了它：developer.android.com/training/…

【参考方案2】：

我使用了打包的链式约束布局，并为 text1 文本字段添加了layout_constraintWidth_default=wrap，效果很好。我在这个文档中找到了它：https://developer.android.com/training/constraint-layout#adjust-the-view-size

  <TextView
      android:id="@+id/text1"
      android:layout_
      android:layout_
      android:ellipsize="end"
      android:maxLines="1"
      app:layout_constraintHorizontal_weight="1"
      app:layout_constraintEnd_toStartOf="@+id/text2"
      app:layout_constraintHorizontal_bias="0"
      app:layout_constraintHorizontal_chainStyle="packed"
      app:layout_constraintWidth_default="wrap"
      app:layout_constraintStart_toEndOf="@+id/thing_on_the_left"
      app:layout_constraintTop_toTopOf="parent"/>

  <TextView
      android:id="@+id/text2"
      android:layout_
      android:layout_
      android:maxLines="1"
      app:layout_constraintEnd_toStartOf="@+id/thing_on_the_right"
      app:layout_constraintStart_toEndOf="@+id/text1"
      app:layout_constraintTop_toTopOf="parent" />