2个TextViews,左边有省略号,右边有nowrap,单行

时间:2014-09-06 15:30:03

标签: android textview ellipsis nowrap

这是我第一次在这个论坛发帖,希望它会好起来的。)

我正在为我所在城市的公共交通开发Android应用程序。

Here is what I have

[ |short destination   ||next departure| ]
[ |way too long dest...||next departure| ]

Here is what I want:

[ |short destination||next departure|    ]
[ |way too long dest...||next departure| ]

这是一个更完整的例子:s28.postimg.org/5gejnvfd9/actual2.png

奇怪的彩色背景就在这里,可以轻松识别布局/文本视图。你也可以忽略棕色线(没问题)。

基本上,我希望目的地[红色背景]具有可变长度,而在其右侧,我想要第一个出发时间[绿色背景]。一切都在一条线上。

我需要始终完整显示第一个出发信息(nowrap)。目的地可以用省略号(...)包裹。 [可选问题,如何替换省略号' ...'用'。' ?]

这是我到目前为止最好的工作代码:

    <RelativeLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/txtTitleDestination"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@+id/txtTitleFirstDeparture"
            android:background="#FF0000"
            android:ellipsize="end"
            android:maxLines="1"
            android:padding="0dp"
            android:scrollHorizontally="true"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/txtTitleFirstDeparture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="0dp"
            android:layout_marginRight="0dp"
            android:layout_alignParentRight="true"
            android:background="#00FF00"
            android:ellipsize="none"
            android:maxLines="1"
            android:padding="0dp"
            android:textSize="18sp"
            android:textStyle="bold" 
            />

    </RelativeLayout>

我尝试过TableLayout和LinearLayour而不是RelativeLayout,但没有成功:(

知道我该怎么做吗?

提前致谢!

Louloox

[解决] 只需轻轻修改 valbertos 答案:

titleDestination.post(new Runnable() {
        @Override
        public void run() {             
            int widthTextViewDeparture = measureTextWidthTextView(titleFirstTime, pContext);
            int widthTextViewDestination = titleDestination.getWidth();
            int widthTextViewParent = rl_parent.getWidth();
            if(widthTextViewDestination + widthTextViewDeparture > widthTextViewParent) {
                titleDestination.setWidth(widthTextViewParent - widthTextViewDeparture);
                titleDestination.setEllipsize(TruncateAt.END);
                titleDestination.setHorizontallyScrolling(true);
            }
        }
    });

仅在必要时设置省略号才能正确截断文本。

Before: 
Lingolsheim Thiergaten --> Lingolsheim...     [1'23"] 21h23

With the modification:
Lingolsheim Thiergaten --> Lingolsheim Thi... [1'23"] 21h23

再次感谢:)

4 个答案:

答案 0 :(得分:2)

我找到了一种使用线性布局的方法,诀窍是不要忘记linearLayout的width =“wrap_content”,希望它可以帮助。

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


<TextView
    android:layout_width="0dip"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:ellipsize="end"
    android:singleLine="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:singleLine="true" />

答案 1 :(得分:1)

要执行您要求的操作,您必须根据第二个视图的文本宽度动态调整第一个视图的宽度。

//代码

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);

    final TextView tv_1 = (TextView) findViewById(R.id.tv_1);
    tv_1.post(new Runnable() {
        @Override
        public void run() {
            View rl_parent = findViewById(R.id.rl_parent);
            TextView tv_2 = (TextView) findViewById(R.id.tv_2);
            int widthTextView2 = measureTextWidthTextView(tv_2);
            if(tv_1.getWidth() + widthTextView2 > rl_parent.getWidth()) {
                tv_1.setWidth(tv_1.getWidth() - widthTextView2);
            }
        }
    });
}

private int measureTextWidthTextView(TextView textView) {
    int widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(getScreenWidth(), View.MeasureSpec.AT_MOST);
    int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
    textView.measure(widthMeasureSpec, heightMeasureSpec);
    return textView.getMeasuredWidth();
}

private int getScreenWidth() {
    WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
    Display display = wm.getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    return size.x;
}

//布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/rl_parent"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#348D63">

        <TextView
            android:id="@+id/tv_1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#BD160B"
            android:gravity="center_vertical"
            android:maxLines="1"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:text="Elsau Elsau Elsau Elsau Elsau Elsau Elsau"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_toRightOf="@+id/tv_1"
            android:gravity="center_vertical"
            android:minWidth="50dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:text="[11:30 14:23]"
            android:textStyle="bold" />

    </RelativeLayout>

    <!-- Rest of the layout -->

</LinearLayout>

使用android:maxLines =“1”而不是android:singleLine =“true”来摆脱丑陋的点 - 就像我在我的例子中所做的那样。

另外,我建议您使用include作为“时间”部分,而不是重复两次TextView。我这样做就是为了保持简单的例子。

答案 2 :(得分:0)

也许您应该使用LinearLayout而不是RelativeLayout并使用layout_weight属性。

<LinearLayout android:orientation="horizontal" ...>
    <TextView android:id="@+id/txtTitleDestination" android:layout_width="wrap_content" ... />
    <TextView android:id="@+id/txtTitleFirstDeparture" android:layout_width="0dp" android:layout_weight="1" ... />
</LinearLayout>

答案 3 :(得分:0)

您不需要以编程方式进行操作,ConstraintLayout真是不可思议!

只需使用此代码

app:layout_constraintHorizontal_bias="0"左对齐视图

app:layout_constrainedWidth="true"以换行左文字

<?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="wrap_content"
    android:padding="8dp">

    <TextView
        android:id="@+id/leftText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintEnd_toStartOf="@id/rightText"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="|short destination|" />

    <TextView
        android:id="@+id/rightText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/leftText"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="|next departure|" />

</androidx.constraintlayout.widget.ConstraintLayout>

这是结果

enter image description here enter image description here