当前位置: 代码迷 >> Android >> android-五大格局&单位详解
  详细解决方案

android-五大格局&单位详解

热度:31   发布时间:2016-04-28 04:46:14.0
android-五大布局&单位详解

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

px

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

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

dp

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

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

dipandroid-五大布局&单位详解

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

sp

与缩放无关的抽象像素(Scale-independent Pixel)。spdp很类似但唯一的区别是,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

<!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> </o:OfficeDocumentSettings> </xml><![endif]-->


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-五大布局&单位详解


第一类:属性值为truefalse
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的引用名[email protected]/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? ?? ?? ?? ?? ?? ???
本元素的右边缘和某元素的的右边缘对齐

第三类:属性值为具体的像素值,如30dip40pxandroid-五大布局&单位详解
android:layout_marginBottom? ?? ?? ?? ???
离某元素底边缘的距离
android:layout_marginLeft? ?? ?? ?? ?? ?? ?
离某元素左边缘的距离
android:layout_marginRight? ?? ?? ?? ?? ???
离某元素右边缘的距离
android:layout_marginTop? ?? ?? ?? ?? ?? ?
离某元素上边缘的距离

?

?

?

?

?

?

  相关解决方案