您的位置：首页 > 移动开发 > Android开发

Android学习笔记——五大基本布局+AbsoluteLayout

2015-12-02 15:09 531 查看

安卓中一共有6种基本布局，分别是LinearLayout（线性布局）、RelativeLayout（相对布局）、AbsoluteLayout（绝对布局）、FrameLayout（帧布局）、TableLayout（表格布局）和GridLayout（网格布局）。其中，TableLayout（表格布局）是LinearLayout（线性布局）的子类，而AbsoluteLayout（绝对布局）在安卓2.3之后被废除（过期），GridLayout（网格布局）则是安卓4.0之后新增的；

一、LinearLayout（线性布局）：将布局内的控件按照水平或者垂直方向依次排列
常用属性：
1. android:orientation：定义布局内控件或组件的排列方向
可选项：vertical（垂直排列）、 horizontal（水平排列）
当设置android:orientation="vertical"时，布局内的控件将垂直排列成一列，每一行只显示一个控件；
同理，当设置android:orientation="horizontal"时，布局内的控件将水平排列成一行，每一列只显示一个控件；

系统默认为水平方向；

水平排列截图如下：

<LinearLayout 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=".SecondActivity" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

</LinearLayout>

垂直方向截图如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>

</LinearLayout>

2. android:layout_width：设置控件的宽度
可选项：①match_parent（匹配父控件）/②fill_parent/③wrap_content（包裹内容）/④绝对数值（如：40dp）
设置高度为android:layout_width="match_parent"与android:layout_width="fill_parent"效果一样，都会使布局填充整个父控件，但从安卓2.2开始，谷歌官方推荐使用match_parent，原因是match_parent较fill_parent在语义上更准确，更易于理解；
android:layout_width="wrap_content"，即包裹内容，也就是控件刚好包裹内容物；
android:layout_width="40dp"，将控件所占的宽度固定为40dp；
3.android:layout_height：设置控件的高度
与设置布局的宽度类似，可选项：①match_parent（匹配父控件）/②fill_parent/③wrap_content（包裹内容）/④绝对数值（如：40dp）
4.android:layout_gravity：设置控件相对于容器的位置
如：android:layout_gravity="bottom"表示将该控件放到容器的底部
5.android:gravity：设置组件内容物相对于自己的位置
如：android:gravity="center"表示放置到中央
如果该属性是定义在布局节点中，则该布局中所有控件的位置都受到这个属性的控制。
如果该属性出现在Button、TextView、EditText等控件中，则用来控制这些控件上的文字的位置。
可选项有：top、bottom、left、right、center_vertical、fill_vertical 、 center、fill等等。
6.android:background：设置布局的背景颜色或背景图片
如：android:background="#ff0000"表示设置背景颜色为红色
android:background="@drawable/图片id"表示设置布局的背景图片
【备注：】
颜色有RGB颜色格式和ARGB格式。RGB是红绿蓝三原色，而ARGB是带alpha的三原色，即有透明度的三原色。
#FFFFFF 代表白色
#000000 代表黑色
#FFFFFFFF 完全不透明
#00FFFFFF 完全透明
#88FFFFFF 半透明

7.android:layout_weight：设置布局的权重，即布局在父布局的剩余空间中所占的比例

如：在垂直排列的线性布局中，加入三个文本框，分别设置高度的权重为1,2,3，则三个文本框的高度比为1:2:3

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ff0000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#00ff00"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#0000ff"/>

</LinearLayout>

效果图：

二、RelativeLayout（相对布局）：根据各个控件的相对位置来布局
1.设置组件相对于父组件的位置
android:layout_centerHorizontal="true"：相对于父组件水平居中显示
android:layout_centerVertical="true"：相对于父组件垂直居中显示
android:layout_centerInParent="true"：相对于父组件居中显示

android:layout_alignParentRight="true"：相对于父组件与父组件右对齐
android:layout_alignParentLeft="true"：相对于父组件与父组件左对齐
android:layout_alignParentBottom="true"：相对于父组件与父组件底部对齐
android:layout_alignParentTop="true"：相对于父组件与父组件顶部对齐
以上其中属性设置中，可选项均有true和false两种
2.设置组件相对兄弟组件的位置
android:layout_toRightOf="@id/button"：该组件位于id为button的组件的右边
android:layout_toLeftOf="@id/button"：该组件位于id为button的组件的左边
android:layout_below="@id/button"：该组件位于id为button的组件的下方
android:layout_above="@id/button"：该组件位于id为button的组件的上方

