GridLayout与TableLayout布局

记录下GridLayout与TableLayout布局的一些知识点，这两个布局对比起来弄，感觉明显比较更能加深印象。

GridLayout的使用设置：

GridLayout 布局在 Level14才被支持，之前版本要使用的话，要按以下步骤设置:

 1. import -> Existing Android Code Into Workspace 
 2. 选择目录: 在sdk下的GridLayout目录  
sdk\extras\android\support\v7\gridlayout
 3. 勾选"Copy projects into workspace"

TableLayout 的一些不足:
至于有了TableLayout又搞个GridLayout的原因，简单试了下TableLayout，我认为至少有下面两个原因
1.不能同时向水平和垂直方向做控件的对齐
TableLayout继承了LinearLayout,因此只能向一个方向做控件的对齐。

2.不能跨行跨列
  因为TableLayout,不明确指定包含多少行，多少列，而是通过向TableRow里面添加其他组件，每添加一个组件该表格就增加一列。
如果向TableLayout里面添加组件，那么该组件就直接占用一行。所以这种方式造成控件不能跨行跨列。
而GridLayout，则用columnCount设置列数后，增加的控件在超过列数后自动换行进行排列。

简单汇总下TableLayout的特点:
Shrinkable : 该列的宽度可以进行收缩，以使表格能够适应父容器的大小
Stretchable : 该列可以进行拉伸，以填满表格中空闲的空间
Collapsed : 该列将会被隐藏

GridLayout的特点:
android:layout_row :  固定显示在第几行。
android:layout_column :  固定显示在第几列，前面几列没控件的话就空着。
android:layout_rowSpan : 跨几行
android:layout_columnSpan:  跨几列 

用GridLayout弄计算器的例子都烂大街了，自己写了个好玩的例子来展示下这两个布局:

代码如下:

[html] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.    android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:layout_gravity="center"   
6.     android:orientation="vertical"  
7.     android:rowCount="5"  
8.     android:columnCount="4"      
9.     android:background="#FFE4C4"   
10.    >       
11.      <ImageView        
12.         android:layout_column="0"  
13.         android:layout_gravity="left|top"  
14.         android:layout_row="0"  
15.         android:src="@drawable/emoji_436" />  
16.           
17.      <TextView                             
18.           android:layout_width="wrap_content"  
19.           android:layout_height="wrap_content"  
20.           android:layout_gravity="left|top"                          
21.           android:layout_row="0"  
22.           android:layout_column="1"  
23.           android:layout_columnSpan="2"  
24.           android:background="@drawable/chatfrom_bg_app_normal"   
25.           android:text="我喜欢你......（表白进行中）"                           
26.          />    
27.                   
28.       <TextView                                 
29.            android:layout_width="wrap_content"  
30.            android:layout_height="wrap_content"  
31.            android:layout_gravity="right|top"  
32.            android:layout_row="1"  
33.            android:layout_column="1"  
34.            android:layout_columnSpan="2"  
35.            android:background="@drawable/chatto_bg_focused"                            
36.            android:text="一公斤苹果等于多少克?"              
37.            />    
38.                   
39.       <ImageView        
40.         android:layout_column="3"  
41.         android:layout_gravity="right|top"  
42.         android:layout_row="1"  
43.         android:src="@drawable/emoji_443" />  
44.            
45.        <ImageView         
46.         android:layout_column="0"  
47.         android:layout_gravity="left|top"  
48.         android:layout_row="2"  
49.         android:src="@drawable/emoji_436" />  
50.                  
51.         <TextView                            
52.           android:layout_width="wrap_content"  
53.           android:layout_height="wrap_content"  
54.           android:layout_gravity="left|top"                          
55.           android:layout_row="2"  
56.           android:layout_column="1"  
57.           android:layout_columnSpan="2"  
58.           android:background="@drawable/chatfrom_bg_app_normal"   
59.           android:text="啊，1024..."                           
60.          />                    
61.       <TextView                              
62.            android:layout_width="wrap_content"  
63.            android:layout_height="wrap_content"  
64.            android:layout_gravity="right|top"  
65.            android:layout_row="3"  
66.            android:layout_column="1"  
67.            android:layout_columnSpan="2"  
68.            android:background="@drawable/chatto_bg_focused"                            
69.            android:text="嗯，你是一个好人.但..."              
70.            />    
71.                      
72.         <ImageView  
73.         android:id="@+id/imageView1"  
74.         android:layout_column="3"  
75.         android:layout_gravity="right|top"  
76.         android:layout_row="3"  
77.         android:src="@drawable/emoji_443" />  
78.          
79.         <TableLayout   
80.          android:id="@+id/tablelayout1"              
81.          android:layout_row="4"  
82.          android:layout_column="0"  
83.          android:layout_columnSpan="4"  
84.                        
85.         android:layout_width="fill_parent"   
86.         android:layout_height="wrap_content"  
87.         android:shrinkColumns="1"   
88.         android:stretchColumns="2">  
89.       
90.         <!-- 在TableLayout中，在TableRow以外，直接添加的对象会独占一行 -->  
91.         <Button android:text="上面GridLayout,下面是TableLayout"/>  
92.         <TableRow>  
93.             <TextView  
94.             android:id="@+id/imageView222"  
95.             android:background="@drawable/chatto_bg_voiceforward_focused"  
96.             android:text="好人卡1"   />  
97.               
98.             <TextView  
99.             android:id="@+id/imageView222"  
100.             android:background="@drawable/chatto_bg_voiceforward_focused"  
101.             android:text="好人卡2"   />  
102.                
103.             <TextView  
104.             android:id="@+id/imageView222"  
105.             android:background="@drawable/chatto_bg_voiceforward_focused"  
106.             android:text="好人卡3"   />  
107.         </TableRow>  
108.     </TableLayout>  
109.           
110. </GridLayout>  

