How to shrink first TextView rather than second one if 2 TextView have long text in ConstraintLayout?

huangapple go评论81阅读模式
英文:

How to shrink first TextView rather than second one if 2 TextView have long text in ConstraintLayout?

问题

我想要两个连接在一起的 TextView。如果第一个包含更多文本,它应该会收缩。
同时,第二个 TextView 应始终显示所有文本,不能收缩。它应该附加在父视图的末尾,不应超出边界。
我该如何实现这个?

我尝试过:

<?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="40dp"
android:paddingTop="2dp"
android:paddingBottom="2dp">
<com.makeramen.roundedimageview.RoundedImageView
    android:id="@+id/avatarImg"
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:layout_marginStart="4dp"
    android:scaleType="centerCrop"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:riv_oval="true"
    tools:src="@mipmap/avatar_test" />

<TextView
    android:id="@+id/name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:ellipsize="end"
    android:lines="1"
    android:textColor="@color/peach_red"
    android:textSize="12dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toEndOf="@+id/avatarImg"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" />

<TextView
    android:id="@+id/content"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:textColor="@color/black1"
    android:textSize="12dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/name"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="BBBBBBBBBBBBBBBBBBBBBB" />
</androidx.constraintlayout.widget.ConstraintLayout>

结果如下图所示:

How to shrink first TextView rather than second one if 2 TextView have long text in ConstraintLayout?

编辑:

根据 @Gavin Wright 的答案,如果文本尺寸较小,我还想让第二个 TextView 紧密绑定到第一个 TextView。
这是一个难点,我想实现这一点... 抱歉没有事先提到...

How to shrink first TextView rather than second one if 2 TextView have long text in ConstraintLayout?

英文:

I want 2 TextView connected together. And if the first contains more text, it should shrink.
At the same time, the 2nd one should always show all the text and can not shrink. It should append to the end of the parent view, should not go out of bound
How can I achieve this?

What I tried

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
xmlns:tools=&quot;http://schemas.android.com/tools&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;40dp&quot;
android:paddingTop=&quot;2dp&quot;
android:paddingBottom=&quot;2dp&quot;&gt;
&lt;com.makeramen.roundedimageview.RoundedImageView
    android:id=&quot;@+id/avatarImg&quot;
    android:layout_width=&quot;24dp&quot;
    android:layout_height=&quot;24dp&quot;
    android:layout_marginStart=&quot;4dp&quot;
    android:scaleType=&quot;centerCrop&quot;
    app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
    app:layout_constraintStart_toStartOf=&quot;parent&quot;
    app:layout_constraintTop_toTopOf=&quot;parent&quot;
    app:riv_oval=&quot;true&quot;
    tools:src=&quot;@mipmap/avatar_test&quot; /&gt;

&lt;TextView
    android:id=&quot;@+id/name&quot;
    android:layout_width=&quot;0dp&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:layout_marginStart=&quot;8dp&quot;
    android:ellipsize=&quot;end&quot;
    android:lines=&quot;1&quot;
    android:textColor=&quot;@color/peach_red&quot;
    android:textSize=&quot;12dp&quot;
    app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
    app:layout_constraintStart_toEndOf=&quot;@+id/avatarImg&quot;
    app:layout_constraintTop_toTopOf=&quot;parent&quot;
    tools:text=&quot;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&quot; /&gt;

&lt;TextView
    android:id=&quot;@+id/content&quot;
    android:layout_width=&quot;0dp&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:ellipsize=&quot;end&quot;
    android:lines=&quot;1&quot;
    android:textColor=&quot;@color/black1&quot;
    android:textSize=&quot;12dp&quot;
    app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
    app:layout_constraintEnd_toEndOf=&quot;parent&quot;
    app:layout_constraintStart_toEndOf=&quot;@+id/name&quot;
    app:layout_constraintTop_toTopOf=&quot;parent&quot;
    tools:text=&quot;BBBBBBBBBBBBBBBBBBBBBB&quot; /&gt;
&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;

The result is

How to shrink first TextView rather than second one if 2 TextView have long text in ConstraintLayout?

Edit:

