Android中布局总结

Android 布局是应用界面开发的重要一环，在Android中，共有五种布局方式，分别是：LinearLayout(线性布局),FrameLayout(单帧布局),AbsoluteLayout(绝对布局),RelativeLayout(相对布局)，TableLayout(表格布局)。
    下面先分别介绍一下每种布局的基本概念,再用实例演示：

• LinearLayout：线性布局，可分为垂直布局（android:orientation="vertical"）和水平布局（android:orientation="horizontal" ），在LinearLayout里面可以放多个控件，但是一行（列）只能放一个控件。
• FrameLayout：单帧布局，所有控件都放置在屏幕左上角（0,0），可以放多个控件，但是会按控件定义的先后顺序依次覆盖，后一个会直接覆盖在前一个之上显示，如果后放的比之前的大，会把之前的全部盖住（类似于一层层的纸张）。
• AbsoluteLayout：绝对布局，可以直接指定子控件的绝对位置（例如： android:layout_x="60px" android:layout_y="32px" ），这种布局简单直接，但是由于手机的分辨率大小不统一，绝对布局的适应性比较差。
• RelativeLayout：相对布局，其子控件是根据所设置的参照控件来进行布局的，设置的参照控件可以是父控件，也可以使其他的子控件。
• TableLayout：表格布局，是以行列的形式来管理子控件的，在表格布局中的每一行可以是一个View控件或者是一个TableRow控件。而TableRow控件中还可以添加子控件。
  

=============================下面是实例==========================

---

LinearLayout：线性布局

LinearLayout实例的框架图，这个例子使用了布局套布局来实现如下图所示的框架效果。

    其中有三个LinearLayout 布局，最外层的 LinearLayout 中包含两个 LinearLayout 将界面分为上下两个部分，上面的 LinearLayout 中使用垂直布局将三个TextView纵向排列，下面的 LinearLayout 中使用水平布局将三个TextView横行排列。

    其中注意的是 android：layout_weight，用于给一个线性布局中的诸多视图的重要度赋值，所有的view的layout_weight缺省值都是为0，意味着他们只在屏幕上占据它们需要显示的空间大小。activity根据这个View的比0大的layout_weight值来划分剩余的空间和其它Views定义的layout_weight也按比例进行空间的划分。

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="fill_parent"
   
4.     android:layout_height="fill_parent"
   
5.     android:orientation="vertical" 
   
6.     >
   
7.     <LinearLayout
   
8.         android:layout_width="fill_parent"
   
9.         android:layout_height="wrap_content"
   
10.         android:orientation="vertical"
    
11.         android:layout_weight="1"
    
12.         >
    
13.         <TextView
    
14.             android:text="第一行"
    
15.             android:gravity="center"
    
16.             android:textSize="24px"
    
17.             android:background="#0066ff"
    
18.             android:layout_width="fill_parent"
    
19.             android:layout_height="wrap_content"
    
20.             android:layout_weight="1"
    
21.             />
    
22.          <TextView
    
23.             android:text="第二行"
    
24.             android:gravity="center"
    
25.             android:textSize="24px"
    
26.             android:background="#ffcc00"
    
27.             android:layout_width="fill_parent"
    
28.             android:layout_height="wrap_content"
    
29.             android:layout_weight="1"
    
30.             />
    
31.           <TextView
    
32.             android:text="第三行"
    
33.             android:gravity="center"
    
34.             android:textSize="24px"
    
35.             android:background="#33cc00"
    
36.             android:layout_width="fill_parent"
    
37.             android:layout_height="wrap_content"
    
38.             android:layout_weight="1"
    
39.             />
    
40.     </LinearLayout>
    
41.     <LinearLayout
    
42.         android:layout_width="fill_parent"
    
43.         android:layout_height="wrap_content"
    
44.         android:orientation="horizontal"
    
45.         android:layout_weight="1"
    
46.         >
    
47.           <TextView
    
48.             android:text="第一列"
    
49.             android:gravity="center"
    
50.             android:textSize="24px"
    
51.             android:background="#33cc00"
    
52.             android:layout_width="wrap_content"
    
53.             android:layout_height="fill_parent"
    
54.             android:layout_weight="1"
    
55.             />
    
56.          <TextView
    
57.             android:text="第二列"
    
58.             android:gravity="center"
    
59.             android:textSize="24px"
    
