仿微信做一个聊天页面气泡布局遇到的问题，求高手指导一下

码拜

9年 ago

最近在做一个相似微信的聊天气泡的页面。遇到一些问题，请高手指导一下，谢谢。
本人的构思是用一个ListVIew来实现，左右分别用带气泡背景的RelavtieLayout来实现。
右边的气泡的布局如下：
<RelativeLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>
<RelativeLayout android:id=”@+id/rl_bubble_right”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:backgroup=”@drawable/bubble_right”>
<ImageView android:id=”@+id/img_icon”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentRight=”true”
android:laytou_marginRight=”10dp”/>
<TextView android:id=”@+id/img_icon”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_toRightOf=”@id/img_icon”
android:laytou_marginRight=”10dp”
android:layout_marginLeft=”10dp”
android:textSize=”18sp”
android:textColor=”@color/white”/>
</RelativeLayout>
</RelativeLayout>
本人的目的是做一个带有图标的气泡，图标(img_icon)在气泡的右边，离边距10个DP，在图标的右边放一个TextView，TextView内容动态生成，且TextView距图标10个dp，离气泡的在左边距也是10个dp。
但是按上面的布局来做，达不到想要的效果，气泡（rl_bubble_right）被拉长到了屏幕宽度，本人调了好久都没有效果，求高手指导一下，问题出在那里，怎么改进，谢谢。

解决方案

TextView 设置成包裹内容
气泡的话使用 9patch 图片

这是本人做的的一个仿微信的右边气泡的布局，你参考下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="6dp" >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/tv_sendtime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#bfbfbf"
            android:padding="2dp"
            android:textColor="#ffffff"
            android:textSize="12sp" />
    </LinearLayout>
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp" >
        <ImageView
            android:id="@+id/iv_userhead"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/user"
            android:focusable="false" />
        <TextView
            android:id="@+id/tv_chatcontent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_toLeftOf="@id/iv_userhead"
            android:background="@drawable/chatto_bg"
            android:clickable="true"
            android:focusable="true"
            android:gravity="left|center"
            android:lineSpacingExtra="2dp"
            android:minHeight="50dp"
            android:textColor="#ff000000"
            android:textSize="15sp" />
        <TextView
            android:id="@+id/tv_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@id/iv_userhead"
            android:layout_toRightOf="@id/tv_chatcontent"
            android:gravity="center"
            android:textColor="#818181"
            android:textSize="15sp" />
    </RelativeLayout>
</LinearLayout>

引用:

Quote: 引用:
为TextView设置个最大的宽度，试试呢

TextView设置了wrap_content的话，最大宽度貌似不起作用吧

本人设置了wrap_content, 之后设置android:maxWidth，没有异常