Android布局排版

Android布局是应用界面开发的重要一环，在Android中，共有五种布局方式，分别是：FrameLayout(框架布局),LinearLayout (线性布局),AbsoluteLayout(绝对布局),RelativeLayout(相对布局),TableLayout(表格布局).

一、FrameLayout

这个布局可以看成是墙脚堆东西，有一个四方的矩形的左上角墙脚，我们放了第一个东西，要再放一个，那就在放在原来放的位置的上面，这样依次的放，会盖住原来的东西。这个布局比较简单，也只能放一点比较简单的东西。

<?xml version="1.0" encoding="utf-8"?> <FrameLayout android:id="@+id/FrameLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:id="@+id/ImageView01" android:src="@drawable/p1" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView> <ImageView android:id="@+id/ImageView02" android:src="@drawable/p2" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView> <ImageView android:id="@+id/ImageView03" android:src="@drawable/p3" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView> </FrameLayout>  

二、LinearLayout

线性布局，这个东西，从外框上可以理解为一个div，他首先是一个一个从上往下罗列在屏幕上。每一个LinearLayout里面又可分为垂直布局（android:orientation="vertical"）和水平布局（android:orientation="horizontal" ）。当垂直布局时，每一行就只有一个元素，多个元素依次垂直往下；水平布局时，只有一行，每一个元素依次向右排列。

linearLayout中有一个重要的属性 android:layout_weight="1"，这个weight在垂直布局时，代表行距；水平的时候代表列宽；weight值越大就越大。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="给小宝宝起个名字：" android:textSize="20px" android:textColor="#0ff" android:background="#333" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="遥遥是男孩的小名" android:textSize="20px" android:textColor="#0f0" android:background="#eee" android:layout_weight="3" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="瑶瑶是女孩的小名" android:textColor="#00f" android:textSize="20px" android:background="#ccc" android:layout_weight="1" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="海因是男孩的大名" android:textColor="#f33" android:textSize="20px" android:background="#888" android:layout_weight="1" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="海音是女孩的大名" android:textColor="#ff3" android:textSize="20px" android:background="#333" android:layout_weight="1" /> </LinearLayout>  

三、AbsoluteLayout

绝对布局犹如div指定了absolute属性，用X,Y坐标来指定元素的位置android:layout_x="20px" android:layout_y="12px" 这种布局方式也比较简单，但是在垂直随便切换时，往往会出问题，而且多个元素的时候，计算比较麻烦。 AbsoluteLayout 可以让子元素指定准确的x/y坐标值，并显示在屏幕上。AbsoluteLayout 没有页边框，允许元素之间互相重叠（尽管不推荐）。他是绝对坐标，所以在实际中不提倡使用。

<?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout android:id="@+id/AbsoluteLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:background="#fff"> <ImageView android:src="@drawable/android" android:layout_y="40dip" android:layout_width="wrap_content" android:layout_x="35dip" android:id="@+id/ImageView01" android:layout_height="wrap_content"> </ImageView> <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/TextView01" android:text="Android2.2 学习指南" android:textColor="#0f0" android:textSize="28dip" android:layout_y="330dip" android:layout_x="35dip"> </TextView> <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/TextView02" android:text="图文并茂，理论清晰，操作性强" android:textColor="#333" android:textSize="18dip" android:layout_y="365dip" android:layout_x="35dip"> </TextView> </AbsoluteLayout>  

四、RelativeLayout

相对布局可以理解为某一个元素为参照物，来定位的布局方式。主要属性有：

相对于某一个元素
// 相对于给定ID控件

android:layout_above 将该控件的底部置于给定ID的控件之上;

android:layout_below 将该控件的底部置于给定ID的控件之下;

android:layout_toLeftOf    将该控件的右边缘与给定ID的控件左边缘对齐;

android:layout_toRightOf  将该控件的左边缘与给定ID的控件右边缘对齐;

 

android:layout_alignBaseline  将该控件的baseline与给定ID的baseline对齐;

android:layout_alignTop        将该控件的顶部边缘与给定ID的顶部边缘对齐;

android:layout_alignBottom   将该控件的底部边缘与给定ID的底部边缘对齐;

android:layout_alignLeft        将该控件的左边缘与给定ID的左边缘对齐;

android:layout_alignRight      将该控件的右边缘与给定ID的右边缘对齐;

// 相对于父组件

android:layout_alignParentTop      如果为true,将该控件的顶部与其父控件的顶部对齐;

android:layout_alignParentBottom 如果为true,将该控件的底部与其父控件的底部对齐;

android:layout_alignParentLeft      如果为true,将该控件的左部与其父控件的左部对齐;

android:layout_alignParentRight    如果为true,将该控件的右部与其父控件的右部对齐;

// 居中

android:layout_centerHorizontal 如果为true,将该控件的置于水平居中;

