Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局_控件

在Android中提供了几个常用布局:

  1. ​LinearLayout​​线性布局
  2. ​RelativeLayout​​相对布局
  3. ​FrameLayout​​帧布局
  4. ​AbsoluteLayout​​绝对布局
  5. ​TableLayout​​表格布局
  6. ​GridLayout​​网格布局


TableLayout表格布局

Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局_帧布局_02

TableLayout的介绍

​TableLayout​​是将子类向分别排列成行和列的布局视图容器,​​TableLayout​​是由许多​​TableRow​​对象组成的,表格布局以行列的形式管理子控件,每一个单元是一个​​TableRow​​或者​​View​​对象。

在​​TableLayout​​中可以通过​​setConlumnShrinkable()​​或​​setConlumnStretchable()​​方法来指定某些列为可以缩小或可伸缩,列是从0开始计数的,第一列为0。

属性

常用的几种属性:

​stretchColumns​​为设置运行被拉伸的列的序号,如​​android:stretchColumns="2,3"​​表示在第三列的和第四列的一起填补空白,如果要所有列一起填补空白,则用​​“*”​​符号,列号都是从0开始算的。

​shrinkColumns​​为设置被收缩的列的序号,收缩是用于在一行中列太多或者某列的内容文本过长,会导致某列的内容会被挤出屏幕,这个属性是可以帮助某列的内容进行收缩,用于防止被挤出的。

​android:collapseColumns​​为设置需要被隐藏的列的序号,使用该属性可以隐藏某列。

​android:layout_column​​为为该子类控件显示在第几列。​​android:layout_column="2"​​表示跳过第二个,直接显示在第三个单元格内。

​android:layout_span​​为为该子类控件占据第几列。​​android:layout_span="3"​​表示合并3个单元格,就是这个组件将占据3个单元格。

collapseColumns隐藏列

效果如图:

Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局_网格布局_03

​android:collapseColumns = "0,2"​​,用于隐藏第一列和第三列,代码如下:

<TableLayout
android:id="@+id/TableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:collapseColumns="0,2" >
<TableRow>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="one" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="three" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="four" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="five" />
</TableRow>
</TableLayout>


stretchColumns拉伸列

​android:stretchColumns = “1”​​,设置为第二列为可拉伸列的列,让该列填满这一行所有的剩余空间,也就是在整个父宽度的情况在,放几个按钮,剩下的空间宽度将用第二列填满,代码如下:

Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局_控件_04

<TableLayout
android:id="@+id/TableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1" >

<TableRow>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="one" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="three" />

</TableRow>
</TableLayout>


shrinkColumns收缩列

​android:shrinkColumns="1"​​表示将第二列的内容进行收缩,如果屏幕的额宽度包容不下的话,就会拿第二列进行收缩,就是压扁,拉长。如同上代码进行修改即可,多加些内容,让其文本内容超出屏幕吧!

GridLayout网格布局

​GridLayout​​网格布局是在​​Android 4.0​​以后引入的一种新的布局模式,和表格布局是有点类似的,但比表格布局的好,功能也是很强大的,它可以设置布局有多少行和有多少列,也可以设置布局中的组件的排列方式,也可以设置组件的位置,横跨多少行,多少列。

属性的那点东西

​android:orientation​​用于设置​​vertical​​竖直或​​horizontal​​水平。

​android:layout_gravity​​为设置对齐方式,可以设置​​center,right,left​​等。

​android:rowCount​​为可以设置行数,要多少行设置多少行,如​​android:rowCount="2"​​为设置网格布局有2行。

​android:columnCount​​为可以设置列数,要多少列设置多少列,如​​android:columnCount="2"​​为设置网格布局有2列。

​android:layout_row​​为设置组件位于第几行,从0开始计数的,如​​android:layout_row="1"​​为设置组件在第2行。

​android:layout_column​​为设置组件位于第几列,从0开始计数的,如​​android:layout_column="1"​​为设置组件在第2列。

