智能机器人“小昆”的实现（四）布局实现

经过漫长的代码编写，我们终于可以进行布局的编写了。我们再来看一下效果图，如下：

首先可以看到，主布局很简单，上面是一个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的编写了。