将 2 个文本视图并排放置，第二个文本视图始终可见 [英] 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

<?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 的输出

当长文本

当小文本

使用 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

的输出

当长文本

当小文本

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