60.             android:background="#ffcc00"
    
61.             android:layout_width="wrap_content"
    
62.             android:layout_height="fill_parent"
    
63.             android:layout_weight="1"
    
64.             />
    
65.           <TextView
    
66.             android:text="第三列"
    
67.             android:gravity="center"
    
68.             android:textSize="24px"
    
69.             android:background="#0066ff"
    
70.             android:layout_width="wrap_content"
    
71.             android:layout_height="fill_parent"
    
72.             android:layout_weight="1"
    
73.             />   
    
74.     </LinearLayout>
    
75. </LinearLayout>

复制代码

FrameLayout：单帧布局

在FrameLayout 中放了 三个 ImageView 分别引用图片  c b a ，图片一层层覆盖到界面上。

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="fill_parent"
   
4.     android:layout_height="fill_parent" >
   
5.     <ImageView
   
6.         android:src="@drawable/c"
   
7.         android:layout_width="wrap_content"
   
8.         android:layout_height="wrap_content" 
   
9.         />
   
10.     <ImageView
    
11.         android:src="@drawable/b"
    
12.         android:layout_width="wrap_content"
    
13.         android:layout_height="wrap_content" 
    
14.         />
    
15.     <ImageView
    
16.         android:src="@drawable/a"
    
17.         android:layout_width="wrap_content"
    
18.         android:layout_height="wrap_content" 
    
19.         />
    
20. </FrameLayout>

复制代码

1. 
   

复制代码

android

分享到:  QQ好友和群 QQ空间 腾讯微博 腾讯朋友 微信

收藏15

相关帖子

• • 每天一个开源代码——第12个 Android apk动态加载机制的研究

 

回复

举报

 

<iframe id="iframeu2641445_0" src="http://pos.baidu.com/ocgm?rdid=2641445&amp;dc=2&amp;di=u2641445&amp;dri=0&amp;dis=0&amp;dai=1&amp;ps=4501x631&amp;dcb=BAIDU_SSP_define&amp;dtm=BAIDU_DUP_SETJSONADSLOT&amp;dvi=0.0&amp;dci=-1&amp;dpt=none&amp;tsr=0&amp;tpr=1467941950449&amp;ti=android%20%E5%B8%83%E5%B1%80%E6%80%BB%E7%BB%93%20-%20Android%E7%BB%BC%E5%90%88%E8%AE%A8%E8%AE%BA%20-%20%E5%AE%89%E5%8D%93%E5%B7%B4%E5%A3%AB%20-%20%E5%AE%89%E5%8D%93%E5%BC%80%E5%8F%91%20-%20Android%E5%BC%80%E5%8F%91%20-%20%E5%AE%89%E5%8D%93%20-%20&amp;ari=1&amp;dbv=2&amp;drs=1&amp;pcs=1899x903&amp;pss=1899x4536&amp;cfv=18&amp;cpl=48&amp;chi=1&amp;cce=true&amp;cec=UTF-8&amp;tlm=1467941950&amp;rw=903&amp;ltu=http%3A%2F%2Fwww.apkbus.com%2Fandroid-45156-1-1.html&amp;ltr=http%3A%2F%2Fzhidao.baidu.com%2Flink%3Furl%3DLCOSiOTgBCoUc1EAkbc1SizFaEghJUFHyUQSnCLuaiYhVuE13iD75twU8GvtOPATJ7KNtIFt9krSWP7zRsIyrq&amp;ecd=1&amp;psr=1920x1080&amp;par=1920x1032&amp;pis=-1x-1&amp;ccd=24&amp;cja=true&amp;cmi=76&amp;col=zh-CN&amp;cdo=-1&amp;tcn=1467941950&amp;qn=090f13080c1f63e2&amp;tt=1467941950391.62.248.250" width="468" height="60" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="word-wrap: break-word; border-width: 0px; vertical-align: bottom; margin: 0px;"></iframe>

沙发

  楼主| 发表于 2012-5-11 02:10:31 | 只看该作者

本帖最后由 北小生 于 2012-5-11 02:54 编辑

AbsoluteLayout：绝对布局

在AbsoluteLayout 中放三个 ImageView  a b c,分别为它们指定不同的坐标

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="fill_parent"
   
4.     android:layout_height="fill_parent" >
   
5.     <ImageView
   