android:layout_alignRight="@id/button"：该组件与id为button的组件右对齐
android:layout_alignLeft="@id/button"：该组件与id为button的组件左对齐
android:layout_alignTop="@id/button"：该组件与id为button的组件顶部对齐
android:layout_alignBottom="@id/button"：该组件与id为button的组件底部对齐
3.外间距：组件与组件之间或者与布局之间的间距——所有组件都通用的属性
android:layout_margin：四个方向的间距都设置
android:layout_marginTop="20dp"：该组件与顶部的间距为20dp
android:layout_marginLeft="20dp"：该组件与左边的间距为20dp
android:layout_marginRight="20dp"：该组件与右边的间距为20dp
android:layout_marginBottom="20dp"：该组件与底部的间距为20dp
4.内边距：组件内的元素距离组件边缘的位置
android:padding="20dp"：四个方向的边距都设置
android:paddingLeft="20dp"：组件内的元素距离组件左边的距离
android:paddingRight="20dp"：组件内的元素距离组件右边的距离
android:paddingTop="20dp"：组件内的元素距离组件顶部的距离

android:paddingBottom="20dp"：组件内的元素距离组件底部的距离

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

<Button
android:id="@+id/hor_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="水平居中" />

<Button
android:id="@+id/cen_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
1b024

android:layout_centerInParent="true"
android:text="居中" />

<Button
android:id="@+id/right_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="右边"
android:layout_toRightOf="@id/cen_btn"
android:layout_alignBottom="@id/cen_btn" />

</RelativeLayout>

<span style="white-space:pre">	</span><img src="https://img-blog.csdn.net/20151202154715617" style="font-family: Arial, Helvetica, sans-serif;" alt="" />

三、AbsoluteLayout（绝对布局）：以坐标的形式来设置布局中各个组件的位置——【已过期】
重要属性：android:layout_x和android:layout_y
如：android:layout_x="40dp"
android:layout_y="40dp"

默认屏幕左上角为坐标原点（0,0），第一个0代表横坐标，向右移动此值增大，第二个0代表纵坐标，向下移动，此值增大。在此布局中的子元素可以相互重叠。

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="20dp"
android:layout_y="20dp"
android:text="用户名" />
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_x="60dp"
android:layout_y="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="20dp"
android:layout_y="60dp"
android:text="密码" />
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_x="60dp"
android:layout_y="60dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登录"
android:layout_x="100dp"
android:layout_y="100dp"/>

</AbsoluteLayout>

<img src="https://img-blog.csdn.net/20151202160255376" alt="" />

四、FrameLayout（帧布局）：每一个组件称为一帧，并且后边的组件会覆盖前边的组件

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

<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#ff0000"
android:layout_gravity="center" />
<TextView
android:layout_width="160dp"
android:layout_height="160dp"
android:background="#00ff00"
android:layout_gravity="center" />
<TextView
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#0000ff"
android:layout_gravity="center" />
<TextView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#8ee5ee"
android:layout_gravity="center" />
<TextView
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#ffaaaa"
android:layout_gravity="center" />

</FrameLayout>

五、TableLayout（表格布局）：以表格的方式来排列控件
一个TableRow代表了一行，所有行中包含控件最多的行拥有的控件数即为列数。直接在TableLayout加控件，控件会占据一行。
常用的属性如下：
android:collapseColumns：隐藏指定的列
android:shrinkColumns：收缩指定的列以适合屏幕，不会挤出屏幕
android:stretchColumns：尽量把指定的列填充空白部分
android:layout_column:控件放在指定的列

android:layout_span:该控件所跨越的列数

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="0,1,2" >

<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"/>
</TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="占据一行"/>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
/>
</TableRow>
</TableLayout>

<span style="white-space:pre">	<img src="https://img-blog.csdn.net/20151202162347888" alt="" /></span>

六、GridLayout（网格布局）：将容器中的控件以M行xN列的方式排列

网格布局是从4.0开始引进的，因此使用时最小SDK版本应设为14。