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

Android 码拜 8年前 (2016-04-23) 1235次浏览
最近在做一个相似微信的聊天气泡的页面。遇到一些问题,请高手指导一下,谢谢。
本人的构思是用一个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)被拉长到了屏幕宽度,本人调了好久都没有效果,求高手指导一下,问题出在那里,怎么改进,谢谢。
解决方案

10

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

20

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

<?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>

10

引用:
Quote: 引用:

为TextView设置个最大的宽度,试试呢

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

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


CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明仿微信做一个聊天页面气泡布局遇到的问题,求高手指导一下
喜欢 (0)
[1034331897@qq.com]
分享 (0)