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"><!-- 这一张图片我已经上传了!http://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>