Android——六大基本布局总结_安卓图片一大三小布局

基本理论：
Android六大基本布局分别是：

线性布局LinearLayout

表格布局TableLayout

相对布局RelativeLayout

层布局FrameLayout

绝对布局AbsoluteLayout

网格布局GridLayout。
其中，表格布局是线性布局的子类。网格布局是android 4.0后新增的布局。
在手机程序设计中，绝对布局基本上不用，用得相对较多的是线性布局和相对布局。

（一）线性布局LinearLayout
线性布局在开发中使用最多，具有垂直方向与水平方向的布局方式，通过设置属性“android:orientation”控制方向，属性值垂直（vertical）和水平(horizontal)，默认水平方向。
android:gravity：内部控件对齐方式，常用属性值有center、center_vertical、center_horizontal、top、bottom、left、right等。
这个属性在布局组件RelativeLayout、TableLayout中也有使用，FrameLayout、AbsoluteLayout则没有这个属性。
center：居中显示，这里并不是表示显示在LinearLayout的中心，当LinearLayout线性方向为垂直方向时，center表示水平居中，但是并不能垂直居中，此时等同于center_horizontal的作用；同样当线性方向为水平方向时，center表示垂直居中，等同于center_vertical。
top、bottom、left、right顾名思义为内部控件居顶、低、左、右布局。
这里要与android:layout_gravity区分开，layout_gravity是用来设置自身相对于父元素的布局。
android:layout_weight：权重，用来分配当前控件在剩余空间的大小。
使用权重一般要把分配该权重方向的长度设置为零，比如在水平方向分配权重，就把width设置为零。

先来看一下效果：

下面来看看代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >
 
    <EditText 
        android:id="@+id/edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
    <!-- 
        第一线性布局
        LinearLayout一定要设置方向
        android:orientation 值:horizontal 元素水平摆放  |  vertical 元素垂直摆放
        android:gravity="right"设置对齐方式
     -->
     <LinearLayout 
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:gravity="center" >
         
         <Button
             android:id="@+id/button" 
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="确定"/>
         <Button 
             android:id="@+id/button1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="取消" />
     </LinearLayout>
     
     <!-- 第二线性布局 -->
     <LinearLayout 
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal" >
         
         <TextView 
             android:layout_width="wrap_content"
             android:layout_height="200dp"
             android:layout_weight="1"
             android:background="#ff0000"
             android:text="红色"/>
         
         <TextView 
             android:layout_width="wrap_content"
             android:layout_height="200dp"
             android:layout_weight="1"
             android:background="#00ff00"
             android:text="绿色"/>
         
         <TextView 
             android:layout_width="wrap_content"
             android:layout_height="200dp"
             android:layout_weight="1"
             android:background="#0000ff"
             android:text="蓝色"/>
         
         <TextView 
             android:layout_width="wrap_content"
             android:layout_height="200dp"
             android:layout_weight="2"
             android:background="#00ffff"
             android:text="青色"/>
     </LinearLayout>
</LinearLayout>

 

（二）相对布局RelativeLayout
相对布局可以让子控件相对于兄弟控件或父控件进行布局，可以设置子控件相对于兄弟控件或父控件进行上下左右对齐。
RelativeLayout能替换一些嵌套视图，当我们用LinearLayout来实现一个简单的布局但又使用了过多的嵌套时，就可以考虑使用RelativeLayout重新布局。
相对布局就是一定要加Id才能管理。

RelativeLayout中子控件常用属性：
1、相对于父控件，例如：android:layout_alignParentTop=“true”
android:layout_alignParentTop      控件的顶部与父控件的顶部对齐;
android:layout_alignParentBottom  控件的底部与父控件的底部对齐;
android:layout_alignParentLeft      控件的左部与父控件的左部对齐;
android:layout_alignParentRight     控件的右部与父控件的右部对齐;

