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

GridLayout与TableLayout布局_rowspan

代码如下:

<?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>