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

 

                                                           

 

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

posted on 2015-10-02 19:54  fuly  阅读(326)  评论(0编辑  收藏  举报