使用ListView制作表格样式以及消息提示小图标的布局

使用ListView制作表格样式以及消息提示小图标的布局

分类： android 开发 2013-04-09 23:39  267人阅读  评论(0)  收藏  举报

这次主要讲一下  一 ：仿微信的消息提醒的小图标的布局，二：怎样利用ListView来制作表格

不管三七二十一上图：

                                                    

      

       先说一下仿微信的消息图标提示的布局是怎样做的，其实非常简单，你可以想一想，可以肯定的是消息提示的小圆标是和她所靠近的图片重叠在一起的，那么这就简单了，什么布局可以允许控件重叠呢？答案是：FrameLayout ，FrameLayout布局只允许一个控件，之后所有的控件都是重叠在前一个控件之上的。明白了要用FrameLayout之后，我们看一下提示的小圆标都是在布局的右上角吧，很简单我们只要将小圆标的位置设为向上向右就行了，具体看下面的代码：

[html]  view plain copy print ?

1. <FrameLayout   
2.         android:background="@null"   
3.             android:layout_width="match_parent"   
4.             android:layout_height="fill_parent"   
5.             android:layout_weight="3.5" >  
6.                 <LinearLayout   
7.                     android:gravity="bottom|center"   
8.                         android:layout_width="match_parent"   
9.                         android:layout_height="match_parent" >  
10.                     <Button  
11.                           android:id="@+id/sure"  
12.                           android:layout_width="match_parent"  
13.                           android:layout_height="wrap_content"  
14.                       android:layout_marginRight="10dp"  
15.                       android:layout_gravity="center"  
16.                       android:background="@drawable/friendactivity_remind_normal"  
17.                       android:gravity="center"  
18.                       android:text="确定"  
19.                       android:textColor="#FFFFFF"/>    
20.                 </LinearLayout>  
21.                   
22.                 <LinearLayout   
23.                     android:gravity="top|right|center"   
24.                         android:paddingRight="10.0dip"   
25.                         android:layout_width="match_parent"   
26.                         android:layout_height="match_parent">  
27.                     <TextView   
28.                         android:textSize="10.0dip"   
29.                         android:textColor="@android:color/white"   
30.                         android:gravity="center"   
31.                         android:id="@+id/tvTabUnread"   
32.                         android:background="@drawable/tab_unread_bg"   
33.                         android:visibility="visible"   
34.                         android:layout_width="wrap_content"  
35.                         android:layout_height="wrap_content"  
36.                         android:text="2" />  
37.              </LinearLayout>  
38.     </FrameLayout>  

 

上面TextView的背景图片即是小圆标，将她的父布局的位置设为向上，向右，居中就行： android:gravity="top|right|center"，这样一个小圆标就显示在了一个区域的右上角了。

 

接下来说一下怎样用ListView来绘制表格。

第一：我们在styles.xml文件中定义两个样式，一个为：竖格和竖格之间的横线，一个为：行和行之间的横线

[java]  view plain copy print ?

1. <style name="list_item_seperator_layout">  
2.     <item name="android:layout_width">fill_parent</item>  
3.             <item name="android:layout_height">1dip</item>  
4.            <item name="android:background">@color/color_dark_grey</item>  
5. </style>   
6.   
7.    <style name="list_item_cell_seperator_layout">  
8.     <item name="android:layout_width">1dip</item>  
9.     <item name="android:layout_height">fill_parent</item>  
10.     <item name="android:background">@color/color_dark_grey</item>  
11. </style>  

第二：布局listView的Item 的布局文件：

[java]  view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.         android:layout_width="fill_parent"  
3.         android:layout_height="wrap_content"  
4.         android:orientation="horizontal" >  
5.      
6.         <View style="@style/list_item_cell_seperator_layout"/>  
7.   
8.         <TextView android:id="@+id/picc_task_title"  
9.             android:layout_width="0dip"  
10.             android:layout_height="30dp"  
11.             android:layout_weight="1"  
12.             android:layout_gravity="center"  
13.             android:gravity="center"  
14.             android:padding="2dip"/>  
15.      
16.         <View style="@style/list_item_cell_seperator_layout"/>                                                                          <TextView android:id="@+id/picc_task_content"  
17.             android:layout_width="0dip"  
18.             android:layout_height="30dp"  
19.             android:layout_weight="2"  
20.             android:layout_gravity="center"  
21.             android:gravity="center"  
22.             android:padding="2dip"/>   
23.          
24.         <View style="@style/list_item_cell_seperator_layout"/>  
25.      
26. </LinearLayout>  

