Android中5大布局方式详解

最新推荐文章于 2023-01-25 14:17:31 发布

yang_zhi_xiang

最新推荐文章于 2023-01-25 14:17:31 发布

阅读量501

点赞数 2

分类专栏： Android学习文章标签： android 布局

Android学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

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

1. 线性布局
线性布局是Android开发中最常见的一种布局方式，它是按照垂直或者水平方向来布局，通过“android:orientation”属性可以设置线性布局的方向。属性值有垂直（vertical）和水平（horizontal）两种。
常用的属性：
android:orientation：可以设置布局的方向
android:gravity : 用来控制组件的对齐方式
layout_weight：控制各个组件在布局中的相对大小
第一个实例
①效果图：

这里写图片描述

②核心代码如下：

main.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>

第二个实例
①效果图：

这里写图片描述

②核心代码：
mian.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: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）坐标开始布局，多个组件层叠排列，第一个添加的组件放到最底层，最后添加到框架中的视图显示在最上面。上一层的会覆盖下一层的控件。

简单的例子
①效果图：

这里写图片描述

② 核心代码：
main.xml

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

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

简单的列子：
①效果图：

这里写图片描述

② 核心代码：
main.xml

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

4.相对布局
相对布局是按照组件之间的相对位置来布局，比如在某个组件的左边，右边，上面和下面等。

RelativeLayout用到的一些重要的属性：
第一类:属性值为true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物
第二类：属性值必须为id的引用名“@id/id-name”

android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐
第三类：属性值为具体的像素值，如30dip，40px
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离
EditText的android:hint
设置EditText为空时输入框内的提示信息。
android:gravity　
android:gravity属性是对该view 内容的限定．比如一个button 上面的text. 你可以设置该text 在view的靠左，靠右等位置．以button为例，android:gravity=”right”则button上面的文字靠右
android:layout_gravity
android:layout_gravity是用来设置该view相对与起父view 的位置．比如一个button 在linearlayout里，你想把该button放在靠左、靠右等位置就可以通过该属性设置．以button为例，android:layout_gravity=”right”则button靠右
android:layout_alignParentRight
使当前控件的右端和父控件的右端对齐。这里属性值只能为true或false，默认false。
android:scaleType：
android:scaleType是控制图片如何resized/moved来匹对ImageView的size。ImageView.ScaleType / android:scaleType值的意义区别：
CENTER /center 按图片的原来size居中显示，当图片长/宽超过View的长/宽，则截取图片的居中部分显示
CENTER_CROP / centerCrop 按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽)
CENTER_INSIDE / centerInside 将图片的内容完整居中显示，通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽
FIT_CENTER / fitCenter 把图片按比例扩大/缩小到View的宽度，居中显示
FIT_END / fitEnd 把图片按比例扩大/缩小到View的宽度，显示在View的下部分位置
FIT_START / fitStart 把图片按比例扩大/缩小到View的宽度，显示在View的上部分位置
FIT_XY / fitXY 把图片不按比例扩大/缩小到View的大小显示
MATRIX / matrix 用矩阵来绘制，动态缩小放大图片来显示。
要注意一点，Drawable文件夹里面的图片命名是不能大写的。

简单的例子
①效果图：

这里写图片描述

② 核心代码：
main.xml

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