首页 > 其他分享 >Android中常用的5大布局详述

Android中常用的5大布局详述

时间：2023-04-03 23:08:45浏览次数：45  
标签：详述 控件 常用 元素 layout 布局 组件 Android android


　 Android的界面是有布局和组件协同完成的，布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。

      

Android中常用的5大布局详述_LinearLayout

      所有的布局方式都可以归类为ViewGroup的5个类别，即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类

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


1. LinearLayout

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

常用的属性：

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


（1）android:orientation="vertical" 表示竖直方式对齐

（2）android:orientation="horizontal"表示水平方式对齐

（3）android:layout_width="fill_parent"定 义当前视图在屏幕上可以消费的宽 度，fill_parent即填充整个屏幕。

（4）android:layout_height="wrap_content": 随着文字栏位的不同    而 改变这个视图的宽度或者高度。有点自动设置框度或者高度的意思   

layout_weight默认值是零，用于给一个线性布局中的诸多视图的重要度赋值。比如说我们在 水平方向上有一个文本标签和两个文本编辑元素，该文本标签并无指定layout_weight值，所以它将占据需要提供的最少空间  ；如果两个文本编辑元素每一个的layout_weight值都设置为1， 则两者平分在父视图布局剩余的宽度(因为我们声明这两者的重要度相等)。如果两个文本编辑元素其中第一个的layout_weight值设置为1，而 第二个的设置为2，则剩余空间的三分之一分给第二个，三分之二分给第一个(正比划分)。(仅在LinearLayou中有效)。

首看看一个样例 使用 weight：

Android中常用的5大布局详述_LinearLayout_02

xml布局：


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="3" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/black"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/holo_blue_light"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/holo_green_dark"
        android:text="TextView" />

</LinearLayout>

复杂一点的样例，使用gravity：

Android中常用的5大布局详述_RelativiLayout_03

XML布局文件：


<span style="font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:background="@android:color/black">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="vertical" >
        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
              >
        </EditText>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:orientation="horizontal"
        android:gravity="right"
        >
 <!-- android:gravity="right"表示LinearLayout内部组件向右对齐 --> 
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="确 认" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消" />

    </LinearLayout>

</LinearLayout></span>

2.FrameLayout(框架布局)

框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层，最后一个添加到框架布局中的视图显示在最顶层，上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。


作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域,

当我们往里面添加组件的时候,所有的组件都会放置于这块区域的左上角;

帧布局的大小由子控件中最大的子控件决定,

如果都组件都一样大的话,同一时刻就只能能看到最上面的那个组件了！

当然我们也可以为组件添加layout_gravity属性,从而制定组件的对其方式

前景图像:

永远处于帧布局最顶的,直接面对用户的图像,,就是不会被覆盖的图片

常用属性:

android:foreground:设置该帧布局容器的前景图像

android:foregroundGravity:设置前景图像显示的位置

实例：xml布局：


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">
    <TextView android:id="@+id/textview1" 
        android:layout_width="300dp"
        android:layout_height="300dp" 
        android:layout_gravity="center" 
        android:background="#FF33ffff" />
    <TextView android:id="@+id/textview2" 
        android:layout_width="240dp"
        android:layout_height="240dp" 
        android:layout_gravity="center" 
        android:background="#FF33ccff" />
    <TextView android:id="@+id/textview3" 
        android:layout_width="180dp"
        android:layout_height="180dp" 
        android:layout_gravity="center" 
        android:background="#FF3399ff" />
    <TextView android:id="@+id/textview4" 
        android:layout_width="120dp"
        android:layout_height="120dp" 
        android:layout_gravity="center" 
        android:background="#FF3366ff" />
    <TextView android:id="@+id/textview5" 
        android:layout_width="60dp"
        android:layout_height="60dp" 
        android:layout_gravity="center" 
        android:background="#FF3300ff" />
</FrameLayout>

效果如下：

Android中常用的5大布局详述_LinearLayout_04

3.TableLayout(表格布局)