android:layout_centerVertical     如果为true,将该控件的置于垂直居中;

android:layout_centerInParent   如果为true,将该控件的置于父控件的中央;

// 指定移动像素

android:layout_marginTop      上偏移的值;

android:layout_marginBottom 下偏移的值;

android:layout_marginLeft 　　左偏移的值;

android:layout_marginRight 　 右偏移的值;

 

example:

android:layout_below = "@id/***"

android:layout_alignBaseline = "@id/***"

android:layout_alignParentTop = true

android:layout_marginLeft = “10px”

 

还可以指定边距等，具体详见API

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:id="@+id/RelativeLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#fff" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:id="@+id/ImageView01" android:src="@drawable/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="40dip" > </ImageView> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/TextView01" android:text="Android2.2 学习指南" android:textColor="#0f0" android:textSize="28dip" android:layout_below="@id/ImageView01" android:layout_centerHorizontal="true" android:layout_marginTop="10dip"> </TextView> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/TextView02" android:text="图文并茂，理论清晰，操作性强" android:textColor="#333" android:textSize="18dip" android:layout_below="@id/TextView01" android:layout_centerHorizontal="true" android:layout_marginTop="5dip"> </TextView> </RelativeLayout>  

五.TableLayout

表格布局类似Html里面的Table。每一个TableLayout里面有表格行TableRow，TableRow里面可以具体定义每一个元素，设定他的对齐方式 android:gravity="" 。

每一个布局都有自己适合的方式，另外，这五个布局元素可以相互嵌套应用，做出美观的界面。TableLayout 将子元素的位置分配到行或列中。一个TableLayout 由许多的TableRow 组成，每个TableRow 都会定义一个 row 。TableLayout 容器不会显示row 、cloumns 或cell 的边框线。每个 row 拥有0个或多个的cell ；和html中的table查不多少。在实际中也经常使用。

<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:text="用户名:" android:textStyle="bold" android:gravity="right" android:padding="3dip" /> <EditText android:id="@+id/username" android:padding="3dip" android:scrollHorizontally="true" /> </TableRow> <TableRow> <TextView android:text="登录密码:" android:textStyle="bold" android:gravity="right" android:padding="3dip" /> <EditText android:id="@+id/password" android:password="true" android:padding="3dip" android:scrollHorizontally="true" /> </TableRow> <TableRow android:gravity="right"> <Button android:id="@+id/cancel" android:text="取消" /> <Button android:id="@+id/login" android:text="登录" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </TableRow> </TableLayout>  

 

Android的Margin和Padding跟Html的是一样的。通俗的理解 Padding 为内边框，Margin 为外边框

对应的属性为

android:layout_marginBottom="25dip" 
android:layout_marginLeft="10dip" 
android:layout_marginTop="10dip" 
android:layout_marginRight="10dip" 
android:paddingLeft="1dip" 
android:paddingTop="1dip" 
android:paddingRight="1dip" 
android:paddingBottom="1dip"

如果左右上下都是相同的设置则可以直接设置

android:layout_margin="10dip" 
android:padding="5dip"

 

过去，程序员通常以像素为单位设计计算机用户界面。例如，定义一个宽度为300像素的表单字段，列之间的间距为5个像素，图标大小为16×16像素 等。这样处理的问题在于，如果在一个每英寸点数（dpi）更高的新显示器上运行该程序，则用户界面会显得很小。在有些情况下，用户界面可能会小到难以看清 内容。 

与分辨率无关的度量单位可以解决这一问题。Android支持下列所有单位。 

px（像素）：屏幕上的点。 

in（英寸）：长度单位。 

mm（毫米）：长度单位。 

pt（磅）：1/72英寸。 

dp（与密度无关的像素）：一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px。 

dip：与dp相同，多用于android/ophone示例中。 

sp（与刻度无关的像素）：与dp类似，但是可以根据用户的字体大小首选项进行缩放。 

为了使用户界面能够在现在和将来的显示器类型上正常显示，建议大家始终使用sp作为文字大小的单位，将dip作为其他元素的单位。当然，也可以考虑使用矢量图形，而不是用位图.

dp是与密度无关，sp除了与密度无关外，还与scale无关。

如果屏幕密度为160，这时dp和sp和px是一样的。1dp=1sp=1px，但如果使用px作单位，如果屏幕大小不变（假设还是3.2寸），而屏幕密度变成了320。

那么原来TextView的宽度设成160px，在密度为320的3.2寸屏幕里看要比在密度为160的3.2寸屏幕上看短了一半。

但如果设置成160dp或160sp的话。系统会自动将width属性值设置成320px的。

也就是160 * 320 / 160。其中320 / 160可称为密度比例因子。也就是说，如果使用dp和sp，系统会根据屏幕密度的变化自动进行转换.