备用聊天气泡宽度

3

我正在开发一个聊天类型的应用程序。我正在使用两个不同的九宫格图案来展示聊天气泡主要信息和响应。我面临的问题是如何根据消息长度自动调整气泡的宽度。以下是我的主要布局:

<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布局:
<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方法内的代码:
    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;

我从这个设置中得到的结果如下(请注意右侧气泡前面的空格):
您可以看到,右侧气泡没有根据文本大小自动换行。我明白为什么会发生这种情况——我将当前聊天消息气泡(可能是左侧或右侧)的权重分配为0.8,而将其他气泡的权重分配为0.2。当当前消息来自左气泡时,它的绘制顺序正确,首先以0.8权重和wrap_content绘制。但当右气泡是当前消息时,左气泡先被绘制,并具有固定的0.2宽度,因此右气泡始终获得0.8,无论wrap_content如何。我该如何解决这个问题呢?我只想根据文本宽度获取气泡,并将其对齐到左侧或右侧。如果您能建议一种更好的方法来正确地完成这项工作,我可以完全放弃当前的方式。

如果有人对此有任何意见,我将不胜感激。 - S21st
嗨,Shahid,也许我们都在做同样的开发工作。请告诉我你是否正在使用9-patch作为其背景? - aftab
是的,我正在使用9-patch图像来制作气泡。 - S21st
嗨,Shahid,你可以使用私有的LayoutInflater mInflater; view View convertView = null; convertView = mInflater.inflate(R.layout.chatView, null); 在这里我放了一些相关的代码,使用它你可以轻松地管理布局位置。如果你仍然遇到任何问题,请回到我这里,我会更详细地解释如何操作。谢谢。 - aftab
1
我写了一篇关于Android聊天气泡的博客文章,你也可以在那里找到开源代码。 - Adil Soomro
@Shahid,你能分享一下你的聊天气泡PNG吗?我在网上搜索了很久,但找不到和你布局中的那些一样的...如果你能分享,我将不胜感激... - Dakait
1个回答

5
当我第一次发布这个问题时,我刚开始学习Android编程。问题在于我过于复杂化了布局定义和代码。现在我简化了我的布局层次结构,达到了我想要的效果,并且没有使用任何布局权重,只用了很少的代码/配置。下面是我更新后的代码片段。
我的主要布局现在是:
 <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>

列表项布局:
<?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方法内的代码:
    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;

嗨,这个链接可以解决你的问题。http://warting.se/2012/06/04/chat-bubbles-in-android/ - aftab
1
如何在相对布局中添加WeightSum? - Divyanshu Negi

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接