android-五大布局&单位详解

15035554141

浏览: 61489 次
性别:
来自: 太原

最近访客更多访客>>

纠结的忘忆

mingming-YI

天天写博客

Haydroid

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

android笔记

首先看下单位详解：android-五大布局&单位详解

px：

即像素，1px代表屏幕上一个物理的像素点；

px单位不建议使用，因为同样100px的图片，在不同手机上显示的实际大小可能不同

dp：

这个是最常用但也最难理解的尺寸单位。它与“像素密度”密切相关，所以首先我们解释一下什么是像素密度。假设有一部手机，屏幕的物理尺寸为1.5英寸x2英寸，屏幕分辨率为240x320，则我们可以计算出在这部手机的屏幕上，每英寸包含的像素点的数量为240/1.5=160dpi（横向）或 320/2=160dpi（纵向），160dpi就是这部手机的像素密度，像素密度的单位dpi是Dots Per Inch的缩写，即每英寸像素数量。横向和纵向的这个值都是相同的，原因是大部分手机屏幕使用正方形的像素点。

不同的手机/平板可能具有不同的像素密度，例如同为4寸手机，有480x320分辨率的也有800x480分辨率的，前者的像素密度就比较低。 Android系统定义了四种像素密度：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi），它们对应的dp到px的系数分别为0.75、1、1.5和2，这个系数乘以dp长度就是像素数。例如界面上有一个长度为“100dp”的图片，那么它在240dpi的手机上实际显示为80x1.5=120px，在320dpi的手机上实际显示为80x2=160px。如果你拿这两部手机放在一起对比，会发现这个图片的物理尺寸“差不多”，这就是使用dp作为单位的效果。

dip：android-五大布局&单位详解

与dp完全相同，只是名字不同而已。在早期的Android版本里多使用dip，后来为了与sp统一就建议使用dp这个名字了。

sp：

与缩放无关的抽象像素（Scale-independent Pixel）。sp和dp很类似但唯一的区别是，Android系统允许用户自定义文字尺寸大小（小、正常、大、超大等等），当文字尺寸是“正常”时 1sp=1dp=0.00625英寸，而当文字尺寸是“大”或“超大”时，1sp>1dp=0.00625英寸。类似我们在windows里调整字体尺寸以后的效果——窗口大小不变，只有文字大小改变。

====================================分隔符========================================

为了适应各式各样的界面风格，Android系统提供了5种布局，这5种布局分别是：、

LinearLayout(线性布局) 常用

TableLayout(表格布局) oa 类常用

RelativeLayout(相对布局) 常用

AbsoluteLayout(绝对布局)游戏类使用

FrameLayout(帧布局) 视频类常用

利用这五种布局，可以在屏幕上将控件随心所欲的摆放，而且控件的大小和位置会随着屏幕大小的变化作出相应的调整。

下面是五个布局的继承关系图

android-extends.jpg

一，LinearLayout(线性布局)

在一个方向上(垂直或水平)对齐所有子元素
一个垂直列表每行将只有一个子元素(无论它们有多宽)
一个水平列表只是一列的高度（最高子元素的高度来填充，水平排列可能显示不完全）

线性布局vertical:

android-vertical.png

线性布局 horizontal 没有现实完全:
android-horizontal.png

Xml代码如下android-五大布局&单位详解

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

<!-- android:orientation="horizontal" 水平排列-->
<!--添加控件 -->
</LinearLayout>

二，TableLayout(表格布局)android-五大布局&单位详解

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

android:layout_colum官方解释：The index of the column in which this child should be，也即是设置该控件在TableRow中所处的列。
android:layout_span官方解释：Defines how many columns this child should span，也即是设置该控件所跨越的列数。

android:collapseColumns官方解释：The 0 based index of the columns to collapse. The column indices must be separated by a comma: 1, 2, 5.也即是将TableLayout里面指定的列隐藏，若有多列需要隐藏，请用逗号将需要隐藏的列序号隔开。

android:stretchColumns官方解释：The 0 based index of the columns to stretch. The column indices must be separated by a comma: 1, 2, 5. You can stretch all columns by using the value “*” instead. Note that a column can be marked stretchable and shrinkable at the same time.也即是设置指定的列为可伸展的列，可伸展的列会尽量伸展以填满所有可用的空间，若有多列需要设置为可伸展，请用逗号将需要伸展的列序号隔开。

android:shrinkColumns官方解释：The 0 based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 5. You can shrink all columns by using the value “*” instead. 设置指定的列为可收缩的列。当可收缩的列太宽以至于让其他列显示不全时，会纵向延伸空间。当需要设置多列为可收缩时，将列序号用逗号隔开。

下面用一个例子简单说明TableLayout的用法：android-五大布局&单位详解

android-table.png

代码如下

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

    <TableRow>

        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="Row1" />

        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="1" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow>

        <TextView
            android:padding="3dip"
            android:text="*" />

        <TextView
            android:padding="3dip"
            android:text="Row12" />

        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="2" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow>

        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="Row13" />
    </TableRow>

</TableLayout>

三、RelativeLayout(相对布局)

相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件，也可以是其它子控件，但是被参照的控件必须要在参照它的控件之前定义。下面是一个简单的例子：

android-Relative.png

<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="100dp"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:text="我是标题"
        android:textColor="#000000"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:text="我是说明文本"
        android:textColor="#66000000"
        android:textSize="14sp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
		android:layout_alignParentRight="true"
		android:layout_centerInParent="true"
         />

</RelativeLayout>

四、AbsoluteLayout(绝对布局)

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

由于市面上手机屏幕大小不一绝对布局现在不建议使用，这里不做讲解

一般游戏类使用的较多，控件位置是获取屏幕大小然后计算出来的.

五、FrameLayout(帧布局)

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

android-Frame.png

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:id="@+id/text_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是播放器播放文本中"
        android:visibility="invisible" />

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="play"
            android:text="播放" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="pause"
            android:text="暂停" />
    </LinearLayout>

    <ImageView
        android:id="@+id/iv"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:visibility="invisible" />

</FrameLayout>

下面介绍一下RelativeLayout用到的一些重要的属性：android-五大布局&单位详解

第一类:属性值为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-五大布局&单位详解
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，40pxandroid-五大布局&单位详解
android:layout_marginBottom             离某元素底边缘的距离
android:layout_marginLeft                离某元素左边缘的距离
android:layout_marginRight                离某元素右边缘的距离
android:layout_marginTop                离某元素上边缘的距离