备用聊天泡泡宽度 [英] Alternate chat bubble widths
问题描述
我开发一个聊天类型的应用程序。我使用两种不同的9补丁聊天气泡主要信息和响应。我现在面临的问题是，根据消息长度自动包裹气泡的宽度。以下是我的主要布局：
I am developing a chat type application. I am using two different nine patches for chat bubble main message and responses. The problem I am facing is to automatically wrapping the widths of the bubbles according to the message length. Following is my main layout:
<RelativeLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
>
<ListView android:id="@+id/list"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
android:cacheColorHint="#00000000"
android:listSelector="@android:color/transparent"
android:divider="@null"
/>
</RelativeLayout>
<LinearLayout android:id="@+id/footer" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:gravity="bottom" style="@android:style/ButtonBar">
<Button
android:id="@+id/stt_button"
android:layout_width="45dp"
android:layout_height="50dp"
android:background="@drawable/microphone"
/>
<EditText android:id="@+id/chat_msg"
android:inputType="text"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1" />
<Button android:id="@+id/send_button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:text="@string/send_button" />
</LinearLayout>
</LinearLayout>
这是我list_item可布局：
This is my list_item layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content" android:weightSum="1.0"
android:layout_weight="1" android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/linearLayoutLeft"
android:layout_width="0dp"
android:layout_weight="0.8"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/relativeLayoutLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/lefttext"
android:layout_width="wrap_content"
android:gravity="top"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:paddingTop="5dip"
android:layout_alignParentLeft="true">
</TextView>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayoutRight"
android:layout_width="0dp"
android:layout_weight="0.8"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/relativeLayoutRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/righttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:paddingTop="5dip"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true">
</TextView>
</RelativeLayout>
</LinearLayout>
这是我的自定义阵列适配器的getView方法中的code：
This is the code inside the getView method of my custom array adapter:
View view = convertView;
if(view == null){
view = mInflater.inflate(R.layout.list_item, null);
}
Resources res = getContext().getResources();
Drawable bubblesChat = res.getDrawable(R.drawable.bubbles_chat);
Drawable bubblesResponse = res.getDrawable(R.drawable.bubbles_response);
TextView left = (TextView) view.findViewById(R.id.lefttext);
TextView right = (TextView) view.findViewById(R.id.righttext);
View leftLayout = view.findViewById(R.id.relativeLayoutLeft);
View rightLayout = view.findViewById(R.id.relativeLayoutRight);
LinearLayout linearLeft = (LinearLayout) view.findViewById(R.id.linearLayoutLeft);
LinearLayout linearRight = (LinearLayout) view.findViewById(R.id.linearLayoutRight);
LayoutParams leftParams = (LayoutParams) linearLeft.getLayoutParams();
LayoutParams rightParams = (LayoutParams) linearRight.getLayoutParams();
String txt = super.getItem(position);
if(txt.startsWith("s:")) {
left.setText(getItem(position));
leftLayout.setBackgroundDrawable(bubblesChat);
leftParams.weight = 0.8f;
linearLeft.setLayoutParams(leftParams);
rightParams.weight = 0.2f;
linearRight.setLayoutParams(rightParams);
right.setText("");
rightLayout.setBackgroundDrawable(null);
} else {
right.setText(getItem(position));
rightLayout.setBackgroundDrawable(bubblesResponse);
rightParams.weight = 0.8f;
linearRight.setLayoutParams(rightParams);
leftParams.weight = 0.2f;
linearLeft.setLayoutParams(leftParams);
left.setText("");
leftLayout.setBackgroundDrawable(null);
}
return view;
所有我从这种设置越来越像下面（注意空的空间在正确的泡沫面前：
All I am getting from this setup is like the following (note the empty spaces in front of the right bubbles:
您可以看到，根据文本大小的右手边泡不包装的宽度。我明白为什么会这样 - 我分配权重的0.8到当前的聊天消息气泡（右可左）和0.2的休息。在当前的消息是左起泡沫它工作得很好，因为它是先画为0.8重量WRAP_CONTENT。但是，当合适的泡沫是当前消息，左泡沫得到了抽中，并有0.2固定宽度，因此正确的总是得到WRAP_CONTENT 0.8不论。我该如何解决这个问题？我想要的是根据文本的宽度和对齐或左或右，以获得气泡。我能够摆脱我目前的方式完全，如果你能提出一个更好的方法来正确地做到这一点。
You can see that the right hand side bubbles are not wrapping the width according to the text size. I understand why this is happening - I am assigning weight of 0.8 to the current chat message bubble (may be left of right) and 0.2 to the rest. When the current message is from left bubble it works fine as it is draw first as 0.8 weight with wrap_content. But when the right bubble is the current message, the left bubble got drawn first and have a fixed width of 0.2, hence the right one always gets 0.8 irrespective of wrap_content. How can I fix this? All I want is to get the bubbles according to the text width and aligned either left or right. I can ditch my current way altogether if you can suggest a better way to do this correctly.
推荐答案
当我第一次张贴了这个问题，我刚开始的Android编程。问题是我过于复杂，我的布局定义和code。现在，我简化了我的布局，层次结构，我已经实现了我想要的东西，并没有使用任何布局重量，有很多简单的code /配置。在这里，我张贴我的更新code片段。
When I first posted this question, I just started Android programming. The problem was I overly complicated my layout definitions and code. Now that I simplified my layout hierarchy, I have achieved what I wanted and without using any layout weight and with a lot simple code/configuration. Here I am posting my updated code snippets.
我的主要布局现在：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<ListView android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
android:cacheColorHint="#00000000"
android:listSelector="@android:color/transparent"
android:divider="@null"/>
<LinearLayout android:id="@+id/footer" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:gravity="bottom" style="@android:style/ButtonBar">
<Button android:id="@+id/stt_button"
android:layout_width="45dp"
android:layout_height="50dp"
android:background="@drawable/microphone"/>
<EditText android:id="@+id/chat_msg"
android:inputType="text"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1" />
<Button android:id="@+id/send_button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:text="@string/send_button" />
</LinearLayout>
</LinearLayout>
列表项的布局：
List item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:weightSum="1.0"
android:layout_weight="1" android:layout_height="wrap_content">
<TextView android:id="@+id/lefttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="5dip"
android:layout_alignParentLeft="true"
android:maxWidth="250dip"/>
<TextView
android:id="@+id/righttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="5dip"
android:layout_alignParentRight="true"
android:maxWidth="250dip"/>
</RelativeLayout>
这是我的自定义阵列适配器的getView方法中的code：
This is the code inside the getView method of my custom array adapter:
View view = convertView;
if(view == null){
view = mInflater.inflate(R.layout.list_item, null);
}
Resources res = getContext().getResources();
Drawable bubblesChat = res.getDrawable(R.drawable.bubbles_chat);
Drawable bubblesResponse = res.getDrawable(R.drawable.bubbles_response);
TextView left = (TextView) view.findViewById(R.id.lefttext);
TextView right = (TextView) view.findViewById(R.id.righttext);
String txt = super.getItem(position);
if(txt.startsWith("s:")) {
left.setText(getItem(position));
left.setBackgroundDrawable(bubblesChat);
right.setText("");
right.setBackgroundDrawable(null);
} else {
right.setText(getItem(position));
right.setBackgroundDrawable(bubblesResponse);
left.setText("");
left.setBackgroundDrawable(null);
}
return view;
这篇关于备用聊天泡泡宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
