安卓布局
1.线性布局LinearLayout
2.表格布局TableLayout以及网格布局GridLayout
3.帧布局FrameLayout
4.相对布局RelativeLayout
5.Android2.0已经过时的绝对布局AbsoluteLayout
这里仅谈xml的实现、不涉及java实现
布局管理器及组件的常用共有属性:
属性 | 作用 |
---|---|
android:id="@+id/XXX" | 为当前的组件指定id,在JAVA中用该属性引用该空间 |
android:layout_width=“XXX” | 设置组件的宽度 |
android:layout_height =“XXX” | 设置组件的长度 |
android:background =“XXX” | 设置组件的背景 |
android:padding =“XXX” | 设置组件与文字之间的距离 |
layout_margin=“XXX” | 设置组件之间的距离 |
margin与padding都有方位词:
词 | 方位 |
---|---|
Top | 顶部 |
Bottom | 底部 |
Left | 左 |
Right | 右 |
每个空间的必有属性:
android:layout_width="XXX" //设置组件的宽度
android:layout_height ="XXX" //设置组件的长度
线性布局LinearLayout
将开发者放入布局管理器中的组件进行水平或者竖直的排列,针对每行或每列只能放置一个空间且不会换行(意思是当组件排到页面边缘之外的时候也不会换行)。
线性布局管理器支持的属性值有两个:
属性 | 作用 | 值 |
---|---|---|
android:orientation=“XXX” | 设置排列方式 | horizontal、vertical |
android:gravity="XXX | 设置对齐方式 | top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、center_vertical、center、fill、clip_vertical、clip_horizontal |
其中android:gravity设置布局管理器内部组件对齐方式中的值可以用“|”拼接起来使用(Linux中称其为管道符号)
android:layout_gravity设置子元素在父布局中的位置子元素中无法设置gravity(浅谈与之区别)
词 | 方位 |
---|---|
center_vertical | 垂直居中 |
fill_vertical | 纵向充满 |
center_horizontal | 横向居中 |
fill_horizontal | 横向充满 |
center | 居中 |
fill | 充满 |
clip_vertical | 超出部分纵向裁剪 |
clip_horizontal | 超出部分横向裁剪 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/linearLayout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom|right"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="底部向右" />
</LinearLayout>
当即有LinearLayout且设置了orientation:horizontal又有子控件里设置了layout_gravity则左右方位词会失效
当即有LinearLayout且设置了orientation:vertical又有子控件里设置了layout_gravity则上下方位词会失效
不过应该可以通过代码的方式实现、此处之后在说。
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="底部向右" />
</LinearLayout>
表格布局TableLayout
表格布局就类似于表格,有行于列来放入组件。
- TableLayout为布局管理器,直接在其中添加组件则该组件独占一行
- TabRow为行,一个TabRow代表一行,也是一个容器
- 在表格布局里无列的标签,但在行中每添加一个组件便多一行,列数以组件最多的行数来确定
- 列可以隐藏也可以设为拉伸的状态用来填补空挡的位置,也可以收缩来适应表格匹配屏幕大小
TableLayout继承了LinearLayout,所有LinearLayout的XML属性TableLayout都支持
TableLayout布局管理器独有属性:
属性 | 作用 |
---|---|
android:collapseColumns | 设置被隐藏列的序列号,从0开始,多个序号之间用逗号隔开 |
android:shrinkColumns | 设置被收缩的列的序列号,从0开始,多个序号之间用逗号隔开,多余的文字会自动换行 |
android:stretchColumns | 设置被拉伸列的序列号,从0开始,多个序列号之间用逗号隔开 |
xml:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
</TableRow>
</TableLayout>
设置隐藏列0,1
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:collapseColumns="0,1"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
</TableRow>
</TableLayout>
设置拉伸列2
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
</TableRow>
设置收缩列2,其会自动换行
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="2"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6666666666666666666666666" />
</TableRow>
</TableLayout>
子控件可用的属性:
属性 | 作用 |
---|---|
android:layout_span | 跨列(指定所跨列数,被跨的位置不可以有控件,若有控件则另一个控件会被挤到另一列而不是覆盖) |
android:layout_column | 设置控件占第几列(序号列从0开始) |
跨列:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="@+id/button5"
android:layout_span="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
</TableRow>
</TableLayout>
控件占第2列:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:text="4" />
</TableRow>
</TableLayout>
网格布局GridLayout
网格布局类似于表格布局(sdk最低为14),其最大的好处是可以在子控件中指定控件本身所在的行与列,设置模式类似于直角坐标系,行列号从0开始。行可以想成X列可以想成Y
子控件属性
属性 | 作用 |
---|---|
android:rowCount="" | 指定行号 |
android:columnCount="" | 指定的列号 |
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:id="@+id/button1"
android:layout_row="0"
android:layout_column="0"
android:text="(0,0)" />
<Button
android:id="@+id/button2"
android:layout_row="0"
android:layout_column="1"
android:text="(0,1)" />
<Button
android:id="@+id/button3"
android:layout_row="1"
android:layout_column="0"
android:text="(1,0)" />
<Button
android:id="@+id/button4"
android:layout_row="1"
android:layout_column="1"
android:text="(1,1)" />
</GridLayout>
GridLayout可以不指定控件的宽高,因为在GridLayout中可以指定布局管理器中有多少行与多少列(也可以不指定,用子控件的属性决定,如android:layout_row与android:layout_column上例所示)
布局管理器中属性:
属性 | 作用 |
---|---|
android:rowCount="" | 设置行数 |
android:columnCount="" | 设置列数 |
此外还可以指定控件占得列数与行数(此处若不在布局管理器中设置行数与列数,则控件会排成一行):
属性 | 作用 |
---|---|
android:layout_columnSpan="" | 设置所占列数 |
android:layout_rowSpan="" | 设置所占行数 |
搭配android:layout_gravity可以铺满所在行与列(此处行与列可能有些冲突,慎用)
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="2"
android:columnCount="2"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:id="@+id/button1"
android:layout_rowSpan="2"
android:layout_gravity="fill"
android:text="(0,0)" />
<Button
android:id="@+id/button2"
android:text="(0,1)" />
<Button
android:id="@+id/button3"
android:text="(1,0)" />
<Button
android:id="@+id/button4"
android:text="(1,1)" />
</GridLayout>
帧布局FrameLayout
每加入一个组件,都将创建一个空白区域称之为一帧,显示的对象都会被固定在左上角,我们不能够指定其显示的位置值能指定大概方位,控件与控件之间相互重叠、覆盖部分或全部覆盖(与控件的透明度有关)
FrameLayout布局管理器属性:
属性 | 作用 |
---|---|
android:foreground="" | 设置前景图片 |
android:foregroundGravity="" | 设置前景的位置 |
前景是不会被覆盖的
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:foreground="@drawable/ic_launcher"
android:foregroundGravity="center"
tools:context=".MainActivity" >
<TextView
android:layout_width="240dp"
android:layout_height="240dp"
android:background="#f00"
android:layout_gravity="center"
/>
<TextView
android:layout_width="140dp"
android:layout_height="140dp"
android:background="#0f0"
android:layout_gravity="center"
/>
<TextView
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#00f"
android:layout_gravity="center"
/>
<TextView
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#f00"
android:layout_gravity="center"
/>
</FrameLayout>
相对布局RelativeLayout
相对布局就是按照组件的相对位置来进行布局,例如在某个组件的上边、下边、左边、或者右边。相对布局以id来确定控件,每个控件都建议都id
RelativeLayout布局管理器支持的属性:
属性 | 作用 |
---|---|
android:gravity="" | 设置子控件的对齐方式 |
android:ignoreGravity="" | 设置哪个组件不受gravity的影响 |
xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:gravity="bottom"
android:ignoreGravity="@+id/e"
tools:context=".MainActivity" >
<TextView
android:id="@+id/q"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1"
/>
<TextView
android:id="@+id/w"
android:layout_toRightOf="@+id/q"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView2"
/>
<TextView
android:id="@+id/e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView3"
/>
</RelativeLayout>
子控件的属性:
属性 | 作用 | 值 |
---|---|---|
android:layout_below="" | 某组件的下方 | id |
android:layout_above="" | 某组件的上方 | id |
android:layout_toLeftOf="" | 某组件的左边 | id |
android:layout_toRightOf="" | 某组件的右边 | id |
android:layout_centerHorizontal="" | 水平居中 | boolean |
android:layout_centerVertical="" | 垂直居中 | boolean |
android:layout_centerInParent="" | 位于父布局正中间 | boolean |
边界对齐:
属性 | 作用 | 值 |
---|---|---|
android:layout_alignBottom="" | 某组件的下边界 | id |
android:layout_alignTop="" | 某组件的上边界 | id |
android:layout_alignLeft="" | 某组件的左边界 | id |
android:layout_alignRight="" | 某组件的右边界 | id |
android:layout_alignParentBottom="" | 父布局地段对齐 | boolean |
android:layout_alignParentTop="" | 父布局顶端对齐 | boolean |
android:layout_alignParentLeft="" | 父布局左端对齐 | boolean |
android:layout_alignParentRight="" | 父布局右端对齐 | boolean |
父布局顶部对齐与父布局左边界对齐重叠
xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/q"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="父布局顶部对齐"
android:layout_alignParentTop="true"
/>
<TextView
android:id="@+id/w"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="父布局底部对齐"
android:layout_alignParentBottom="true"
/>
<TextView
android:id="@+id/e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="父布局右边界对齐"
android:layout_alignParentRight="true"
/>
<TextView
android:id="@+id/r"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="父布局左边界对齐"
android:layout_alignParentLeft="true"
/>
</RelativeLayout>
绝对布局AbsoluteLayout
绝对控制控件的位置,很单一
子控件支持的属性
属性 | 作用 | 单位 |
---|---|---|
android:layout_x="" | 某组件x坐标 | dp |
android:layout_y="" | 某组件y坐标 | dp |
xml:
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/q"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="45dp"
android:layout_y="35dp"
android:text="TextView"
/>
</AbsoluteLayout>