把子元素放入到行与列中 不显示行、列或是单元格边界线 单元格不能横跨行，如HTML中一样 表格布局模型以行列的形式管理子控件，每一行为一个TableRow的对象，当然也可以是一个View的对象。TableRow可以添加子控件，每添加一个为一列。

适用于N行N列的布局格式。一个TableLayout由许多TableRow组成，一个TableRow就代表TableLayout中的一行。

　　TableRow是LinearLayout的子类，ablelLayout并不需要明确地声明包含多少行、多少列，而是通过TableRow，以及其他组件来控制表格的行数和列数， TableRow也是容器，因此可以向TableRow里面添加其他组件，没添加一个组件该表格就增加一列。如果想TableLayout里面添加组件，那么该组件就直接占用一行。在表格布局中，列的宽度由该列中最宽的单元格决定，整个表格布局的宽度取决于父容器的宽度（默认是占满父容器本身）。

　　TableLayout继承了LinearLayout，因此他完全可以支持LinearLayout所支持的全部XML属性，除此之外TableLayout还支持以下属性：

 　　　　　　XML属性                                       相关用法                                                    说明

　　1. andriod：collapseColumns           setColumnsCollapsed（int ，boolean）       设置需要隐藏的列的序列号，多个用逗号隔开

　　2.android：shrinkColumns              setShrinkAllColumns（boolean）                 设置被收缩的列的序列号，多个用逗号隔开

　　3.android：stretchColimns             setSretchAllColumnds（boolean）               设置允许被拉伸的列的序列号，多个用逗号隔开

看一下实例会比较好理解：

Android中常用的5大布局详述_TableLayout_05

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:text="Button5"/>  


            <Button android:text="Button6"/>  


        </TableRow>  


        <TableRow>  


            <Button android:text="Button7"/>  


            <Button android:text="Button8"/>  


            <Button android:text="Button9"/>  


        </TableRow>  


    </TableLayout> 



（1）shrinkColumns属性：以0为序，当TableRow里面的控件布满布局时，指定列自动延伸以填充可用部分；当TableRow里面的控件还没有布满布局时，shrinkColumns不起作用。

例：设置 shrinkColumns="2"当第二列过长时会自动延伸填充可用部分（如果不超长，shrinkColumns不起作用）

在布局文件中添加shrinkColumns属性代码：

    <?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"  
        android:shrinkColumns="2"
        >  
        <TableRow>  
            <Button android:text="Button1"/>  
            <Button android:text="Button2"/>  
            <Button android:text="Button333333333333333333333"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button4"/>  
            <Button android:text="Button5"/>  
            <Button android:text="Button6"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button7"/>  
            <Button android:text="Button8"/>  
            <Button android:text="Button9"/>  
        </TableRow>  
    </TableLayout> 

效果如下：

Android中常用的5大布局详述_布局_06


（2）strechColumns属性，以第0行为序，指定列对空白部分进行填充。

在布局中添加stretchColumns属性代码如下：


<?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"  
        android:stretchColumns="2"
        >  
        <TableRow>  
            <Button android:text="Button1"/>  
            <Button android:text="Button2"/>  
            <Button android:text="Button3"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button4"/>  
            <Button android:text="Button5"/>  
            <Button android:text="Button6"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button7"/>  
            <Button android:text="Button8"/>  
            <Button android:text="Button9"/>  
        </TableRow>  
    </TableLayout>

效果如下：

Android中常用的5大布局详述_布局_07


（3）collapseColumns属性：以0行为序，隐藏指定的列

在布局中添加android:collapseColumns="2"指定第3列隐藏：

<?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"  
        android:collapseColumns="2"
        >  
        <TableRow>  
            <Button android:text="Button1"/>  
            <Button android:text="Button2"/>  
            <Button android:text="Button3"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button4"/>  
            <Button android:text="Button5"/>  
            <Button android:text="Button6"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button7"/>  
            <Button android:text="Button8"/>  
            <Button android:text="Button9"/>  
        </TableRow>  
    </TableLayout>

效果如下：

Android中常用的5大布局详述_布局_08


(4)layout_column属性：以0行为序，设置组件显示指定列

(5)layout_span属性：以第0行为序，设置组件显示占用的列数。


