这篇文章,主要介绍Android中提供的几种常用的布局,包含:LinearLayout、RelativeLayout、FrameLayout、GridLayout、TableLayout。
目录
一、Android布局控件
1.1、LinearLayout
1.2、RelativeLayout
(1)根据父容器定位
(2)根据兄弟组件定位
1.3、FrameLayout
1.4、GridLayout
1.5、TableLayout
一、Android布局控件
1.1、LinearLayout
LinearLayout是android中提供的一种线性布局方式,采用这种布局时候,它里面的所有子组件都将按照顺序依次排列,类似于一条线一样。
LinearLayout组件有如下属性:
- orientation:设置布局组件中的排列方式,两个可选值:vertical垂直布局、horizontal水平布局(默认是水平布局)。
- gravity:父容器控制子组件的对齐方式,这个有很多的属性值,具体看XML约束文档。
- layout_gravity:子组件在父容器中的对齐方式,这个有很多的属性值,具体看XML约束文档。
- background:设置布局的背景,可以是颜色、图片等。
- divider:设置布局里面,子组件之间的分割线。
- showDividers:设置分割线显示的位置,例如:none无,begining开始,ending结束,middle每两个组件之间。
- dividerPadding:分割线的内边距。
- layout_weight:设置子组件在容器里面占用的权重,也就是占用的空间比例(类似于HTML里面的flex布局)。
下面根据案例来属性一下LinearLayout布局的具体使用。
- 【orientation】水平布局和垂直布局的区别。
- 【gravity】设置子组件的对齐方式(这个属性使用在父容器上面)。
这里我们选择一个水平居中,垂直居中两个对齐方式(注意:多个属性值之间使用【|】竖线分割)。
- 【layout_gravity】设置子组件在父容器的对齐方式(这个属性我们一般使用在子组件上面)。
- 【background】设置背景颜色或者图片。
- 【divider】设置分割线,这个属性需要一个图片。
这个【divider】属性要和【showDividers】属性结合使用,才能够将分割线显示出来,否则看不见分割线。此外,还可以通过【dividerPadding】属性设置分割线的上下左右间距。
上面这种设置分割线的方式,不太常用,一般实际开发过程里面,可能直接通过【TextView】组件,设置高度【1dp】,再添加一些颜色之类的来实现分割线的功能比较常用。
- 【layout_weight】设置子组件占用父容器的权重,也就是占用父容器多少空间(一般用在子组件上面)。
也可以给每个子组件设置不同的权重,例如:
当我们设置权重之后,我们子组件的高度其实可以不用设置了,子组件将会按照权重自动计算应该显示多高,一般情况下,我们都将高度设置为【0dp】,如果是水平布局,我们的宽度就可以设置为【0dp】。
【layout_weight】其实是将屏幕分成多少份,然后计算每个子组件应该占用多少份。
以上,就是LinearLayout布局组件的相关属性,LinearLayout布局组件都是可以自由嵌套的,灵活应用即可。
1.2、RelativeLayout
RelativeLayout是一种相对布局,它可以相对于父容器进行布局,也可以设置相对兄弟容器进行布局。RelativeLayout布局里面,所有的子元素都是从父容器的左上角进行布局的,如果不设置子元素的布局方式,那么所有的子元素都将全部堆叠在父容器的左上角。就像下面这样:
由于每个子元素的宽高都一样大,所以被覆盖了,我们设置不同的宽高看看效果。
具有如下通用属性:
- layout_margin:设置上下左右的边距。
- layout_marginLeft:左边距。
- layout_marginRight:右边距。
- layout_marginTop:上边距。
- layout_marginBottom:下边距。
- padding:设置内边距。
(1)根据父容器定位
- layout_alignParentLeft:相对父容器左对齐。
- layout_alignParentRight:右对齐。
- layout_alignParentTop:顶部对齐。
- layout_alignParentBottom:底部对齐。
- layout_centerHorizontal:水平居中对齐。
- layout_centerVertical:垂直居中对齐。
- layout_centerInParent:中间对齐(也就是在父容器的正中间位置)。
上面这些属性值都是true、false。
- layout_alignParentLeft:相对父容器左对齐。
- layout_alignParentRight:右对齐。
- layout_alignParentTop:顶部对齐。
- layout_alignParentBottom:底部对齐。
- layout_centerHorizontal:水平居中对齐。
- layout_centerVertical:垂直居中对齐。
- layout_centerInParent:中间对齐(也就是在父容器的正中间位置)。
上面这些属性值都是true、false。
上面这些属性都要在子元素上面,这样才能够设置子元素相对容器进行定位显示,下面看下案例。
实现代码如下所示:
(2)根据兄弟组件定位
- layout_toLeftOf:放在某个组件的左边。
- layout_toRightOf:放在某个组件的右边。
- layout_above:放在某个组件的上边。
- layout_below:放在某个组件的下边。
- layout_alignTop:放在某个组件的上边界。
- layout_alignBottom:放在某个组件的下边界。
- layout_alignLeft:放在某个组件的左边界。
- layout_alignRight:放在某个组件的右边界。
上面这些属性的属性值是【某个组件的id】,即:指定组件相对于哪个组件进行定位,就是根据组件的【id】来确定的。
具体格式:【@id/具体的id名称】
- layout_toLeftOf:放在某个组件的左边。
- layout_toRightOf:放在某个组件的右边。
- layout_above:放在某个组件的上边。
- layout_below:放在某个组件的下边。
- layout_alignTop:放在某个组件的上边界。
- layout_alignBottom:放在某个组件的下边界。
- layout_alignLeft:放在某个组件的左边界。
- layout_alignRight:放在某个组件的右边界。
上面这些属性的属性值是【某个组件的id】,即:指定组件相对于哪个组件进行定位,就是根据组件的【id】来确定的。
具体格式:【@id/具体的id名称】
下面看下相对于兄弟组件进行定位的案例。
相对布局使用的时候,需要注意的是:相对于兄弟组件对齐的时候,id不要写错了,要知道它和【id】属性的区别,一个是【@+id】,另一个是【@id】,注意有没有【+】的区别。
以上,就是RelativeLayout相对布局相关内容。
1.3、FrameLayout
FrameLayout一般叫做帧布局,也可以叫做框架布局。FrameLayout布局是根据父容器的左上角进行对齐的,这一点和RelativeLayout类似,如下所示:
案例代码如下:
FrameLayout布局不能指定子元素的显示位置,只能从布局的左上角开始显示,这个布局只有两个属性:
- foreground:设置前景颜色、图片。
- foregroundGravity:设置前景位置。
也可以设置前景的位置,设置位置之后,图片的大小会自动进行调整。
FrameLayout布局一般使用在需要重叠显示的场景里面。
以上,就是FrameLayout布局的相关使用。
1.4、GridLayout
GridLayout是网格布局,可以设置显示多少行,多少列,相当的灵活,和HTML里面的栅栏布局类似。
父元素属性:
- orientation:设置水平还是垂直显示(默认是水平布局的)。
- columnCount:设置一行显示多少列。
- rowCount:设置有多少行。
子元素属性:
- layout_column:设置子元素显示在哪一列。
- layout_columnSpan:子元素横向跨几列。
- layout_columnWeight:列的权重,即:剩余空间情况下,一列占用的空间。
- layout_gravity:设置在网格中的显示位置。
- layout_row:设置子元素显示在哪一行。
- layout_rowSpan:设置子元素纵向跨几行。
- layout_rowWeight:行的权重,即:剩余空间情况下,一行占用的空间。
下面看下案例代码。
案例代码:
- 【orientation】设置水平还是垂直布局(默认是水平布局的)。
可以看到垂直布局和水平布局的区别。
- 【layout_column】设置第一列显示在第二列上。
- 【layout_columnSpan】设置第一列横向跨2列。
- 【layout_row】设置第一列显示在第二行的第一列上。
- 【layout_rowSpan】设置第一列横向跨2列。
注意之处:
- 当我们要使用列相关属性的时候,需要设置宽度不能固定,否则有些属性不生效。
- 当我们要使用行相关属性的时候,需要设置高度不能固定,否则有些属性不生效。
代码案例:
以上,就是GridLayout网格布局相关的属性。
1.5、TableLayout
TableLayout是表格布局,也是属于可以设置多行多列的,就和excel表格一样。使用TableLayout时候,需要通过【TableRow】标签来指定一行,然后这一行中的有多少子元素就会按照多少列数进行显示。当一行的列数不能完全显示,那么最后的列多出部分不会显示。
- collapseColumns:指定某一列隐藏,从0开始。
- stretchColumns:指定某一列拉伸,从0开始,多个列使用逗号分隔(当一行有多余空间时候,才能够拉伸)。
- shrinkColumns:指定某一列收缩,从0开始(当一行放不下的时候,才能够收缩)。
- layout_column:子元素显示在哪一列上面(两行以上才有效果)。
- layout_span:子元素横向跨几列(两行以上才有效果)。
下面看个案例。
- 【shrinkColumns】指定第一列、第三列收缩。
- 【stretchColumns】指定第二列拉伸。
- 【collapseColumns】隐藏第一列。
- 【layout_column】设置第二列显示在第三列位置(两行以上才有效果)。
注意:这种设置,必然有两行以上才能够生效,只要一行情况下,不生效。
- 【layout_span】设置第二列横向跨2列(两行以上才有效果)。
注意:只有一行的情况下,设置layout_span之后,这一列的宽度就会消失。
案例代码:
以上,就是TableLayout表格布局相关的属性介绍。
综上,这篇文章结束了,主要介绍了Android中提供的几种常用的布局,包含:LinearLayout、RelativeLayout、FrameLayout、GridLayout、TableLayout。