​android:layout_rowSpan​​为设置组件横跨几行,如​​android:layout_rowSpan="2"​​为纵向横跨2行。

​android:layout_columnSpan​​为设置组件横跨几列,如​​android:layout_columnSpan="2"​​为橫向横跨2列。

注意事项:低版本sdk是如何使用​​GridLayout​​的呢?要导入v7包的​​gridlayout​​包即可,因为​​GirdLayout​​是4.0后才推出的,标签代码。

<android.support.v7.widget.GridLayout>


FrameLayout帧布局

​FrameLayout​​帧布局是什么样的呢?所有子控件都放在左上角且后面元素都是直接覆盖在前面元素之上一种布局模式。

常用属性:

​android:foreground​​为设置改帧布局容器的前景图像,什么是前景图像,前景图像是永远处于帧布局容器的最上面的图像,就是不会被覆盖的图片。

​android:foregroundGravity​​为设置前景图像显示的位置

列子代码

Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局_android_05

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/FrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#FF6143" />
<TextView
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#7BFE00" />
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FFFF00" />

</FrameLayout>


用帧布局可以做出霓虹灯的效果,即为每个​​TextVeiw​​设置​​layout_gravity="center"​​即可,即可以看到不一样的效果。

Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局_Android精通教程_06

AbsoluteLayout绝对布局

​AbsoluteLayout​​绝对布局是通过​​x,y​​位置来为子控件设置位置的,即​​android:layout_x和android:layout_y​​属性。

Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局_android_07

由于绝对布局不常见,不常用,因为在不同大小的适配屏幕上的位置直观上会变化,适应能力差,所以不建议使用。

RelativeLayout相对布局

​RelativeLayout​​是一个相对布局的视图组,用来显示相对位置的子视图类,在默认情况下,所有子视图对会分布在左上角。

这里简单温习一下相关属性即可:

​android:layout_below​​ 为位于某控件下方,以id为标记

​android:layout_above​​ 为位于某控件上方,以id为标记

​android:layout_toLeftOf​​ 为位于某控件左方,以id为标记

​android:layout_toRightOf ​​为位于某控件右方,以id为标记

​android:layout_alignBottom​​ 为与某控件底部对齐,以id为标记

​android:layout_alignTop​​ 为与某控件顶部对齐,以id为标记

​android:layout_alignLeft​​ 为与某控件左边缘对齐,以id为标记

​android:layout_alignRight ​​为与某控件右边缘对齐,以id为标记

​android:layout_alignBaseline​​ 为与某控件的文本内容在一条直线上

​android:layout_alignParentBottom​​ 为在父容器最下,为true或false

​android:layout_alignParentTop​​ 为在父容器最上,为true或false

​android:layout_alignParentLeft ​​为在父容器最左,为true或false

​android:layout_alignParentRight ​​为在父容器最右,为true或false

​android:layout_marginTop​​ 为和父容器上端的距离,单位为dp

​android:layout_marginBottom​​ 为和父容器下端的距离,单位为dp

​android:layout_marginLeft​​ 为和父容器左端的距离,单位为dp

​android:layout_marginRight​​ 为和父容器右端的距离,单位为dp

​android:layout_margin​​为和父容器四周的距离,单位为dp

​android:layout_centerVertical​​ 为在父类的垂直居中,为true或false

​android:layout_centerHorizontal ​​为在父类的水平居中,为true或false

​android:layout_centerInParent​​ 为在父类的水平垂直居中

结论

线性布局:

指子控件以水平或垂直方式排列

相对布局:

指子控件以控件之间的相对位置或子控件相对于父容器的位置排列

帧布局:

指所有子控件均放在左上角且后面元素直接覆盖在前面元素之上

绝对布局:

指子控件通过绝对定位x,y位置来决定其位置摆放

表格布局:

指以行列的形式放置子控件,每一行是一个TableRow对象或者View对象