.Net程序员玩转Android开发---(8)表格布局TableLayout

表格布局TableLayout是Android中比较常用的一个布局控件，既然是表格，肯定有行和列，TableLayout中的行有TableRow组成，列根据每行控件的数量来确定

假如第一行有3个控件，第2行有4个控件，那么这个表格的列数就去最大列数，即4列。

               1.属性介绍

                表格有以下几个重要属性

                   android:shrinkColumns="2" 自动收缩的列，多个列用逗号隔开，自动收缩的意思是如果该列的内容超出了表格列的宽度，自动向下显示

                  android:stretchColumns="1" 自动伸缩列，多个列用逗号隔开，如果表格中所有列，都没有占满表格宽度，该列自动伸缩。

                   android:collapseColumns   隐藏指定的列，多个列用逗号隔开

                  android:layout_column="1" 用来设置该表格中控件所在的列数，

                 android:layout_span  用来设置表格中控件所占的列数

                      

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"   
5.     android:shrinkColumns="2"  
6.     android:stretchColumns="1"  
7.     >  
8.   
9.     <TableRow  
10.         android:id="@+id/tableRow1"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content" >  
13.   
14.         <TextView  
15.             android:id="@+id/textView1"  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:text="标签1"   
19.             android:background="#FF82AB"  
20.             />  
21.   
22.         <TextView  
23.             android:id="@+id/textView2"  
24.             android:layout_width="wrap_content"  
25.             android:layout_height="wrap_content"  
26.             android:text="标签2"   
27.               android:background="#EE6A50"  
28.             />  
29.   
30.         <TextView  
31.             android:id="@+id/textView3"  
32.             android:layout_width="wrap_content"  
33.             android:layout_height="wrap_content"  
34.             android:text="我是自动伸缩列，内容过多，自动向下伸缩"   
35.               android:background="#B3EE3A"  
36.             />  
37.   
38.     </TableRow>  
39.       
40.      <TableRow  
41.         android:id="@+id/tableRow1"  
42.         android:layout_width="wrap_content"  
43.         android:layout_height="wrap_content" >  
44.   
45.         <TextView  
46.             android:id="@+id/textView4"  
47.             android:layout_width="wrap_content"  
48.             android:layout_height="wrap_content"  
49.             android:text="标签4"   
50.             android:background="#FF82AB"  
51.             />  
52.   
53.         <TextView  
54.             android:id="@+id/textView5"  
55.             android:layout_width="wrap_content"  
56.             android:layout_height="wrap_content"  
57.             android:text="自动伸张"   
58.               android:background="#EE6A50"  
59.             />  
60.   
61.         <TextView  
62.             android:id="@+id/textView6"  
63.             android:layout_width="wrap_content"  
64.             android:layout_height="wrap_content"  
65.             android:text="标签6"   
66.               android:background="#B3EE3A"  
67.             />  
68.   
69.     </TableRow>  
70.   
71. </TableLayout>  

              2.商品列表示例

                  下面我们用TableLayout来完成一个商品列表的布局

               

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <TableRow  
7.         android:id="@+id/tableRow1"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="wrap_content" >  
10.           
11.         <TableLayout   
12.                android:layout_width="match_parent"  
13.     android:layout_height="match_parent"  
14.             >  
15.               
16.             <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"  >  
17.                    <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@raw/pad" />  
18.             </TableRow>  
19.             </TableLayout>  
20.               
21.             
22.         <TableLayout   
23.                android:layout_width="match_parent"  
24.     android:layout_height="match_parent"  
25.             >  
26.               
27.             <TableRow  
28.                  android:layout_width="fill_parent"  
29.         android:layout_height="wrap_content"   
30.                 >  
31.                      
32.                   
33.                    <TableLayout  android:layout_width="match_parent"   android:layout_height="fill_parent"   >  
34.               
35.            <TableRow android:layout_height="match_parent" >     
36.                 <TextView  
37.                     android:layout_width="wrap_content"  
38.                      android:layout_height="wrap_content"  
39.                    android:text="商品名称:IPAD AIR"   
40.                    android:layout_margin="10dp"  
41.                    />  
42.            </TableRow>   
43.            <TableRow  android:layout_height="match_parent"  >  <TextView  
44.          android:layout_width="wrap_content"  
45.          android:layout_height="wrap_content"  
46.          android:text="商品价格:$99"   
47.           android:layout_margin="10dp"  
48.          />    
49.          </TableRow>   
50.            
51.              <TableRow  android:layout_height="match_parent" >    
52.                    <TextView  
53.          android:layout_width="wrap_content"  
54.          android:layout_height="wrap_content"  
55.          android:text="商品颜色:白色"   
56.           android:layout_margin="10dp"  
57.          />  
58.              </TableRow>   
59.                 
60.                        </TableLayout>  
61.                   
62.                   
63.                   
64.             </TableRow>  
65.               
66.             </TableLayout>  
67.           
68.           
69.     </TableRow>  
70.       
71.      <TableRow  
72.         android:id="@+id/tableRow2"  
73.         android:layout_width="fill_parent"  
74.         android:layout_height="5dp"   
75.         android:background="#EEE8CD"  
76.         >  
77.   
78.        <TextView  
79.                     android:layout_width="fill_parent"  
80.                      android:layout_height="3dp"  
81.                     android:background="#EEE8CD"  
82.                    />  
83.           
84.     </TableRow>  
85.   
86.       <TableRow  
87.         android:id="@+id/tableRow1"  
88.         android:layout_width="fill_parent"  
89.         android:layout_height="wrap_content" >  
90.           
91.         <TableLayout   
92.                android:layout_width="match_parent"  
93.     android:layout_height="match_parent"  
94.             >  
95.               
96.             <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"  >  
97.                    <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@raw/pad" />  
98.             </TableRow>  
99.             </TableLayout>  
100.               
101.             
102.         <TableLayout   
103.                android:layout_width="match_parent"  
104.     android:layout_height="match_parent"  
105.             >  
106.               
107.             <TableRow  
108.                  android:layout_width="fill_parent"  
109.         android:layout_height="wrap_content"   
110.                 >  
111.                      
112.                   
113.                    <TableLayout  android:layout_width="match_parent"   android:layout_height="fill_parent"   >  
114.               
115.            <TableRow android:layout_height="match_parent" >     
116.                 <TextView  
117.                     android:layout_width="wrap_content"  
118.                      android:layout_height="wrap_content"  
119.                    android:text="商品名称:IPAD AIR"   
120.                    android:layout_margin="10dp"  
121.                    />  
122.            </TableRow>   
123.            <TableRow  android:layout_height="match_parent"  >  <TextView  
124.          android:layout_width="wrap_content"  
125.          android:layout_height="wrap_content"  
126.          android:text="商品价格:$99"   
127.           android:layout_margin="10dp"  
128.          />    
129.          </TableRow>   
130.            
131.              <TableRow  android:layout_height="match_parent" >    
132.                    <TextView  
133.          android:layout_width="wrap_content"  
134.          android:layout_height="wrap_content"  
135.          android:text="商品颜色:白色"   
136.           android:layout_margin="10dp"  
137.          />  
138.              </TableRow>   
139.                 
140.                        </TableLayout>  
141.                   
142.                   
143.                   
144.             </TableRow>  
145.               
146.             </TableLayout>  
147.           
148.           
149.     </TableRow>  
150.       
151.      <TableRow  
152.         android:id="@+id/tableRow2"  
153.         android:layout_width="fill_parent"  
154.         android:layout_height="5dp"   
155.         android:background="#EEE8CD"  
156.         >  
157.   
158.        <TextView  
159.                     android:layout_width="fill_parent"  
160.                      android:layout_height="3dp"  
161.                     android:background="#EEE8CD"  
162.                    />  
163.           
164.     </TableRow>  
165.       
166.       <TableRow  
167.         android:id="@+id/tableRow1"  
168.         android:layout_width="fill_parent"  
169.         android:layout_height="wrap_content" >  
170.           
171.         <TableLayout   
172.                android:layout_width="match_parent"  
173.     android:layout_height="match_parent"  
174.             >  
175.               
176.             <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"  >  
177.                    <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@raw/pad" />  
178.             </TableRow>  
179.             </TableLayout>  
180.               
181.             
182.         <TableLayout   
183.                android:layout_width="match_parent"  
184.     android:layout_height="match_parent"  
185.             >  
186.               
187.             <TableRow  
188.                  android:layout_width="fill_parent"  
189.         android:layout_height="wrap_content"   
190.                 >  
191.                      
192.                   
193.                    <TableLayout  android:layout_width="match_parent"   android:layout_height="fill_parent"   >  
194.               
195.            <TableRow android:layout_height="match_parent" >     
196.                 <TextView  
197.                     android:layout_width="wrap_content"  
198.                      android:layout_height="wrap_content"  
199.                    android:text="商品名称:IPAD AIR"   
200.                    android:layout_margin="10dp"  
201.                    />  
202.            </TableRow>   
203.            <TableRow  android:layout_height="match_parent"  >  <TextView  
204.          android:layout_width="wrap_content"  
205.          android:layout_height="wrap_content"  
206.          android:text="商品价格:$99"   
207.           android:layout_margin="10dp"  
208.          />    
209.          </TableRow>   
210.            
211.              <TableRow  android:layout_height="match_parent" >    
212.                    <TextView  
213.          android:layout_width="wrap_content"  
214.          android:layout_height="wrap_content"  
215.          android:text="商品颜色:白色"   
216.           android:layout_margin="10dp"  
217.          />  
218.              </TableRow>   
219.                 
220.                        </TableLayout>  
221.                   
222.             </TableRow>  
223.               
224.             </TableLayout>  
225.           
226.           
227.     </TableRow>  
228.       
229.      <TableRow  
230.         android:id="@+id/tableRow2"  
231.         android:layout_width="fill_parent"  
232.         android:layout_height="5dp"   
233.         android:background="#EEE8CD"  
234.         >  
235.   
236.        <TextView  
237.                     android:layout_width="fill_parent"  
238.                      android:layout_height="3dp"  
239.                     android:background="#EEE8CD"  
240.                    />  
241.           
242.     </TableRow>  
243.       
244.   
245. </TableLayout>