android布局管理器使用方法

最新推荐文章于 2022-09-27 14:14:27 发布

原创最新推荐文章于 2022-09-27 14:14:27 发布 · 351 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #移动开发

android 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Android应用中五种常用的布局管理器：绝对布局、线性布局、相对布局、表格布局和帧布局。详细阐述了每种布局的特点及使用场景，并通过实例展示了如何配置这些布局。

Android应用的视图是由一个一个组件组成的。为了更好的管理界面中的各个组件，Android提供了布局管理器。使用布局管理器，可以使Android应用的界面具有更好的平台无关性。

一般来说，推荐使用布局管理器来管理组件的分布和大小，而不是直接设置组件的位置和大小，这样可以使组件在不同大小，不同分辨率的手机上呈现相同的效果。

1，绝对布局，AbsoluteLayout。

绝对布局不提供任何布局控制，而是直接通过x,y坐标来控制组件的位置。

使用绝对布局很难兼顾不同大小，不同分辨率的屏幕，因此，往往不推荐使用绝对布局。

例：在AbsoluteLayout中随便放两个组件

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_x="200px"
        android:layout_y="200px"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_x="100px"
        android:layout_y="100px"/>

</AbsoluteLayout>

如图，不同分辨率下，组件距离右边界距离都不相同。

2，线性布局，LinearLayout。

线性布局可以横向排列，也可以纵向排列。它是将组件一个一个挨着排列起来。

属性	说明
android:gravity	设置布局管理器內组件的对齐方式，该属性支持top, bottom, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal, center, fill, clip_vertical, clip_horizontal。也可以同时指定多种对齐方式，如：left\|center_vertical，代表组件在屏幕左边，而且垂直居中对齐。
android:orientation	设置布局管理器內组件的排列方式。horizontal(水平排列)，vertical(垂直排列)。
android:layout_weight	表示元素占据的空间大小的比例

例：

<?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">
    
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FDAC12"
        android:layout_weight="3"
        android:orientation="horizontal"
        android:gravity="left|center_vertical">

        <Button
            android:layout_width="100px"
            android:layout_height="100px"
            android:background="#111111"/>

        <Button
            android:layout_width="100px"
            android:layout_height="100px"
            android:background="#333333" />
        <Button
            android:layout_width="100px"
            android:layout_height="100px"
            android:background="#555555" />
        <Button
            android:layout_width="100px"
            android:layout_height="100px"
            android:background="#777777"/>


    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#123456"/>


</LinearLayout>

结果为：

子组件中， LinearLayout的weight为3，TextView的weight为1，所以，LinearLayout和TextView占屏幕的比例为3:1，又因为该布局管理器的android:orientation为vertical，所以，两个子组件的是垂直排列的。

子组件LinearLayout中有四个Button，该LinearLayout的gravity为left|center_vertical，所以该LinearLayout的子组件，也就是Button，是从左方＋垂直中心开始布局的。

3，相对布局，RelativeLayout。

相对布局容器内子组件的位置总是相对兄弟组件，父容器来决定的。RelativeLayout是Android五大布局中最常用的一种。

属性	说明
android:gravity	设置该布局容器内部各子组件的对齐方式。
android:ignoreGravity	设置哪个组件不受gravity的影响。

RelativeLayout提供了一个内部类RelativeLayout.LayoutParams，该类提供了大量的XML属性来控制布局管理器中子组件的布局分布。

RelativeLayout.LayoutParams类中设置为true和false的属性。

属性	说明
android:layout_centerHorizontal	是否位于容器的水平居中位置
android:layout_centerVertical	是否位于容器的垂直居中位置
android:layout_centerInParent	是否位于容器的中央位置
android:layout_alignParentBottom	是否与容器底端对齐
android:layout_alignParentLeft	是否与容器左边对齐
android:layout_alignParentRight	是否与容器右边对齐
android:layoutParentTop	是否与容器顶端对齐

RelativeLayout.LayoutParams类中设置为其它组件ID的属性

属性	说明
android:layout_toRightOf	该子组件位于给出ID组件的右侧
android:layout_toLeftOf	该子组件位于给出ID组件的左侧
android:layout_above	该子组件位于给出ID组件的上方
android:layout_below	该子组件位于给出ID组件的下方
android:layout_alignTop	该子组件与给出ID组件的上边界对齐
android:layout_alignBottom	该子组件与给出ID组件的下边界对齐
android:layout_alignLeft	该子组件与给出ID组件的左边界对齐
android:layout_alignRight	该子组件与给出ID组件的右边界对齐

例：梅花布局效果

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

    <Button
        android:id="@+id/center"
        android:layout_width="100px"
        android:layout_height="100px"
        android:background="#11FFFF"
        android:layout_centerInParent="true"/>
    
    <Button
        android:layout_toLeftOf="@+id/center"
        android:layout_alignBottom="@+id/center"
        android:layout_width="100px"
        android:layout_height="100px"
        android:background="#333FFF"
        />
    
    <Button
        android:layout_width="100px"
        android:layout_height="100px"
        android:layout_toRightOf="@+id/center"
        android:layout_alignTop="@+id/center"
        android:background="#555555"/>
    
    <Button
        android:layout_width="100px"
        android:layout_height="100px" 
        android:layout_above="@+id/center"
        android:layout_alignLeft="@+id/center"
        android:background="#888FFF"/>
    
    <Button
        android:layout_width="100px"
        android:layout_height="100px"
        android:layout_below="@+id/center"
        android:layout_alignRight="@+id/center"
        android:background="#111111"/>
    
    
</RelativeLayout>

结果为：

4，表格布局，TableLayout

表格布局采用行，列的形式来管理组件。布局非常简单，并不需要明确声明包含多少行，多少列，只需要一行一行的添加。

每次向TableLayout添加一个TableRow，该TableRow就是一个表格行，可以向该TableRow中添加组件。

如果像TalbeLayout中添加其它组件，将会之间占据一行。

属性	说明
android:collapseColumns	设置需要被隐藏的列序列号
android:shrinkColumns	设置允许被收缩的列序列号
android:stretchColumns	设置允许被拉伸的列序列号

例：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:collapseColumns="0, 2"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <TableRow>
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1"
            android:background="#ABCDEF"/>

        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button2"
            android:background="#098765"/>

        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button3"
            android:background="#123456"/>

        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button4"
            android:background="#456789"/>

        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button6"
            android:background="#857853"/>

    </TableRow>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="独占一行的按钮"
        android:background="#FBCDEA"/>

    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="独占一行的文本"
        android:background="#EADBCA"/>

</TableLayout>

结果为：

在TableLayout中，我设置了collapseColumns为0， 2，也就是说在该TableLayout中，隐藏了所有的第0列和第2列。所以我在TableRow中设置的5个按钮中，隐藏了0和2，只显示了button1, button3, button4。TableRow后面的Button，TextView，因为除TableRow外，其它组件都占一行，所以效果如图。

5，帧布局

帧布局把所有子组件都放在界面的左上角，后写的子组件会覆盖先前的组件。帧布局没有任何的定位方式。所以，帧布局用的非常少。

例：

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

    <Button
        android:layout_width="300px"
        android:layout_height="300px"
        android:background="#000000"/>

    <Button
        android:layout_width="200px"
        android:layout_height="200px"
        android:background="#555FFF"/>

    <Button
        android:layout_width="100px"
        android:layout_height="100px"
        android:background="#FFF222" />

    <Button
        android:layout_width="50px"
        android:layout_height="50px"
        android:background="#DEACF2"/>

</FrameLayout>

结果为：