2 个 TextViews，左边是省略号，右边是 nowrap，单行 [英] 2 TextViews, left with ellipsis, right with nowrap, single line
问题描述
这是我第一次在这个论坛发帖，希望一切顺利:)
It's the first time I post on this forum, hope it's gonna be fine :)
我正在为我所在城市的公共交通开发 Android 应用.
I'm developping an Android App for public transportation in my city.
[ |short destination ||next departure| ]
[ |way too long dest...||next departure| ]
[ |short destination||next departure| ]
[ |way too long dest...||next departure| ]
这里有一个更完整的例子:s28.postimg.org/5gejnvfd9/actual2.png
Here is a more complete example: s28.postimg.org/5gejnvfd9/actual2.png
奇怪的彩色背景只是为了轻松识别布局/文本视图.您也可以忽略棕色线(没关系).
Weird coloured backgrounds are just here to easily identify layouts/textviews. You can also ignore the brown line (which is ok).
基本上，我想要具有可变长度的目的地[红色背景]，在其右侧，我想要第一个出发时间[绿色背景].一切都在一条线上.
Basically, I want to have the destination [red background] which have a variable length, and on its right, I want the first departure time [green background]. Everything on one line.
我需要始终完全显示第一个出发信息(nowrap).目的地可以用省略号 (...) 包裹.[可选问题，如何将省略号..."替换为."?]
I need to always have the first departure information fully displayed (nowrap). The destination could be wrapped with an ellipsis (...). [Optional question, how to replace the ellipsis '...' with '.' ?]
这是我迄今为止最好的工作代码:
Here is the best working code I have so far:
<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，但没有成功:(
I've tried TableLayout and LinearLayour instead of the RelativeLayout, but with no success :(
知道我该怎么做吗?
提前致谢！
露露
[已解决]只需稍微修改 valbertos 答案:
[SOLVED] Just have to lightly modify the valbertos answer:
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);
}
}
});
仅在必要时设置省略号可以正确截断文本.
Setting the Ellipsis only if necessary makes the text properly truncated.
Before:
Lingolsheim Thiergaten --> Lingolsheim... [1'23"] 21h23
With the modification:
Lingolsheim Thiergaten --> Lingolsheim Thi... [1'23"] 21h23
再次感谢:)
推荐答案
要实现您的要求，您必须根据第二个视图的文本宽度动态调整第一个视图的宽度.
To do what you are asking for, you must adjust the width of the first view dynamically based on the text width of the second view.
//代码
@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" 来摆脱丑陋的点 - 正如我在我的例子中所做的那样.
Use android:maxLines="1" instead of android:singleLine="true" to get rid off the ugly dots -as I did in my example.
另外，我建议您使用 include时间"部分，而不是重复 TextViews 两次.为了让示例保持简单，我只是这样做了.
Also, I recommend you to use include for the "time" section, instead of repeating the TextViews twice. I’ve just done it like that to keep simple the example.
这篇关于2 个 TextViews，左边是省略号，右边是 nowrap，单行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
