【ALearning】第四章 Android Layout组件布局(一)

2022-08-02 18:27:52

本章我们将进行Android布局组件的学习，在前一章节，我们也初步使用LinearLayout布局，接下来我们就对布局文件进行更详细的学习与了解，并在案例的使用过程中去深入体会。

Android的界面是有布局和组件协同完成的，布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。Android的五大布局分别是LinearLayout（线性布局）、FrameLayout（单帧布局）、RelativeLayout（相对布局）、AbsoluteLayout（绝对布局）和TableLayout（表格布局）。

1、线性布局(LinearLayout)
线性布局的形式可以分为两种，第一种横向线性布局第二种纵向线性布局，总而言之都是以线性的形式一个个排列出来的，纯线性布局的缺点是很不方便修改控件的显示位置，所以开发中经常会以线性布局与相对布局嵌套的形式设置布局。
2、帧布局(FrameLayout)
原理是在控件中绘制任何一个控件都可以被后绘制的控件覆盖，最后绘制的控件会盖住之前的控件。
3、绝对布局(AbsoluteLayout)
使用绝对布局可以设置任意控件的在屏幕中 X Y 坐标点，和帧布局一样后绘制的控件会覆盖住之前绘制的控件。
4、相对布局(RelativeLayout)
相对布局是android布局中最为强大的，首先它可以设置的属性是最多了，其次它可以做的事情也是最多的。android手机屏幕的分辨率五花八门所以为了考虑屏幕自适应的情况所以在开发中建议大家都去使用相对布局它的坐标取值范围都是相对的所以使用它来做自适应屏幕是正确的。
5、表格布局(TableLayout)
在表格布局中可以设置TableRow 可以设置表格中每一行显示的内容以及位置，可以设置显示的缩进，对齐的方式。

【博客专栏：http://blog.csdn.net/column/details/alearning.html】

LinearLayout （线性布局）

LinearLayout按照垂直或者水平的顺序依次排列子元素，每一个子元素都位于前一个元素之后。不仅LinearLayout布局可以嵌套使用，其他的布局方式也可以嵌套使用。LinearLayout中的子元素属性android:layout_weight的作用是描述该子元素在剩余空间中占有的大小比例，默认值就为0。
本例拓展的属性配置是：

android:layout_weight 权重

如果LinearLayout中有两个不等长的文本框(TextView等)，那么他们的android:layout_weight值分别为1和2，那么第一个文本框将占据剩余空间的三分之二，第二个文本框将占据剩余空间中的三分之一。android:layout_weight遵循数值越小，重要度越高的原则。本例演示时android:layout_weight都为1，所以两个LinearLayout平均分配宽度。

【布局文件】activity_linearlayout.xml

<LinearLayout 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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <!-- 单个LinearLayout -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#99CCFF"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:gravity="center"
            android:text="#99CCFF" />
    </LinearLayout>

    <!-- 单个LinearLayout下包含两个水平平均分布的LinearLayout -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#CCFF66"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:gravity="center"
                android:text="#CCFF66" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FF9900"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:gravity="center"
                android:text="#FF9900" />
        </LinearLayout>
    </LinearLayout>

    <!-- 以上两种情况的叠加 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#CC99CC"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:gravity="center"
                android:text="#CC99CC" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#CC9933"
                android:orientation="horizontal" >

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="#CC9933" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#99CCCC"
                android:orientation="horizontal" >

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="#99CCCC" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

效果截图：

FrameLayout （帧布局）

FrameLayout是五大布局中最简单的一个布局，在这个布局中，整个界面被当成一块空白备用区域，所有的子元素都不能被指定放置的位置，它们统统放于这块区域的左上角，并且后面的子元素直接覆盖在前面的子元素之上，将前面的子元素部分和全部遮挡。

本例拓展的属性配置是：

android: gravity 指定控件的基本位置

注：该属性之前也有介绍过，本例特殊之处，旨在说明如果给此属性指定两个参数时，可以用采用以下格式，以“|”连接。

android:gravity="bottom|center"

【布局文件】activity_framelayoutt.xml

<?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">
    <TextView android:layout_height="match_parent"
        android:background="#99CCFF"
        android:layout_width="match_parent"
        android:gravity="bottom|center"
        android:text="第一层\n【#99CCFF】"/>
    
     <TextView android:layout_height="200dp"
         android:background="#CC99CC"
        android:layout_width="200dp"
        android:gravity="bottom|center"
        android:text="第二层\n【#CC99CC】"/>

     <TextView android:layout_height="100dp"
        android:layout_width="100dp"
        android:gravity="bottom|center"
        android:background="#99CCCC"
        android:text="第三层\n【#99CCCC】"/>
     
</FrameLayout>

效果截图：

AbsoluteLayout （绝对布局）

AbsoluteLayout是绝对位置布局。在此布局中的子元素的android:layout_x和android:layout_y属性将生效，用于描述该子元素的坐标位置。屏幕左上角为坐标原点（0,0），第一个0代表横坐标，向右移动此值增大，第二个0代表纵坐标，向下移动，此值增大。在此布局中的子元素可以相互重叠。在实际开发中，通常不采用此布局格式，因为它的界面代码过于刚性，以至于有不能很好的适配各种各样的终端设备。

本例拓展的属性配置是：

android:layout_x 指定控件的x轴的位置
android:layout_y 指定控件的y轴的位置

【布局文件】activity_absolutelayout.xml。

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

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="30dp"
        android:layout_y="30dp"
        android:background="#009966"
        android:text="#009966" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="90dp"
        android:layout_y="80dp"
        android:background="#CC6699"
        android:text="#CC6699" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="30dp"
        android:layout_y="180dp"
        android:background="#3366CC"
        android:text="#3366CC" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="180dp"
        android:layout_y="90dp"
        android:background="#FFCC99"
        android:text="#FFCC99" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_x="240dp"
        android:layout_y="200dp"
        android:background="#FF6666"
        android:text="#FF6666" />

</AbsoluteLayout>

效果截图：

参考资料

1、http://blog.chinaunix.net/uid-23544029-id-2985631.html

2、http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html

3、http://blog.csdn.net/jzp12/article/details/7590591

【ALearning】第四章 Android Layout组件布局(一),布布扣,bubuko.com

【ALearning】第四章 Android Layout组件布局(一)

码农公寓

LinearLayout （线性布局）

FrameLayout （帧布局）

AbsoluteLayout （绝对布局）

参考资料

相关文章