将2个文本视图彼此并排放置,使第二个文本视图始终可见

时间:2018-09-21 09:12:29

标签: android android-layout textview

我想要的是:

当文本较短时,像下面这样,21%的TextView应该紧靠第一个TextView

enter image description here

当文本较长时,我希望第一个TextView到达结尾并变为椭圆形,并且应该像下面一样显示21%的TextView

enter image description here

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

这是我的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>

任何想法如何实现?

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

2 个答案:

答案 0 :(得分:9)

  

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

长文本时

enter image description here

小文本时

enter image description here

  

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

进行输出

长文本时

enter image description here

小文本时

enter image description here

答案 1 :(得分:1)

使用LinearLayout的解决方案,当然并不比使用ContrainstLayout或其他方法更好。但是,希望它在某些情况下有帮助

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:paddingEnd="50dp"
        android:text="Title 1111111111111111111111111111111"
        android:textSize="20sp"
        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="-50dp"
        android:layout_weight="1"
        android:text="21%"
        android:textColor="@color/colorAccent"
        />

</LinearLayout>

测试

输入
Title 1111111111111111111111111111111
输出
enter image description here

输入
Title 1111111
输出
enter image description here