这个布局文件的主要作用就是在格子和格子之间加入垂直的分割线，以形成竖格的效果

第三：设置ListViewItem之间的分割线，这个可以直接在ListView中进行设置：

[java]  view plain copy print ?

1. <ListView  
2.      android:layout_weight="1"  
3.      android:id="@+id/stock_list_view"  
4.      android:layout_width="fill_parent"  
5.      android:layout_height="fill_parent"  
6.      android:scrollingCache="true"  
7.      android:cacheColorHint="#00000000"  
8.      android:fastScrollEnabled="true"  
9.      android:focusable="true"  
10.      android:divider="@color/color_dark_grey"                        
11.      android:dividerHeight="1dip"/>  

ListView 中的divider就是设置分割线的颜色的，只要设置成和竖格相同的颜色和宽度就行，这样一个ListView的表格就制作成了。大致步骤就是这样了，下面我将上面那张图片

的布局文件代码贴出来。

[java]  view plain copy print ?

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:orientation="vertical"  
6.     tools:context=".MainActivity" >  
7.   
8.     <LinearLayout  
9.         android:layout_width="match_parent"  
10.         android:layout_height="fill_parent"  
11.         android:orientation="horizontal"  
12.         android:layout_weight="9"  
13.         android:background="@drawable/webviewtab_bg">  
14.         <LinearLayout   
15.             android:layout_width="match_parent"  
16.             android:layout_height="match_parent"  
17.             android:orientation="horizontal"  
18.             android:layout_weight="3.5">           
19.                 <Button  
20.                 android:id="@+id/come_back"  
21.                 android:layout_width="match_parent"  
22.                 android:layout_height="wrap_content"  
23.                 android:layout_marginLeft="10dp"  
24.                 android:layout_gravity="center"  
25.                 android:background="@drawable/friendactivity_remind_normal"  
26.                 android:text="返回"  
27.                 android:gravity="center"  
28.                 android:textColor="#FFFFFF"/>  
29.         </LinearLayout>          
30.     <LinearLayout   
31.             android:layout_width="match_parent"  
32.             android:layout_height="fill_parent"  
33.             android:orientation="vertical"  
34.             android:layout_weight="2">                                 
35.     </LinearLayout>             
36.     <FrameLayout   
37.             android:background="@null"   
38.                 android:layout_width="match_parent"   
39.                 android:layout_height="fill_parent"   
40.                 android:layout_weight="3.5" >  
41.                 <LinearLayout   
42.                     android:gravity="bottom|center"   
43.                         android:layout_width="match_parent"   
44.                         android:layout_height="match_parent" >  
45.                         <Button  
46.                         android:id="@+id/sure"  
47.                         android:layout_width="match_parent"  
48.                         android:layout_height="wrap_content"  
49.                         android:layout_marginRight="10dp"  
50.                         android:layout_gravity="center"  
51.                         android:background="@drawable/friendactivity_remind_normal"  
52.                         android:gravity="center"  
53.                         android:text="确定"  
54.                         android:textColor="#FFFFFF"/>      
55.                 </LinearLayout>  
56.                   
57.                 <LinearLayout   
58.                     android:gravity="top|right|center"   
59.                         android:paddingRight="10.0dip"   
60.                         android:layout_width="match_parent"   
61.                         android:layout_height="match_parent">  
62.                         <TextView   
63.                            android:textSize="10.0dip"   
64.                            android:textColor="@android:color/white"   
65.                            android:gravity="center"   
66.                            android:id="@+id/tvTabUnread"   
67.                            android:background="@drawable/tab_unread_bg"   
68.                            android:visibility="visible"   
69.                            android:layout_width="wrap_content"  
70.                            android:layout_height="wrap_content"  
71.                            android:text="2" />  
72.                 </LinearLayout>  
73.     </FrameLayout>  
74.     </LinearLayout>  
75.           
76.     <LinearLayout   
77.         android:layout_width="match_parent"  
78.         android:layout_height="fill_parent"  
79.         android:orientation="vertical"  
80.         android:layout_weight="1">  
81.                  
82.         <LinearLayout   
83.             android:layout_width="match_parent"  
84.             android:layout_height="fill_parent"  
85.             android:orientation="horizontal"  
86.             android:layout_weight="7">  
87.               
88.             <TextView   
89.                 android:id="@+id/acceptTask"  
90.                 android:layout_width="wrap_content"  
91.                 android:layout_height="wrap_content"  
92.                 android:layout_weight="6"  
93.                 android:layout_gravity="center"  
94.                 android:gravity="center"  
95.                 android:text="接受任务"/>              
96.             <ImageView   
97.                 android:id="@+id/acceptTaskImg"  
98.                 android:layout_width="wrap_content"  
99.                 android:layout_height="wrap_content"  
100.                 android:layout_weight="7"  
101.                 android:layout_gravity="center"  
102.                 android:src="@drawable/pull_left_icon_arrow_normal"/>              
103.             <TextView   
104.                 android:id="@+id/processingTask"  
105.                 android:layout_width="wrap_content"  
106.                 android:layout_height="wrap_content"  
107.                 android:layout_weight="6"  
108.                 android:gravity="center"  
109.                 android:layout_gravity="center"  
110.                 android:text="前往现场"/>              
111.             <ImageView   
112.                 android:id="@+id/processingTaskImg"  
113.                 android:layout_width="wrap_content"  
114.                 android:layout_height="wrap_content"  
115.                 android:layout_weight="7"  
116.                 android:layout_gravity="center"  
117.                 android:src="@drawable/pull_left_icon_arrow_normal"/>              
118.             <TextView   
119.                 android:id="@+id/arrival"  
120.                 android:layout_width="wrap_content"  
121.                 android:layout_height="wrap_content"  
122.                 android:layout_weight="6"  
123.                 android:gravity="center"  
124.                 android:layout_gravity="center"  
125.                 android:text="到达现场"/>              
126.             <ImageView   
127.                 android:id="@+id/arricalImg"  
128.                 android:layout_width="wrap_content"  
129.                 android:layout_height="wrap_content"  
130.                 android:layout_weight="7"  
131.                 android:layout_gravity="center"  
132.                 android:src="@drawable/pull_left_icon_arrow_normal"/>                      
133.             <TextView   
134.                 android:id="@+id/finish"  
135.                 android:layout_width="wrap_content"  
136.                 android:layout_height="wrap_content"  
137.                 android:layout_gravity="center"  
138.                 android:gravity="center"  
139.                 android:layout_weight="6"  
140.                 android:text="处理完毕"/>  
141.         </LinearLayout>  
142.           
143.         <LinearLayout   
144.             android:layout_width="match_parent"  
145.             android:layout_height="fill_parent"  
146.             android:orientation="vertical"  
147.             android:layout_weight="1">  
148.              
149.             <LinearLayout  
150.                 android:layout_width="match_parent"  
151.                 android:layout_height="fill_parent"  
152.                 android:orientation="vertical"  
153.                 android:layout_weight="2">                 
154.                 
155.                 <LinearLayout   
156.                     android:orientation="horizontal"  
157.                 android:layout_width="fill_parent"  
158.                 android:layout_height="wrap_content">                      
159.                     <TextView   
160.                         android:layout_width="fill_parent"  
161.                         android:layout_height="fill_parent"  
162.                         android:layout_weight="20"/>                                            
163.                      <View style="@style/list_item_seperator_layout"  
164.                          android:layout_weight="1"/>                                                
165.                     <TextView   
166.                         android:layout_width="fill_parent"  
167.                         android:layout_height="fill_parent"  
168.                         android:layout_weight="20"/>  
169.                 </LinearLayout>  
170.                                           
171.                 <LinearLayout  
172.                     android:layout_width="fill_parent"  
173.                     android:layout_height="wrap_content"  
174.                     android:orientation="vertical" >  
175.                       
176.                     <LinearLayout   
177.                         android:orientation="horizontal"  
178.                         android:layout_width="fill_parent"  
179.                         android:layout_height="wrap_content"  
180.                         android:layout_gravity="center">  
181.                         <TextView   
182.                             android:layout_width="fill_parent"  
183.                             android:layout_height="fill_parent"  
184.                             android:layout_weight="20"/>  
185.                          <TextView   
186.                             android:layout_width="fill_parent"  
187.                             android:layout_height="fill_parent"  
188.                             android:layout_weight="20"/>  
189.                     </LinearLayout>  
190.                       
191.                     <LinearLayout   
192.                         android:orientation="horizontal"  
193.                     android:layout_width="fill_parent"  
194.                     android:layout_height="wrap_content">                      
195.                         <TextView   
196.                             android:layout_width="fill_parent"  
197.                             android:layout_height="fill_parent"  
198.                             android:layout_weight="20"/>                                                  
199.                          <View style="@style/list_item_seperator_layout"  
200.                              android:layout_weight="1"/>                                                  
201.                         <TextView   
202.                             android:layout_width="fill_parent"  
203.                             android:layout_height="fill_parent"  
204.                             android:layout_weight="20"/>  
205.                     </LinearLayout>  
206.                       
207.                     <LinearLayout   
208.                         android:orientation="horizontal"  
209.                         android:layout_width="fill_parent"  
210.                         android:layout_height="wrap_content"  
211.                         android:layout_gravity="center">  
212.                           
213.                         <TextView   
214.                             android:layout_width="fill_parent"  
215.                             android:layout_height="fill_parent"  
216.                             android:layout_weight="20"/>                               
217.                         <ListView  
218.                             android:layout_weight="1"  
219.                     android:id="@+id/stock_list_view"  
220.                     android:layout_width="fill_parent"  
221.                     android:layout_height="fill_parent"  
222.                     android:scrollingCache="true"  
223.                     android:cacheColorHint="#00000000"  
224.                     android:fastScrollEnabled="true"  
225.                     android:focusable="true"  
226.                     android:divider="@color/color_dark_grey"                         
227.                     android:dividerHeight="1dip"/>                         
228.                         <TextView   
229.                             android:layout_width="fill_parent"  
230.                             android:layout_height="fill_parent"  
231.                             android:layout_weight="20"/>   
232.                     </LinearLayout>  
233.                     
234.                     <LinearLayout   
235.                                 android:orientation="horizontal"  
236.                             android:layout_width="fill_parent"  
237.                             android:layout_height="wrap_content"  
238.                             android:layout_gravity="center">                      
239.                             <TextView   
240.                             android:layout_width="fill_parent"  
241.                             android:layout_height="fill_parent"  
242.                             android:layout_weight="20"/>                                                  
243.                             <View style="@style/list_item_seperator_layout"  
244.                              android:layout_weight="1"/>                                                  
245.                             <TextView   
246.                             android:layout_width="fill_parent"  
247.                             android:layout_height="fill_parent"  
248.                             android:layout_weight="20"/>  
249.                     </LinearLayout>                     
250.                 </LinearLayout>                                                   
251.             </LinearLayout>       
252.                       
253.             <LinearLayout   
254.                 android:layout_width="match_parent"  
255.                 android:layout_height="fill_parent"  
256.                 android:layout_weight="4"  
257.                 android:orientation="vertical">  
258.       
259.                 <LinearLayout   
260.                         android:orientation="horizontal"  
261.                     android:layout_width="fill_parent"  
262.                     android:layout_height="wrap_content">                      
263.                         <TextView   
264.                         android:layout_width="fill_parent"  
265.                         android:layout_height="fill_parent"  
266.                         android:layout_weight="20"/>                      
267.                         <Button  
268.                     android:id="@+id/button1"  
269.                     android:layout_width="match_parent"  
270.                     android:layout_height="match_parent"  
271.                     android:layout_weight="1"  
272.                     android:text="接受任务"/>                     
273.                         <TextView   
274.                         android:layout_width="fill_parent"  
275.                         android:layout_height="fill_parent"  
276.                         android:layout_weight="20"/>  
277.                    </LinearLayout>  
278.                   
279.   
280.             <LinearLayout   
281.                         android:orientation="horizontal"  
282.                     android:layout_width="fill_parent"  
283.                     android:layout_height="wrap_content"  
284.                     android:layout_marginTop="10dp">                      
285.                     <TextView   
286.                     android:layout_width="fill_parent"  
287.                     android:layout_height="fill_parent"  
288.                     android:layout_weight="20"/>                      
289.                      <Button  
290.                 android:id="@+id/button2"  
291.                 android:layout_width="match_parent"  
292.                 android:layout_height="match_parent"  
293.                 android:layout_weight="1"  
294.                 android:text="取消任务"/>                     
295.                     <TextView   
296.                     android:layout_width="fill_parent"  
297.                     android:layout_height="fill_parent"  
298.                     android:layout_weight="20"/>  
299.                </LinearLayout>                  
300.            </LinearLayout>  
301.         </LinearLayout>         
302.     </LinearLayout>  
303. </LinearLayout>  

上面就是使用ListView制作表格的过程，我的这个XML可能view> 更多

• 文章转自：http://blog.csdn.net/zkw12358/article/details/8775415