经过漫长的代码编写，我们终于可以进行布局的编写了。我们再来看一下效果图，如下：
首先可以看到，主布局很简单，上面是一个ListView，底部并排放着一个编辑框和一个发送按钮。然后就是ListView的子项布局，我们发现有两种。一种是发送消息的布局，整体靠右，左边是一个消息框，右边是一个头像，头像下面有昵称。还有一种是服务器返回的消息的布局，整体 靠左，往右依次为头像和消息框，且头像下也有昵称。好了，分析完毕，下面我们就开始编写这个布局吧。
一、素材
这个项目中所用的图片素材，请点击下面的链接，下载”智能机器人素材“即可。
http://pan.baidu.com/disk/home
二、ListView子项布局实现
ListView子项布局有两种，我们分别命名为 item_in.xml（自己发送消息的布局），item_out.xml（服务器端消息的布局）。先编写item_in.xml。代码如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 android:gravity="right"> 7 8 9 <LinearLayout 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content" 12 android:orientation="horizontal"> 13 14 15 <TextView 16 android:id="@+id/tv_inmsg" 17 android:layout_width="wrap_content" 18 android:layout_height="wrap_content" 19 android:background="@drawable/chatto_bg_focused" 20 android:layout_gravity="center_vertical" 21 android:gravity="center_vertical" 22 android:textColor="@color/red" 23 android:textSize="15dp"/> 24 25 <LinearLayout 26 android:layout_width="wrap_content" 27 android:layout_height="wrap_content" 28 android:orientation="vertical"> 29 30 <ImageView 31 android:layout_width="wrap_content" 32 android:layout_height="wrap_content" 33 android:src="@drawable/yang2"/> 34 <TextView 35 android:layout_width="wrap_content" 36 android:layout_height="wrap_content" 37 android:layout_gravity="center" 38 android:text="@string/xiaoyang"/> 39 </LinearLayout> 40 41 </LinearLayout> 42 43 44 </LinearLayout>
再编写 item_out.xml.代码如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView 8 android:id="@+id/tv_out_date" 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:layout_gravity="center" 12 android:textColor="@color/green" 13 android:background="@color/gray" 14 android:textSize="20dp" 15 /> 16 <LinearLayout 17 android:layout_width="wrap_content" 18 android:layout_height="wrap_content" 19 android:orientation="horizontal"> 20 21 <LinearLayout 22 android:layout_width="wrap_content" 23 android:layout_height="wrap_content" 24 android:orientation="vertical"> 25 26 <ImageView 27 android:layout_width="wrap_content" 28 android:layout_height="wrap_content" 29 android:src="@drawable/me"/> 30 <TextView 31 android:layout_width="wrap_content" 32 android:layout_height="wrap_content" 33 android:layout_gravity="center" 34 android:text="@string/xiaokun"/> 35 </LinearLayout> 36 37 <TextView 38 android:id="@+id/tv_outmsg" 39 android:layout_width="wrap_content" 40 android:layout_height="wrap_content" 41 android:background="@drawable/chatfrom_bg_focused" 42 android:layout_gravity="center_vertical" 43 android:gravity="center_vertical" 44 android:textSize="15dp" 45 android:textColor="@color/red"/> 46 </LinearLayout> 47 48 49 </LinearLayout>
三、主布局实现
然后实现主布局，代码如下：
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:background="@color/white" 6 android:orientation="vertical"> 7 8 <ListView 9 android:id="@+id/listview_msg" 10 android:layout_width="match_parent" 11 android:layout_height="0dp" 12 android:layout_weight="1" 13 android:divider="@null" 14 android:dividerHeight="5dp" 15 > 16 17 </ListView> 18 19 <LinearLayout 20 android:id="@+id/id_lay" 21 android:layout_width="match_parent" 22 android:layout_height="wrap_content" 23 android:orientation="horizontal"> 24 <EditText 25 android:id="@+id/et_inmsg" 26 android:layout_width="0dp" 27 android:layout_height="wrap_content" 28 android:layout_gravity="center" 29 android:layout_weight="1" 30 /> 31 32 <ImageButton 33 android:id="@+id/btn_send" 34 android:layout_gravity="center" 35 android:layout_width="wrap_content" 36 android:layout_height="wrap_content" 37 android:text="@string/send" 38 android:textSize="25dp" 39 android:src="@drawable/button" 40 /> 41 42 43 </LinearLayout> 44 45 46 47 48 </LinearLayout>
对了，不要忘记values下，strings.xml和color.xml的编写。
strings.xml的代码如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 4 <string name="app_name">小昆</string> 5 <string name="action_settings">Settings</string> 6 <string name="xiaokun">小昆</string> 7 <string name="xiaoyang">羊羊</string> 8 9 <string name="send">发送</string> 10 <string name="info">亲，请写点东西给小昆吧！</string> 11 12 </resources>
color.xml的代码如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 <color name ="green">#00cc00</color> 4 <color name ="gray">#808080</color> 5 <color name ="red">#cc0000</color> 6 <color name ="white">#ffffff</color> 7 8 </resources>
好了，至此布局已经都编写完成了。下面就可以进行MainActivity的编写了。