Per @Gavin Wright's answer. I also want the second one to bind to the first tightly if the text in size is short.
This is the difficult point that I can achieve this... Sorry for not mentioning in advance...

How to shrink first TextView rather than second one if 2 TextView have long text in ConstraintLayout?

答案1

得分: 2

第一个 TextView 应该设置为 layout_width = 0dp,这将强制它仅占据一行中剩余的宽度。第二个 TextView 应该设置为 layout_width = wrap_content,这将强制它占据适合其内容的空间。我还添加了 app:layout_constraintEnd_toStartOf="@+id/content" 到第一个 TextView,因为这是需要确保两个 TextView 之间关系的。

这对我进行了测试,完全有效:

<?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="40dp"
android:paddingTop="2dp"
android:paddingBottom="2dp">
<com.makeramen.roundedimageview.RoundedImageView
    android:id="@+id/avatarImg"
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:layout_marginStart="4dp"
    android:scaleType="centerCrop"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:riv_oval="true"
    tools:src="@mipmap/avatar_test" />

<TextView
    android:id="@+id/name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:ellipsize="end"
    android:lines="1"
    android:textColor="@color/peach_red"
    android:textSize="12dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toEndOf="@+id/avatarImg"
    app:layout_constraintEnd_toStartOf="@+id/content"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" />

<TextView
    android:id="@+id/content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:textColor="@color/black1"
    android:textSize="12dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/name"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="BBBBBBBBBBBBBBBBBBBBBB" />
</androidx.constraintlayout.widget.ConstraintLayout>
英文:

The first TextView should have layout_width = 0dp, as this forces it to take up only the remaining width on the line. The second TextView should have layout_width = wrap_content, as this forces it to take up as much space as needed to fit its contents. I also added app:layout_constraintEnd_toStartOf=&quot;@+id/content, to the first TextView, as this is needed to enforce the relationship between the two TextViews.

This is tested and works perfectly for me:

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
xmlns:tools=&quot;http://schemas.android.com/tools&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;40dp&quot;
android:paddingTop=&quot;2dp&quot;
android:paddingBottom=&quot;2dp&quot;&gt;
&lt;com.makeramen.roundedimageview.RoundedImageView
    android:id=&quot;@+id/avatarImg&quot;
    android:layout_width=&quot;24dp&quot;
    android:layout_height=&quot;24dp&quot;
    android:layout_marginStart=&quot;4dp&quot;
    android:scaleType=&quot;centerCrop&quot;
    app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
    app:layout_constraintStart_toStartOf=&quot;parent&quot;
    app:layout_constraintTop_toTopOf=&quot;parent&quot;
    app:riv_oval=&quot;true&quot;
    tools:src=&quot;@mipmap/avatar_test&quot; /&gt;

&lt;TextView
    android:id=&quot;@+id/name&quot;
    android:layout_width=&quot;0dp&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:layout_marginStart=&quot;8dp&quot;
    android:ellipsize=&quot;end&quot;
    android:lines=&quot;1&quot;
    android:textColor=&quot;@color/peach_red&quot;
    android:textSize=&quot;12dp&quot;
    app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
    app:layout_constraintStart_toEndOf=&quot;@+id/avatarImg&quot;
    app:layout_constraintEnd_toStartOf=&quot;@+id/content&quot;
    app:layout_constraintTop_toTopOf=&quot;parent&quot;
    tools:text=&quot;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&quot; /&gt;

&lt;TextView
    android:id=&quot;@+id/content&quot;
    android:layout_width=&quot;wrap_content&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:ellipsize=&quot;end&quot;
    android:lines=&quot;1&quot;
    android:textColor=&quot;@color/black1&quot;
    android:textSize=&quot;12dp&quot;
    app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
    app:layout_constraintEnd_toEndOf=&quot;parent&quot;
    app:layout_constraintStart_toEndOf=&quot;@+id/name&quot;
    app:layout_constraintTop_toTopOf=&quot;parent&quot;
    tools:text=&quot;BBBBBBBBBBBBBBBBBBBBBB&quot; /&gt;
&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;

huangapple
  • 本文由 发表于 2020年8月27日 19:50:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/63615348.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定