GridLayout与TableLayout布局

原创 2014年01月21日 21:06:53

记录下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弄计算器的例子都烂大街了,自己写了个好玩的例子来展示下这两个布局:


代码如下:

<?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: xcl_168@aliyun.com

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android学习 9-> 表格布局TableLayout和网格布局GridLayout

表格布局TableLayout:中用......来表示一行,有多少行就添加对上个标签对;有多少列就看最多的一个中添加了多少个控件,知道把屏幕占满,超出屏幕的就不再显示。           直接在Ta...

GridLayout和TableLayout

1、不能同时在X,Y轴方向上进行控件的对齐。 2、当多层布局嵌套时会有性能问题。 3、不能稳定地支持一些支持自由编辑布局的工具。        其次考虑使用表格布局TabelLayout,这种方式会...

TableLayout 与GridLayout 列扩展和行扩展

一:TableLayout支持列扩展不支持行扩展 TableLayout列扩展,比如一个button扩展到两列 android:layout_span属性...
  • zzldm
  • zzldm
  • 2017年01月16日 14:41
  • 414

第16章、布局Layouts之GridLayout网格布局(从零开始学Android)

GridLayout网格布局   android4.0以上版本出现的GridLayout布局解决了以上问题。GridLayout布局使用虚细线将布局划分为行、列和单元格,也支持一个控件在行、列上都有...

android开发之GridLayout详解

在android4.0以上版本中,新增加了GridLayout网格布局,请参考Android 4.0开发之GridLayOut布局实践和浅谈android4.0开发之GridLayout布局 ...

Android GridLayout 动态添加子控件 + 平均分配空间

Android GridLayout 动态添加子控件 + 平均分配空间 有时候会遇到这样的需求: 1. 要求子控件网格布局,平均分布 2. 内容根据接口动态加载 3. 父控件充满界面剩余空间,不...

被遗忘的Android GridLayout

GridLayout这种网格布局容器在某些情形下的确是能帮我们轻松实现想要的布局,并能减少布局的嵌套,提高性能,而我们大部分人却经常忽略这种布局。相信这篇文章能给大家带来一些启发。...

android v7 gridlayout

本文重点讲述了自android4.0版本后新增的GridLayout网格布局的一些基本内容,并在此基础上实现了一个简单的计算器布局框架。通过本文,您可以了解到一些android UI开发的新特性,并能...

Android技巧:学习使用GridLayout

Android技巧:学习使用GridLayout 时间 2015-11-25 19:12:19  猿轩阁 原文  http://toughcoder.net/blog/2015/11/25/a...

网格布局GridLayout的那些事儿

(一)概述 GridLayout是在Android 4.0以后引入的一个新的布局,和TableLayout(表格布局)有点类似,不过它比后者更加强大,也更加好用; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:GridLayout与TableLayout布局
举报原因:
原因补充:

(最多只允许输入30个字)