Android六大布局

原创

DaLiangChen 2022-11-28 17:14:41 博主文章分类：Android ©著作权

文章标签 android 权重 xml 文章分类 OpenStack 云计算

©著作权归作者所有：来自51CTO博客作者DaLiangChen的原创作品，请联系作者获取转载授权，否则将追究法律责任

线性布局LinearLayout
帧布局FrameLayout
绝对布局AbsoluteLayout
表格布局TableLayout
网格布局GridLayout
相对布局RelativeLayout

一、LinearLayout(线性布局)

方向有两种，横向和纵向

android:orientation="horizontal" //水平,从左向右 
android:orientation="vertical" //垂直，从上到下

对齐方式

android:gravity 
android:layout_gravity

常用的属性值

android:gravity="center_horizontal" 子控件水平方向居中 
android:gravity="center_vertical" 子控件竖直方向居中
android:gravity="center" 子控件竖直方向和水平方向居中
android:gravity= start || end || top || bottom 子控件左对齐 || 右对齐 || 顶部对齐 || 底部对齐
android:gravity= left || right 子控件左对齐 || 右对齐

案例如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="垂直布局" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="垂直布局" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="垂直布局" />

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="垂直布局" />

    <!-- 第二线性布局 -->
    <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>

Android六大布局_android

二、FrameLayout(帧布局)

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

常用的属性值

android:foreground="@drawable/dog"   //设置前景图片
 android:foregroundGravity="left|top" //设置前景图片位置

案例如下：

<?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"
    android:foreground="@drawable/dog"
    android:foregroundGravity="left|top">

    <TextView

        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="#FF6143" />

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#FFC0CB" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#FFFFE0" />


</FrameLayout>

Android六大布局_android_02

三、绝对布局AbsoluteLayout （已经被弃用）

绝对布局通过设置坐标的方式将位置固定下来，即( android:layout_x , android:layout_y ) ，屏幕左上角为坐标(0,0) 。实际应用中，这种布局用的比较少，因为Android终端一般机型比较多，各自的屏幕大小、分辨率等可能都不一样，如果用绝对布局，可能在有的终端上显示不全等。不利于维护及扩展。

从Android2.3开始弃用。

四、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:占据列数

案例如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:stretchColumns="0,1,2"
    android:layout_width="match_parent" 
    android:layout_height="match_parent">
    
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        
        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="5dp" 
            android:background="#e2a617" 
            android:text="文件管理"
            android:gravity="center"/>
        
        <TextView
            android:layout_width="100dp" 
            android:layout_height="100dp" 
            android:layout_margin="5dp" 
            android:background="#0d637f"
            android:text="应用商店" 
            android:gravity="center"/>
        
        <TextView
            android:layout_width="100dp" 
            android:layout_height="100dp" 
            android:layout_margin="5dp" 
            android:background="#aa2266" 
            android:text="文件管理" 
            android:gravity="center"/>
        
    </TableRow>
    <TableRow>
        
        <TextView
            android:layout_width="100dp" 
            android:layout_height="100dp" 
            android:layout_margin="5dp" 
            android:background="#45e15f"
            android:text="应用管理" 
            android:gravity="center"/>
        
        <TextView
            android:layout_width="200dp"
            android:layout_height="100dp"
            android:layout_margin="5dp" 
            android:background="#3924a4"
            android:text="应用中心" 
            android:gravity="center" 
            android:layout_span="2"/>
        
    </TableRow>
</TableLayout>

Android六大布局_xml_03

五、GridLayout(网格布局)

网格布局是 Android 4.0 后新增的一个布局,与TableLayout有些类似;

常用属性：

名称	案例	解释
设置组件的排列方式	android:orientation=""	vertical(竖直,默认)或者horizontal(水平)
设置组件的对齐方式	android:layout_gravity=""	center,le,right,buttom
设置有多少行	android:rowCount="4"	设置网格布局有4行
设置有多少列	android:columnCount="4"	设置网格布局有4列
组件在第几行	android:layout_row="1"	从0开始计算，1表组件位于第二行
组件在第几列	android:layout_column="2"	从0开始计算，2表组件位于第三列
横跨几行	android:layout_rowSpan="2"	纵向横跨2行
横跨几列	android:layout_columnSpan="3"	横向横跨3列
设置行宽度	android:layout_rowWeight="1"	行宽度占1个单位
设置列宽度	android:layout_columnWeight="1"	列宽度占1个单位
设置间隔	android:layout_margin="2dp"	间隔为2dp

案例如下：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"
    android:rowCount="6"
    android:columnCount="4"> <!--6行4列 实现占满整个屏幕-->
    <EditText
        android:hint="数值"
        android:layout_columnSpan="4" android:layout_gravity="fill_horizontal" android:layout_rowWeight="2"
        />
    <!--跨四列 自动填充 权重2--> <Button
        android:text="清除"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"
        android:textColor="#00F"/>

    //列 行权重为1 <Button
        android:text="后退"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="/"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="x"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>
    //列 行权重为1 <Button
        android:text="7"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="8"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>
    //列 行权重为1 <Button
        android:text="9"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>
    //列 行权重为1 <Button
        android:text="-"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="4"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="5"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="6"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="+"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="1"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="2"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="3"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //列 行权重为1 <Button
        android:text="="
        android:layout_rowSpan="2"
        android:layout_gravity="fill_vertical"
        android:layout_columnWeight="1"
        android:layout_rowWeight="2"
        android:textSize="20dp"
        android:background="#FF9800"/> //跨两行 自动填充 绿色 列权重1 行权重2


    <Button
        android:text="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:layout_columnWeight="2"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

    //跨两列 自动填充 列权重2 行权重1 <Button
        android:text="."
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:textSize="20dp"/>

</GridLayout>

Android六大布局_android_04

六、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 父控件的中央;