将2个textview彼此并排放置，使第二个textview始终可见 [英] Place 2 textview beside each other with 2nd textview always visible

问题描述

我想要的东西:

当文本较短时，如下所示，21％的TextView应该位于第一个TextView旁边

When text is short the 21% TextView should be just beside the first TextView like below

当文本很长时，我希望第一个TextView到达结尾并变为椭圆形，并且21％TextView应该像下面一样可见

and when text is long I want the first TextView to reach to end and ellipsize and 21% TextView should be visible like below

但是我所做的21％TextView消失了，第一个TextView占据了完整的空间.我用Linear, Relative, Frame, Constraint layout, weight, minwidth等尝试了许多组合，但似乎无济于事.

but what ever I do the 21% TextView goes away and first TextView occupies complete space . I tried many combinations with Linear, Relative, Frame, Constraint layout, weight, minwidth etc but nothing seems to work.

这是我的xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_job_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:maxLines="1"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar nec justo id bibendum." />

    <TextView
        android:id="@+id/tv_matchPercent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:paddingLeft="5dp"
        android:text="21% "
        android:textColor="#4268e3"/>
</LinearLayout>

有什么想法要实现吗?

注意:我不想对字符或宽度进行硬编码

Note: I do not want to hard code characters or width

推荐答案

1种方法尝试使用 ConstraintLayout

1 way Try this Using ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <TextView
        android:id="@+id/longTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:text=" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel consectetur tortor. Fusce velit velit, tincidunt vitae dolor at, pharetra condimentum nunc. Etiam ac erat ac nulla tempus ullamcorper id ac sapien."
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/shortTextView"
        />

    <TextView
        android:id="@+id/shortTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="21%"
        android:textColor="@color/colorAccent"
        app:layout_constraintBaseline_toBaselineOf="@+id/longTextView"
        app:layout_constraintLeft_toRightOf="@+id/longTextView"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

使用ConstraintLayout输出

当长文本时

OUTPUT using ConstraintLayout

When Long Text

小文本时

使用 FlexboxLayout

2 way using FlexboxLayout

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout
    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">

    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        app:layout_alignSelf="flex_start"
        android:ellipsize="end"
        android:maxLines="1"
        android:layout_height="wrap_content"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel consectetur tortor. Fusce velit velit, tincidunt vitae dolor at, pharetra condimentum nunc. Etiam ac erat ac nulla tempus ullamcorper id ac sapien."
        />

    <TextView
        android:id="@+id/textview2"
        android:text="21%"
        android:layout_width="wrap_content"
        android:minWidth="60dp"
        android:textColor="@color/colorAccent"
        app:layout_alignSelf="flex_start"
        android:layout_height="wrap_content"
        />

</com.google.android.flexbox.FlexboxLayout>

使用 FlexboxLayout

进行输出

当长文本时

OUTPUT Using FlexboxLayout

When Long Text

小文本时

这篇关于将2个textview彼此并排放置，使第二个textview始终可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！