布局代码如下： 


<?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"  
                android:layout_span="3"/>  
            <Button android:text="Button2"/>  
            <Button android:text="Button3"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button4"  
                android:layout_column="2"/>  
            <Button android:text="Button5"  
                android:layout_column="0"/>  
            <Button android:text="Button6"/>  
        </TableRow>  
        <TableRow>  
            <Button android:text="Button7"/>  
            <Button android:text="Button8"/>  
            <Button android:text="Button9"/>  
        </TableRow>  
    </TableLayout>


效果如下：

Android中常用的5大布局详述_TableLayout_09

从效果图可知：Button1被设置了占用了3列，Button4被设置显示在地3列，但代码指定Button5显示在第一列，但没有按照设定显示，这样可知TableRow在表格布局中，一行里的组件都会自动放在前一组件的右侧，依次排列，只要确定了所在列，其后面的组件就无法在进行设置位置。

4.RelativeLayout(相对布局)

 RelativeLayout继承于android.widget.ViewGroup，其按照子元素之间的位置关系完成布局的，相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件，也可以是其它子控件,作为Android系统五大布局中最灵活也是最常用的一种布局方式，非常适合于一些比较复杂的界面设计。

   注意：在引用其他子元素之前，引用的ID必须已经存在，否则将出现异常。


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                    本元素的右边缘和某元素的的右边缘对齐

android:layout_alignBaseline             本元素与和某元素的基准线对齐

基线解释：书写英语单词时为了规范书写会设有四条线，从上至下第三条就是基线。基线对齐主要是为了两个控件中显示的英文单词的基线对齐。

图中绿色的水平线就是基线  TextView2 基线和 TextView1对齐，TextView2设置属性

android:layout_alignBaseline="@id/textView1"


Android中常用的5大布局详述_LinearLayout_10

android:layout_alignBottom  本元素的下边缘和某元素的的下边缘对齐 效果：

Android中常用的5大布局详述_TableLayout_11

第三类：属性值为具体的像素值，如30dip，40px
android:layout_marginBottom              离某元素底边缘的距离
android:layout_marginLeft                   离某元素左边缘的距离
android:layout_marginRight                 离某元素右边缘的距离
android:layout_marginTop                   离某元素上边缘的距离


例: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:background="@android:color/black"
    tools:context=".MainActivity" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textSize="30sp"
        android:layout_marginTop="40dp"
        android:background="@android:color/white"
       >
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/editText1"
        android:layout_below="@+id/editText1"
        android:layout_marginRight="78dp"
        android:layout_marginTop="19dp"
        android:text="确定" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignParentRight="true"
        android:text="取消" />

</RelativeLayout>

效果如下：

Android中常用的5大布局详述_布局_12

（1），EditText 控件 位于父控件的上部 使用 layout_alignParentTop；

（1），EditText 控件 相对父控件水平居中使用layout_centerHorizontal；

（1），EditText 控件距离上边框 40dp 使用layout_marginTop；


（2），button1控件右边缘和EditText控件的右边缘对齐使用 layout_alignRight；

（2），button1控件 在EditText控件的下方使用layout_below；


（2），button1控件 距离右边框78dp 使用layout_marginRight；

（2），button1控件 距离上边控件 19dp 使用 layout_marginTop；


（3），button2控件与button2控件基线对齐使用layout_alignBaseline；

（3），button2控件下边缘和button2控件的下边缘对齐使用layout_alignBottom；


（3），button2控件贴紧父元素的右边缘layout_alignParentRight；


 


5.AbsoluteLayout(绝对布局)

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


在Android2.0 API文档中标明该类已经过期，可以使用FrameLayout或者RelativeLayout来代替。

例：

Android中常用的5大布局详述_FrameLayout_13

XML布局文件：


<?xml version = "1.0" encoding = "utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black"
     >

    <TextView
        android:id="@+id/lable"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_x="30dp"
        android:layout_y="50dp"
        android:textColor="@android:color/white"
        android:background="@android:color/holo_orange_dark"
        android:text="我是绝对布局" />

</AbsoluteLayout>


