安卓界面布局总结

安卓的布局主要有5个:


FrameLayout:里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角

LinearLayout:里面可以放多个控件,但是一行只能放一个控件。线性布局是程序中最常见的一种布局方式,线性布局可以分为水平线性布局和垂直线性布局两种,通过

android:orientation属性可以设置线性布局的方向。

AbsoluteLayout:里面可以放多个控件,并且可以自己定义控件的x,y的位置

RelativeLayout: 里面可以放多个控件,不过控件的位置都是相对的,而且一行只能放一个控件

TableLayout:很像html里面的table,但是不像HTML中的表格那样灵活,一般只能通过 TableRow 属性来控制它的行而列的话里面有几个控件就是几列。

FrameLayout:里面可以放多个控件,不过控件的位置都是相对位置在它里面的控件都是按后面的一个控件叠加在前一个控件上来显示的,所有元素都被放置在最左上角。


下面是这五个布局在View的继承体系中的关系:


下面写几个例子:

一、LinearLayout(线性布局):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <!-- 最上面的两个按钮 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="horizontal" >
        <!-- 同一层次的三个LinearLayout的layout_weight都设置为1,每一个都占据三分之一的空间 -->
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="vertical" >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="左上按钮" />
            <!-- 因为外层的LinearLayout定义为垂直布局,这里定义为在Layout里面靠左显示,所以就显示在左上角 -->
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="vertical" >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="右上按钮" />
        </LinearLayout>
    </LinearLayout>
    <!-- 中心的按钮 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <!-- 同一层次的三个LinearLayout的layout_weight都设置为1,每一个都占据三分之一的空间 -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中心按钮" />
    </LinearLayout>
    <!-- 最下面的两个按钮 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="horizontal" >
        <!-- 同一层次的三个LinearLayout的layout_weight都设置为1,每一个都占据三分之一的空间 -->
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="left|bottom"
            android:orientation="vertical" >
            <!-- 定义其内部元素的对齐方式:左下角 -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="左下按钮" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="right|bottom"
            android:orientation="vertical" >
            <!-- 定义其内部元素的对齐方式:右下角 -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="右下按钮" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
android:gravity与android:layout_gravity的区别

android:gravity定义了这个元素内所有子元素对于这个元素的布局,比如一个TextView内部文字的对齐方式;android:layout_gravity定义了这个元素相对于父元素(比如Layout)的布局,比如一个TextView在整个Layout中的位置。这两个属性对应的常量值都是一样的。

android: layout_weight

首先需要注意的是,没有android:weight这样的属性,这个与上面的android:gravity不一样。我们可以通过设置控件的layout_weight属性以控制各个控件在布局中的相对大小。layout_weight属性是一个非负整数值。线性布局会根据该控件layout_weight值与其所处布局中所有控件layout_weight值之和的比值为该控件分配占用的区域。例如,在水平布局的LinearLayout中有两个Button,这两个Button的layout_weight属性值都为1,那么这两个按钮都会被拉伸到整个屏幕宽度的一半。如果layout_weight指为0,控件会按原大小显示,不会被拉伸;对于其余layout_weight属性值大于0的控件,系统将会减去layout_weight属性值为0的控件的宽度或者高度,再用剩余的宽度或高度按相应的比例来分配每一个控件显示的宽度或高度。

效果以及框架图:


 二、TableLayout(表格布局):

表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象。TableRow可以添加子控件,每添加一个为一列。

<?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="1" >
    <!-- 设置列1为可伸展的列,可伸展的列会尽量伸展以填满所有可用的空间,列的编号,从0开始 -->
    <TableRow>
        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="打开..." />
        <!-- dip:依赖于设备的像素;px:像素 -->
        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="Ctrl-O" />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="保存..." />
        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="Ctrl-S" />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="另存为..." />
        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="Ctrl-Shift-S" />
    </TableRow>
    <View
        android:layout_height="2dip"
        android:background="#FF909090" />
    <TableRow>
        <TextView
            android:padding="3dip"
            android:text="*" />
        <TextView
            android:padding="3dip"
            android:text="导入..." />
    </TableRow>
    <TableRow>
        <TextView
            android:padding="3dip"
            android:text="*" />
        <TextView
            android:padding="3dip"
            android:text="导出..." />
        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="Ctrl-E" />
    </TableRow>
    <View
        android:layout_height="2dip"
        android:background="#FF909090" />
    <TableRow>
        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="退出" />
        <!-- 设置该控件在TableRow中所在的列号,默认从0开始编号 -->
    </TableRow>
