Android五大常用布局

本博文代码汇总以及涉及资源文件下载

Android中常用的5大布局方式有以下几种：

线性布局（LinearLayout）：按照垂直或者水平方向布局的组件。帧布局（FrameLayout）：组件从屏幕左上方布局组件。表格布局（TableLayout）：按照行列方式布局组件。相对布局（RelativeLayout）：相对其它组件的布局方式。GridLayout：按照自定义行列进行布局。

1. 线性布局

线性布局是Android开发中最常见的一种布局方式，它是按照垂直或者水平方向来布局，通过“android:orientation”属性可以设置线性布局的方向。属性值有垂直（vertical）和水平（horizontal）两种。

常用的属性：

android:orientation：可以设置布局的方向 android:gravity:用来控制组件的对齐方式 layout_weight：控制各个组件在布局中的相对大小

例子01：

效果图：

XML编写：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="right" > <!-- android:gravity="right"表示Button组件向右对齐 --> <Button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="确定" /> <Button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="取消" /> </LinearLayout> </LinearLayout>

例子02：

效果图：

XML布局编写：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#EAEAEA"> <LinearLayout android:layout_width="match_parent" android:layout_height="40sp" android:orientation="horizontal" android:background="#A020F0"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="登录" android:textSize="20sp" android:textColor="#fff" android:gravity="center"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal" android:padding="20sp" android:background="@drawable/panel_bg"><!-- 这一张图片我已经上传了!https://img-blog.csdn.net/20170324093441113?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWFydmVsX19EZWFk/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast --> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入用户名" android:paddingLeft="10dp" android:layout_marginBottom="5dp"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入密码" android:paddingLeft="10dp" android:layout_marginBottom="5dp" android:id="@+id/editText" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="注册" android:textSize="15sp" android:layout_weight="1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登录"/> </LinearLayout> </LinearLayout> </LinearLayout>

例子03：

效果图：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <TextView android:text="red" android:gravity="center_horizontal" android:background="#aa0000" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" /> <!--android:gravity="center_horizontal"水平居中 --> <!--layout_weight属性以控制各个控件在布局中的相对大小。layout_weight属性是一个非负整数值。 线性布局会根据该控件layout_weight值与其所处布局中所有控件layout_weight值之和的比值为该控件分配占用的区域。 例如，在水平布局的LinearLayout中有两个Button，这两个Button的layout_weight属性值都为1， 那么这两个按钮都会被拉伸到整个屏幕宽度的一半。如果layout_weight指为0，控件会按原大小显示，不会被拉伸； 对于其余layout_weight属性值大于0的控件，系统将会减去layout_weight属性值为0的控件的宽度或者高度， 再用剩余的宽度或高度按相应的比例来分配每一个控件显示的宽度或高度--> <TextView android:text="Teal" android:gravity="center_horizontal" android:background="#008080" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> <TextView android:text="blue" android:gravity="center_horizontal" android:background="#0000aa" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" /> <TextView android:text="orange" android:gravity="center_horizontal" android:background="#FFA500" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" /> </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <TextView android:text="row one" android:textSize="15pt" android:background="#aa0000" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> <!-- --> <TextView android:text="row two" android:textSize="15pt" android:background="#DDA0DD" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> <TextView android:text="row three" android:textSize="15pt" android:background="#008080" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> <TextView android:text="row four" android:textSize="15pt" android:background="#FFA500" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> </LinearLayout>

2.帧布局：

帧布局是从屏幕的左上角（0,0）坐标开始布局，多个组件层叠排列，第一个添加的组件放到最底层，最后添加到框架中的视图显示在最上面。上一层的会覆盖下一层的控件。

效果图：

核心代码：

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="300dp" android:layout_height="300dp" android:background="#00BFFF" /> <TextView android:layout_width="260dp" android:layout_height="260dp" android:background="#FFC0CB" /> <TextView android:layout_width="220dp" android:layout_height="220dp" android:background="#0000FF" /> </FrameLayout>