<?xml version="1.0" encoding="utf-8"?><GridLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_gravity="center"    android:orientation="vertical"    android:rowCount="5"    android:columnCount="4"        android:background="#FFE4C4"    >  <ImageView              android:layout_column="0"        android:layout_gravity="left|top"        android:layout_row="0"        android:src="@drawable/emoji_436" />  <TextView                                     android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="left|top"                                  android:layout_row="0"          android:layout_column="1"          android:layout_columnSpan="2"          android:background="@drawable/chatfrom_bg_app_normal"   android:text="我喜欢你......（表白进行中）"                                />             <TextView                                          android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_gravity="right|top"           android:layout_row="1"         android:layout_column="1"         android:layout_columnSpan="2"           android:background="@drawable/chatto_bg_focused"                              android:text="一公斤苹果等于多少克?"                       />              <ImageView              android:layout_column="3"        android:layout_gravity="right|top"        android:layout_row="1"        android:src="@drawable/emoji_443" />      <ImageView               android:layout_column="0"        android:layout_gravity="left|top"        android:layout_row="2"        android:src="@drawable/emoji_436" />             <TextView                                    android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="left|top"                                  android:layout_row="2"          android:layout_column="1"          android:layout_columnSpan="2"          android:background="@drawable/chatfrom_bg_app_normal"   android:text="啊，1024..."                                />             <TextView                                       android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_gravity="right|top"           android:layout_row="3"         android:layout_column="1"         android:layout_columnSpan="2"           android:background="@drawable/chatto_bg_focused"                              android:text="嗯，你是一个好人.但..."                       />                     <ImageView        android:id="@+id/imageView1"        android:layout_column="3"        android:layout_gravity="right|top"        android:layout_row="3"        android:src="@drawable/emoji_443" />            <TableLayout          android:id="@+id/tablelayout1"                     android:layout_row="4"         android:layout_column="0"         android:layout_columnSpan="4"                     android:layout_width="fill_parent" android:layout_height="wrap_content"android:shrinkColumns="1" android:stretchColumns="2"><!-- 在TableLayout中，在TableRow以外，直接添加的对象会独占一行 --><Button android:text="上面GridLayout,下面是TableLayout"/><TableRow><TextView        android:id="@+id/imageView222"       android:background="@drawable/chatto_bg_voiceforward_focused"         android:text="好人卡1"   /><TextView        android:id="@+id/imageView222"       android:background="@drawable/chatto_bg_voiceforward_focused"         android:text="好人卡2"   /> <TextView        android:id="@+id/imageView222"       android:background="@drawable/chatto_bg_voiceforward_focused"         android:text="好人卡3"   /></TableRow></TableLayout>    </GridLayout>

MAIL: [e-mail]

BLOG: http://blog.csdn.net/xcl168