</TableLayout>

运行效果:



从效果图可以看出,该布局总共有三列,第一个TableRow里面的控件,从第1列开始布局。如果去掉所有控件的属性” android:layout_column="1"”,显示效果如下所示(总共3列,也即第0、1、2列,每一列都用虚线框标示):


另外一个例子:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1" >
        <!-- 将TableLayout里面的第1列隐藏,若有多列需要隐藏,用逗号隔开:android:collapseColumns=“0,1” -->
        <TextView
            android:gravity="center"
            android:text="表一" />
        <TableRow>
            <TextView
                android:background="@drawable/dot"
                android:text="列0" />
            <!-- 设置控件的背景图片,这是一个可伸缩的9Patch PNG格式的图片 -->
            <TextView
                android:background="@drawable/dot"
                android:text="列1" />
        </TableRow>
    </TableLayout>
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1" >
        <!--设置第1列为可伸展的列,可伸展的列会尽量伸展以填满所有可用的空间,若有多列需要设置为可伸展时,将列序号用逗号隔开,例如:android:stretchColumns=“0,1”-->
        <TextView
            android:gravity="center"
            android:text="表二" />
        <TableRow>
            <TextView
                android:background="@drawable/dot"
                android:text="列0不能伸展" />
            <TextView
                android:background="@drawable/dot"
                android:gravity="right"
                android:text="列1可以伸展" />
        </TableRow>
    </TableLayout>
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:gravity="center"
            android:text="表三" />
        <TableRow>
            <TextView
                android:background="@drawable/dot"
                android:text="这一列很长,将会造成下一列无法显示或显示不全" />
            <TextView
                android:background="@drawable/dot"
                android:text="这一列被挤到了屏幕外" />
        </TableRow>
    </TableLayout>
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="0" >
        <!--设置第0列为可收缩的列。当可收缩的列太宽以至于让其他列显示不全时,会纵向延伸空间。当需要设置多列为可收缩时,将列序号用逗号隔开,例如:android:shrinkColumns=“0,1” -->
        <TextView
            android:gravity="center"
            android:text="表四" />
        <TableRow>
            <TextView
                android:background="@drawable/dot"
                android:text="由于设置成了可收缩,所以这一列不管有多长都不会把其他列挤出去" />
            <TextView
                android:background="@drawable/dot"
                android:text="这一列会被显示完全" />
        </TableRow>
    </TableLayout>
</LinearLayout>

效果以及框架图:


三、RelativeLayout(相对布局):相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件,也可以是其它子控件,但是被参照的控件必须要在参照它的控件之前定义。

<?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="fill_parent" >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:textSize="20dp" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_toRightOf="@id/button1"
        android:text="按钮2"
        android:textSize="20dp" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button2"
        android:layout_toLeftOf="@id/button2"
        android:text="按钮3"
        android:textSize="20dp" />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button2"
        android:layout_toRightOf="@id/button2"
        android:text="按钮4"
        android:textSize="20dp" />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button2"
        android:layout_toRightOf="@id/button2"
        android:text="按钮5"
        android:textSize="20dp" />
</RelativeLayout>

运行效果:


四:AbsoluteLayout(绝对布局):绝对布局的子控件需要指定相对于此坐标布局的横纵坐标值,否则将会像框架布局那样被排在左上角。手机应用需要适应不同的屏幕大小,而这种布局模型不能自适应屏幕尺寸大小,所以应用的相对较少。

<?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" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="10px"
        android:layout_y="10px"
        android:text="语文" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="30px"
        android:layout_y="30px"
        android:text="数学" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="50px"
        android:layout_y="50px"
        android:text="英语" />
</AbsoluteLayout>

运行效果:


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

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

运行效果:

一般来说LinearLayout 和 RelativeLayout用的比较多。AbsoluteLayout 比较少用,因为它是按屏幕的绝对位置来布局的如果屏幕大小发生改变的话控件的位置也发生了改变,就相当于HTML中的绝对布局一样。



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值