效果图：

XML文件代码：

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- 依次定义6个TextView,先定义的TextView位于底层 后定义的TextView位于上层 --> <TextView android:id="@+id/view01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#f00" android:height="320px" android:width="320px" /> <TextView android:id="@+id/view02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#0f0" android:height="280px" android:width="280px" /> <TextView android:id="@+id/view03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#00f" android:height="240px" android:width="240px" /> <TextView android:id="@+id/view04" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#ff0" android:height="200px" android:width="200px" /> <TextView android:id="@+id/view05" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#f0f" android:height="160px" android:width="160px" /> <TextView android:id="@+id/view06" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#0ff" android:height="120px" android:width="120px" /> </FrameLayout>

3.表格布局：

表格布局是一个ViewGroup以表格显示它的子视图（view）元素，即行和列标识一个视图的位置。 表格布局常用的属性如下： android:collapseColumns：隐藏指定的列 android:shrinkColumns：收缩指定的列以适合屏幕，不会挤出屏幕 android:stretchColumns：尽量把指定的列填充空白部分 android:layout_column:控件放在指定的列 android:layout_span:该控件所跨越的列数

效果图：

核心代码

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TableRow> <Button android:text="Button1" /> <Button android:text="Button2" /> <Button android:text="Button3" /> </TableRow> <TableRow> <Button android:text="Button4" /> <Button android:layout_span="2" android:text="Button5" /> </TableRow> </TableLayout>

效果图：

核心代码

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/message_list_view_bg" > <TableRow android:id="@+id/layout_1" android:layout_width="fill_parent" android:layout_height="47dip" android:background="@drawable/top_bg" > <TextView android:id="@+id/textView1" style="@style/TitleTextView" android:layout_height="47dip" android:text="@string/login" /> </TableRow> <TableLayout android:id="@+id/layout_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dip" android:background="@drawable/panel_bg" android:minHeight="165dip" > <TableRow android:id="@+id/tableRow2" android:layout_width="fill_parent" android:layout_height="wrap_content" > <EditText android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="50dip" android:layout_marginLeft="5dip" android:layout_marginRight="5dip" android:layout_marginTop="10dip" android:layout_weight="1" android:hint="@string/name" android:inputType="number" android:paddingLeft="10dip" android:singleLine="true" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" > <EditText android:id="@+id/password" android:layout_width="fill_parent" android:layout_height="50dip" android:layout_marginLeft="5dip" android:layout_marginRight="5dip" android:layout_weight="1" android:hint="@string/password" android:inputType="textPassword" android:paddingLeft="10dip" android:singleLine="true" /> </TableRow> <TableRow android:id="@+id/tableRow4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dip" android:layout_marginRight="10dip" android:layout_marginTop="5dip" android:minWidth="100dip" > <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="10" android:gravity="center_vertical" android:text="@string/signin" android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="#7089c0" android:textSize="18sp" /> <Button android:id="@+id/login" android:layout_width="wrap_content" android:layout_height="40dip" android:layout_weight="1" android:background="@drawable/button" android:minWidth="80dip" android:text="@string/login" android:textColor="#fff" android:textSize="18sp" /> </TableRow> </TableLayout> </TableLayout>

4.相对布局：

例子01：

效果图：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10px" > <TextView android:id="@+id/tev1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="30dp" android:text="Please Type Here:" /> <EditText android:id="@+id/tx1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/tev1" /> <Button android:id="@+id/btn1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_below="@id/tx1" android:layout_alignParentRight="true" android:text="确定" /> <Button android:id="@+id/btn2" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_below="@id/tx1" android:layout_toLeftOf="@id/btn1" android:layout_marginRight="30dp" android:text="取消" /> </RelativeLayout>

例子02：