2、相对给定Id控件，例如：android:layout_above=“@id/**”
android:layout_above 控件的底部置于给定ID的控件之上;
android:layout_below     控件的底部置于给定ID的控件之下;
android:layout_toLeftOf    控件的右边缘与给定ID的控件左边缘对齐;
android:layout_toRightOf  控件的左边缘与给定ID的控件右边缘对齐;
android:layout_alignBaseline  控件的baseline与给定ID的baseline对齐;
android:layout_alignTop        控件的顶部边缘与给定ID的顶部边缘对齐;
android:layout_alignBottom   控件的底部边缘与给定ID的底部边缘对齐;
android:layout_alignLeft       控件的左边缘与给定ID的左边缘对齐;
android:layout_alignRight      控件的右边缘与给定ID的右边缘对齐;

3、居中，例如：android:layout_centerInParent=“true”
android:layout_centerHorizontal 水平居中;
android:layout_centerVertical    垂直居中;
android:layout_centerInParent  父控件的中央;

先来看一下效果：

版本低了，文本框可以在AndroidManifest.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:padding="10dp"
    tools:context="${relativePackage}.${activityClass}" >
    
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/et1"
        android:text="@string/username" />
    
    <EditText 
        android:id="@+id/et1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/text1"
        android:layout_marginTop="23dp"
        android:inputType="text"
        android:maxLines="12"
        android:hint="用户名" />
    
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/et2"
        android:text="@string/pwd" />
    <EditText
        android:id="@+id/et2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/et1"
        android:layout_marginTop="23dp"
        android:inputType="text"
        android:maxLines="12"
        android:layout_toRightOf="@id/text2"
        android:hint="密码" />
 
    <Button
        android:id="@+id/button1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_marginRight="14dp"
        android:layout_toLeftOf="@+id/button2"
        android:text="登录" />
 
    <Button
        android:id="@+id/button2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/et2"
        android:layout_below="@+id/et2"
        android:layout_marginTop="23dp"
        android:text="退出" />
    
</RelativeLayout>

 

（三）层布局FrameLayout

帧布局或叫层布局，从屏幕左上角按照层次堆叠方式布局，后面的控件覆盖前面的控件。
该布局在开发中设计地图经常用到，因为是按层次方式布局，我们需要实现层面显示的样式时就可以
采用这种布局方式，比如我们要实现一个类似百度地图的布局，我们移动的标志是在一个图层的上面。
在普通功能的软件设计中用得也不多。层布局主要应用就是地图方面。

上面有三层颜色，点击下面的案列上面会出现对应的样式

activity_main.xml中代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >
 
    <FrameLayout 
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_margin="20dp"
        android:layout_height="wrap_content" >
        
        <TextView 
            android:id="@+id/text1"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="#0000ff" />
        
        <TextView 
            android:id="@+id/text2"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="#00ff00" />
        
        <TextView 
            android:id="@+id/text3"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="#ff0000" />
    </FrameLayout>
    
    <LinearLayout 
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        
        <Button 
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginLeft="20dp"
            android:background="#0000ff"
            android:text="颜色1"/>
        
        <Button 
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginRight="20dp"
            android:layout_marginLeft="20dp"
            android:background="#00ff00"
            android:text="颜色2"/>
        
        <Button 
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ff0000"
            android:layout_marginRight="20dp"
            android:text="颜色3"/>
    </LinearLayout>
 
</LinearLayout>

MainActivity.java中代码：

public class MainActivity extends Activity {
    
    private FrameLayout frame;
    private TextView text1;
    private TextView text2;
    private TextView text3;
    private Button button1;
    private Button button2;
    private Button button3;
    
    private OnClickListener listener = new OnClickListener() {
        
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
            case R.id.button1:
                //删除
                frame.removeView(text1);
                //创建
                frame.addView(text1);
                break;
            case R.id.button2:
                frame.removeViewInLayout(text2);
                frame.addView(text2);
                break;
            case R.id.button3:
                frame.removeViewInLayout(text3);
                frame.addView(text3);
                break;
            default:
                break;
            }
        }
    };
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        frame = (FrameLayout) findViewById(R.id.frame);
        text1 = (TextView) findViewById(R.id.text1);
        text2 = (TextView) findViewById(R.id.text2);
        text3 = (TextView) findViewById(R.id.text3);
        button1 = (Button) findViewById(R.id.button1);
        button2 = (Button) findViewById(R.id.button2);
        button3 = (Button) findViewById(R.id.button3);
        
        button1.setOnClickListener(listener);
        button2.setOnClickListener(listener);
        button3.setOnClickListener(listener);
    }
}

 

（四）绝对布局AbsoluteLayout
 绝对布局中将所有的子元素通过设置android:layout_x 和 android:layout_y属性，将子元素的坐标位置固定下来，即坐标(android:layout_x, android:layout_y) ，layout_x用来表示横坐标，layout_y用来表示纵坐标。屏幕左上角为坐标(0,0)，横向往右为正方，纵向往下为正方。实际应用中，这种布局用的比较少，因为Android终端一般机型比较多，各自的屏幕大小。分辨率等可能都不一样，如果用绝对布局，可能导致在有的终端上显示不全等。所有基本不会使用，这里就不多介绍了。

 

（五）表格布局TableLayout
表格布局，适用于多行多列的布局格式，每个TableLayout是由多个TableRow组成，一个TableRow就表示TableLayout中的每一行，这一行可以由多个子元素组成。实际上TableLayout和TableRow都是LineLayout线性布局的子类。但是TableRow的参数android:orientation属性值固定为horizontal，且android:layout_width=MATCH_PARENT，android:layout_height=WRAP_CONTENT。所以TableRow实际是一个横向的线性布局，且所以子元素宽度和高度一致。
注意：在TableLayout中，单元格可以为空，但是不能跨列，意思是只能不能有相邻的单元格为空。
TableLayout常用属性：
android:shrinkColumns：设置可收缩的列，内容过多就收缩显示到第二行
android:stretchColumns：设置可伸展的列，将空白区域填充满整个列
android:collapseColumns：设置要隐藏的列
列的索引从0开始，shrinkColumns和stretchColumns可以同时设置。
子控件常用属性：
android:layout_column：第几列
android:layout_span：占据列数

效果图是一个计数器页面：

代码（这里这是页面，数据处理部分，完整功能计算器请访问：https://blog.csdn.net/qq_40205116/article/details/88550843）：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*" >
 
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@android:color/holo_blue_bright"
        android:textSize="30dp"
        android:gravity="center|right"
        android:text="" />
    
    <TableRow 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >
        <Button
            android:id="@+id/btn01"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="C" />
        <Button
            android:id="@+id/btn02"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="←" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="%" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="÷" />
    </TableRow>
    <TableRow 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="7" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="8" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="9" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="x" />
    </TableRow>
    <TableRow 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="4" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="5" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="6" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="-" />
    </TableRow>
    <TableRow 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="2" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="3" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="+" />
    </TableRow>
    <TableRow 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="." />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="0" />
        <Button
            android:id="@+id/btn19"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="2"
            android:text="=" />
    </TableRow>
</TableLayout>

 

（六）网格布局GridLayout
作为android 4.0 后新增的一个布局,与前面介绍过的TableLayout(表格布局)其实有点大同小异;
不过新增了一些东东
①跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式
②容器中的组件可以跨多行也可以跨多列(相比TableLayout直接放组件,占一行相比较)
因为是android 4.0新增的,API Level 14,在这个版本以前的sdk都需要导入项目。这里不解释。

常用属性:
排列对齐:
①设置组件的排列方式:   android:orientation=""     vertical(竖直,默认)或者horizontal(水平)
②设置组件的对齐方式:   android:layout_gravity=""   center,left,right,buttom

设置布局为几行几列:
①设置有多少行: android:rowCount="4"        //设置网格布局有4行
②设置有多少列: android:columnCount="4"    //设置网格布局有4列

设置某个组件位于几行几列
注:都是从0开始算的哦！
①组件在第几行: android:layout_row = "1"   //设置组件位于第二行 
②组件在第几列: android:layout_column = "2"   //设置该组件位于第三列

设置某个组件横跨几行几列（合并）:
横跨几行: android:layout_rowSpan = "2"     //纵向横跨2行
横跨几列: android:layout_columnSpan = "3"     //横向横跨2列

android:layout_gravity="fill"填充

效果图：

这里只简单的设置了一下按钮演示，大家也可以用gridLayout来做一个计数器页面（这里我就不写了，因为和上面那个表格布局差不多）。

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:rowCount="3"
    android:orientation="horizontal"
    tools:context="${relativePackage}.${activityClass}" >
    <!--
        columnCount列
        rowCount行
        orientation排列方式，horizontal水平，vertical垂直
      -->
 
    <!-- 
        layout_columnSpan合并列单元格
        layout_rowSpan合并行单元格
        layout_gravity="fill"填充
     -->
    <Button
        android:id="@+id/button1"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="bun11" />
 
    <Button
        android:id="@+id/button2"
        android:text="bun12" />
 
    <Button
        android:id="@+id/button3"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        android:text="bun13" />
 
    <Button
        android:id="@+id/button5"
        android:text="bun21" />
 
    <Button
        android:id="@+id/button6"
        android:text="bun22" />
 
    <Button
        android:id="@+id/button7"
        android:text="bun23" />
 
</GridLayout>

 

除上面讲过之外常用的几个布局的属性：
(1)layout_margin 
用于设置控件边缘相对于父控件的边距
android:layout_marginLeft 
android:layout_marginRight
android:layout_marginTop
android:layout_marginBottom

(2) layout_padding 
用于设置控件内容相对于控件边缘的边距
android:layout_paddingLeft
android:layout_paddingRight
android:layout_paddingTop
android:layout_paddingBottom

(3) layout_width/height
用于设置控件的高度和宽度
wrap_content 内容包裹，表示这个控件的里面文字大小填充
fill_parent 跟随父窗口
match_parent

(4) gravity 
用于设置View组件里面内容的对齐方式
top bottom left   right  center等