2012-02-01 62 views
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; 

我从这个设置中得到的所有内容如下所示(注意空空间在右边的泡沫面前:

enter image description here

你可以看到,根据文本大小右侧气泡不换的宽度。我明白为什么会发生这种情况 - 我将0.8的权重分配给当前的聊天消息泡泡(可能保留在右边),其余的为0.2。当前消息来自左侧泡泡时,它会很好地工作,因为它首先被作为wrap_content的0.8重量进行绘制。但是当右边的气泡是当前消息时,左边的气泡首先被拉出并且具有0.2的固定宽度,因此右边的气泡总是得到0.8而不管wrap_content。我怎样才能解决这个问题?我想要的是根据文本宽度获取气泡并左右对齐。如果你能提出一个更好的方法来正确地做到这一点,我可以完全抛弃目前的方式。

+0

我将不胜感激如果有人对此有任何意见。 – S21st 2012-02-08 10:37:33

+0

嗨Shahid可能是我们都在做相同的发展事情。我知道你正在使用9补丁的背景? – aftab 2012-02-22 17:36:02

+0

是的,我正在使用9贴图像的气泡。 – S21st 2012-02-23 05:28:39

回答

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; 
+0

嗨这个链接可以解决你的问题.http:// warting。 se/2012/06/04/chat-bubbles-in-android/ – aftab 2012-09-02 11:21:20

+0

它对我来说是完整的... – NagarjunaReddy 2012-10-10 05:24:29

+1

如何在相对布局中添加weightSum? – 2014-07-06 20:52:55