效果图：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/message_list_view_bg" > <RelativeLayout android:id="@+id/layout_1" android:layout_width="fill_parent" android:layout_height="47dip" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="@drawable/top_bg" > <TextView android:id="@+id/textView1" style="@style/TitleTextView" android:text="@string/login" /> </RelativeLayout> <RelativeLayout android:id="@+id/layout_2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@id/layout_1" android:layout_marginLeft="10dip" android:layout_marginRight="10dip" android:layout_marginTop="10dip" android:background="@drawable/panel_bg" android:minHeight="165dip" > <EditText android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="50dip" android:layout_alignParentTop="true" android:layout_marginLeft="5dip" android:layout_marginRight="5dip" android:layout_marginTop="10dip" android:hint="@string/name" android:paddingLeft="0dip" android:singleLine="true" android:textColor="#000000" /> <EditText android:id="@+id/password" android:layout_width="fill_parent" android:layout_height="50dip" android:layout_below="@id/name" android:layout_marginLeft="5dip" android:layout_marginRight="5dip" android:hint="@string/password" android:paddingLeft="10dip" android:inputType="textPassword" android:singleLine="true" android:textColor="#000000" /> <Button android:id="@+id/login" android:layout_width="wrap_content" android:layout_height="40dip" android:layout_alignRight="@id/password" android:layout_below="@id/password" android:layout_marginBottom="10dip" android:layout_marginLeft="0dip" android:layout_marginRight="2dip" android:layout_marginTop="5dip" android:background="@drawable/button" android:minWidth="100dip" android:text="@string/login" android:textColor="#fff" android:textSize="18sp" /> <TextView android:id="@+id/signin_text" android:layout_width="wrap_content" android:layout_height="40dip" android:layout_alignLeft="@id/password" android:layout_below="@id/password" android:layout_marginBottom="10dp" android:layout_marginTop="5dip" android:gravity="center_vertical" android:paddingLeft="5dip" android:text="@string/signin" android:textColor="#7089c0" android:textSize="18sp" /> </RelativeLayout> </RelativeLayout>

5:4.0以后新增布局——GridLayout

类似于表格布局，是Android 4.0及以上版本新增加的布局 使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列 分为水平和垂直两种方式，默认是水平布局，一个控件挨着一个控件从左到右依次排列 指定android:columnCount设置列数的属性后，控件会自动换行进行排列 指定某控件显示在固定的行或列，只需设置该子控件的android:layout_row和android:layout_column属性即可，计数从0开始 设置某控件跨越多行或多列，只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值，再设置其layout_gravity属性为fill即可，前一个设置表明该控件跨越的行数或列数，后一个设置表明该控件填满所跨越的整行或整列。

效果图：

<?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/groot" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal" android:padding="10dip" android:rowCount="7" android:columnCount="4" > <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_columnSpan="4" android:gravity="right" android:textSize="50sp" android:text="0" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_columnSpan="4" android:text="清除" /> 　　<Button android:id="@+id/one" android:text="1"/> 　　<Button android:id="@+id/two" android:text="2"/> 　　　<Button android:id="@+id/three" android:text="3"/> 　　<Button android:id="@+id/devide" android:text="/" android:layout_gravity="fill_horizontal"/> 　　<Button android:id="@+id/four" android:text="4"/> 　　<Button android:id="@+id/five" android:text="5"/> 　　<Button android:id="@+id/six" android:text="6"/> 　　<Button android:id="@+id/multiply" android:layout_gravity="fill_horizontal" android:text="×"/> 　　<Button android:id="@+id/seven" android:text="7"/> 　　<Button android:id="@+id/eight" android:text="8"/> 　　<Button android:id="@+id/nine" android:text="9"/> <Button android:id="@+id/minus" android:layout_gravity="fill_horizontal" android:text="-"/> <Button android:id="@+id/zero" android:text="0"/> 　　<Button android:id="@+id/point" android:text="."/> 　　<Button android:id="@+id/equal" android:text="-/+"/> <Button android:id="@+id/plus" android:layout_gravity="fill" android:text="+" android:layout_rowSpan="2"/> <Button android:id="@+id/a" android:text="=" android:layout_gravity="fill" android:layout_columnSpan="3"/> </GridLayout>