6.         android:src="@drawable/a"
   
7.         android:layout_width="wrap_content"
   
8.         android:layout_height="wrap_content" 
   
9.         android:layout_x="0px"
   
10.         android:layout_y="0px"
    
11.         />
    
12.     <ImageView
    
13.         android:src="@drawable/b"
    
14.         android:layout_width="wrap_content"
    
15.         android:layout_height="wrap_content" 
    
16.         android:layout_x="50px"
    
17.         android:layout_y="300px"
    
18.         />
    
19.     <ImageView
    
20.         android:src="@drawable/c"
    
21.         android:layout_width="wrap_content"
    
22.         android:layout_height="wrap_content" 
    
23.         android:layout_x="300px"
    
24.         android:layout_y="20px"
    
25.         />
    
26. 
    
27. </AbsoluteLayout>

复制代码

RelativeLayout：相对布局

相对布局的属性较多，不过平时常用的就几个，如下：

　       android:layout_centerInParent　　　居中布局

　　　　android:layout_centerVertical　　　 垂直居中布局

　　　　android:layout_centerHorizontal　　水平居中布局

　　　　android:layout_alignParentTop　　　　居于容器内顶部

　　　　android:layout_alignParentBottom　　居于容器内底部

　　　　android:layout_alignParentLeft　　　　居于容器内左边

　　　　android:layout_alignParentRight　　　 居于容器内右边

　　　　android:layout_above　　　　　　　居于指定View的上方

　　　　android:layout_below　　　　　　　居于指定View的下方

　　　　android:layout_toRightOf　　　　　　在指定View的右边

　　　　android:layout_toLeftOf　　　　　　  在指定View的左边

　　　　android:layout_alignTop　　　　　　与指定View的Top一致

下面做个实例演示：

放三个按钮，上面的按钮位于button1的左上方 ，下面的按钮位于button1的右下方

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="fill_parent"
   
4.     android:layout_height="fill_parent" >
   
5.     
   
6.         <Button
   
7.             android:id="@+id/button1"
   
8.             android:layout_width="wrap_content"
   
9.             android:layout_height="wrap_content"
   
10.             android:text="我是中间的按钮" 
    
11.             android:layout_centerInParent="true"
    
12.             />
    
13.         <Button
    
14.             android:id="@+id/button2"
    
15.             android:layout_width="wrap_content"
    
16.             android:layout_height="wrap_content"
    
17.             android:layout_above="@id/button1"
    
18.             android:layout_alignLeft="@id/button1"
    
19.             android:text="上面的按钮" 
    
20.             />
    
21.         <Button
    
22.             android:id="@+id/button3"
    
23.             android:layout_width="wrap_content"
    
24.             android:layout_height="wrap_content"
    
25.             android:layout_below="@id/button1"
    
26.             android:layout_alignRight="@id/button1"
    
27.             android:text="下面的按钮" 
    
28.             />
    
29. </RelativeLayout>

复制代码

TableLayout：表格布局

该实例中在TableLayout中用3个TableRow将表格分成了3行，每行中放两个TextView，组成了一个菜单的界面，下面看代码：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="fill_parent"
   
4.     android:layout_height="fill_parent" 
   
5.     android:stretchColumns="1">
   
6.     <TableRow>
   
7.         <TextView
   
8.             android:layout_column="1"
   
9.              android:padding="3dp"
   
10.             android:text="打开.."/> 
    
11.          <TextView
    
12.             android:gravity="right"
    
13.             android:padding="3dp"
    
14.             android:text="Ctrl-o"/>    
    
15.     </TableRow>
    
16.     <TableRow>
    
17.         <TextView
    
18.             android:layout_column="1"
    
19.              android:padding="3dp"
    
20.             android:text="保存.."/> 
    
21.          <TextView
    
22.             android:gravity="right"
    
23.             android:padding="3dp"
    
24.             android:text="Ctrl-S"/>   
    
25.     </TableRow>
    
26.     <TableRow>
    
27.                <TextView
    
28.             android:layout_column="1"
    
29.              android:padding="3dp"
    
30.             android:text="另存为.."/> 
    
31.          <TextView
    
32.             android:gravity="right"
    
33.             android:padding="3dp"
    
34.             android:text="Ctrl-Shift-S"/>     
    
35.     </TableRow>
    
36. </TableLayout>

复制代码