除上面讲过之外常用的几个布局的属性：
(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等

(5) android:layout_gravity  
layout_gravity是用来设置该view相对与父view 的位置

top bottom left   right  center等

 

标签：详述,控件,常用,元素,layout,布局,组件,Android,android
From： https://blog.51cto.com/u_12389088/6167648

相关文章

  • List接口和常用方法
    P2List接口和常用方法一、List接口基本介绍List接口是Collection接口的子接口List集合类中元素有序（即添加顺序和取出顺序一致）、且可重复List集合类中的每一个元素都有其对应的顺序索引，即支持索引。List容器中都对应一个整数型的序号记载其在容器中的位置，可以根据序......
  • Android与STM32通信中巧妙解决中文乱码问题
    前言网上一大堆都是要多种格式相互转换，并且要很大的字库文件，对于小应用工程，小容量的STM32芯片，额外多出这些开销会感到蛮不舒服的，而且绝大部分的乱码问题时发生在STM32这边，所以本文是从Android端解决编码格式转化的问题，STM32那边稍做处理即可，我做的转换是从UTF-8转到GBK解决方案......
  • (4.3)数组、对象及类数组对象，set的用法，正则表达式的常用方法，蓝桥杯备赛-(生成数组、数
    1.1数组、对象及类数组对象1.数组：​ 数组是有序的数据集合，其中的索引值从0开始递增，并且数组有length属性，可以获取数组内的元素个数，其中的值可以是任何的数组类型。2.对象：​ 对象是无序的是由一个或多个键值对组成的数据集合，对象没有length属性。3.伪数组(类数组对象)：​ ......
  • 常用
    1.熟练掌握通过Google：https://google.com搜索解决方案的能力。2.熟练掌握通过GitHub：https://github.com搜索已有轮子的能力。3.熟练掌握通过StackOverflow：https://stackoverflow.com/搜索bug解决方案的能力。......
  • Redis常用命令
    命令参考：https://www.redis.net.cn字符串String操作命令Redis中字符串类型常用命令：*SETkeyvalue 设置指定key的值*GETkey  获取指定key的值*SETEXkeysecondsvalue设置指定key的值，并将key的过期时间设为secon......
  • hbase常用操作
    原文参考：www.51niux.com一、Hbase常用操作1.1hbase命令行介绍$/opt/soft/hbase/bin/hbase--helpBASICUsage:hbase[<options>]<command>[<args>]Options:--configDIR使用的配置目录。默认值：./conf--hostsHOSTS覆盖“regionserver”文件中的列表--aut......
  • 【FastDFS分布式文件系统】5.FastDFS客户端的配置、启动和常用命令
    上一篇我们介绍了FastDFS服务端的tracker追踪服务器和storage存储服务器，本篇来介绍一下客户端的启动，以及外部客户端如何与FastDFS服务端进行连接。和之前一样，服务端部署在三台服务器上：其中192.168.195.129是tracker追踪服务器，192.168.195.130和192.168.195.131......
  • Android开发-Android常用组件-SeekBar拖动条
    4.9 SeekBar拖动条android:max滑动条的最大值android:progress滑动条的当前值android:secondaryProgress二级滑动条的进度android:thumb滑块的drawable 接着要说下SeekBar的事件了，SeekBar.OnSeekBarChangeListener我们只需重写三个对应......
  • ansible 常用模块 copy
    模块说明该copy模块将文件从本地或远程机器复制到远程机器上的某个位置。参数说明ParameterCommentsattributes aliases:attrstringaddedinAnsible2.3生成的文件系统对象应具有的属性。要获得支持的标志，请查看目标系统上chattr的手册页......
  • 成品直播源码推荐，Android 禁止下拉菜单栏
    成品直播源码推荐，Android禁止下拉菜单栏1.屏蔽非锁屏下的下拉菜单栏这种Android系统其实是提供了方法的，只不过是隐藏的，只给系统应用，也就是用mk编译的apk使用。如果第三方应用想要使用，或者Androidstuido编译方式的想要使用。则可以使用反射。 /** *Allowsanapptoco......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99