程序博客网 > 淘宝卡西欧手表真假

Android-布局管理 (五大布局控件使用）

来源：互联网 发布：淘宝卡西欧手表真假 编辑：程序博客网 时间：2024/06/03 10:24

  系统控件一般都会搭载进布局里的，在Android呢，提供了5种布局类型，通过这五种布局之间的相互组合可以构建各种复杂的布局。然而一个游戏当中，界面的布局是至关重要的一部分，一个漂亮的界面更能吸引玩家的眼球，并不是这个游戏的可玩性有多么的强，对于手机来说，无论是应用软件还是游戏，我认为手机里面的资源始终是有限的，不能什么样的游戏和软件都能移植到手机当中，然而一个好的界面能与用户得到很好的交互，那应该算是一个比较好的应用了。

  接下来，我还是继续学习Android游戏开发中的界面布局管理这一块，通过写博客来巩固自己学习到的东西，好记性不如烂笔头嘛。

  Layout(布局),上面提到Android提供了5种类型的布局类型，有哪5种呢？

  第一个：LinearLayout（线性布局）

  第二个：RelativeLayout（相对布局）

  第三个：TableLayout（表格布局）

  第四个：AbsoluteLayout（绝对布局）

  第五个：FrameLayout（单帧布局）

下面通过5个实例来学习这5种布局

创建项目分别为：

=>>Layout_01(线性布局)

=>>Layout_02(相对布局)

=>>Layout_03(表格布局)

=>>Layout_04(绝对布局)

=>>Layout_05(单帧布局)

那好，接下来精彩不断

1、@线性布局

是5种布局最常用的一种，从字面上也比较好理解，就是布局呈线性的，这种布局在显示组件的时候会默认保持组件之间的间隔以及组件之间的互相对齐。线性布局显示组件的方式有两种方式：垂直和水平，是通过orientation来设定的。

话先不多说，先建立一个项目：Layout_01

项目主要修改的是布局文件:main.xml

说明：这里只是为了展示布局的效果，控件的事件监听没有实现，所以只修改布局文件

运行项目效果：

=>>首先是垂直排列(vertical)

修改main.xml代码

[html] view plaincopy
  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.     <Button   
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         />  
  12.     <Button   
  13.         android:layout_width="fill_parent"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="Button2"  
  16.         />  
  17.     <Button   
  18.         android:layout_width="fill_parent"  
  19.         android:layout_height="wrap_content"  
  20.         android:text="Button3"  
  21.         />  
  22.   
  23. </LinearLayout>  
[html] view plaincopy
  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.     <Button   
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         />  
  12.     <Button   
  13.         android:layout_width="fill_parent"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="Button2"  
  16.         />  
  17.     <Button   
  18.         android:layout_width="fill_parent"  
  19.         android:layout_height="wrap_content"  
  20.         android:text="Button3"  
  21.         />  
  22.   
  23. </LinearLayout>  
[html] view plaincopy
  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.     <Button   
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         />  
  12.     <Button   
  13.         android:layout_width="fill_parent"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="Button2"  
  16.         />  
  17.     <Button   
  18.         android:layout_width="fill_parent"  
  19.         android:layout_height="wrap_content"  
  20.         android:text="Button3"  
  21.         />  
  22.   
  23. </LinearLayout>  


=>>接着是水平排列(horizontal)

修改main.xml代码

说明：这里要修改每个按钮的填充形式，改为自适应内容的形式(wrap_content),不然只会看到button1，其他两个就因为超出屏幕导致无法看到。

[html] view plaincopy
  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="horizontal" >  
  6.   
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         />  
  12.     <Button   
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="Button2"  
  16.         />  
  17.     <Button   
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         android:text="Button3"  
  21.         />  
  22.   
  23. </LinearLayout>  
[html] view plaincopy
  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="horizontal" >  
  6.   
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         />  
  12.     <Button   
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="Button2"  
  16.         />  
  17.     <Button   
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         android:text="Button3"  
  21.         />  
  22.   
  23. </LinearLayout>  
[html] view plaincopy
  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="horizontal" >  
  6.   
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         />  
  12.     <Button   
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="Button2"  
  16.         />  
  17.     <Button   
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         android:text="Button3"  
  21.         />  
  22.   
  23. </LinearLayout>  

=>>在谈谈布局嵌套，这里是一个线性布局里头嵌套另一个线性布局

项目运行效果：


修改布局文件main.xml

[html] view plaincopy
  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="horizontal" >  
  6.   
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         />  
  12.     <LinearLayout   
  13.         android:orientation="vertical"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="fill_parent"  
  16.         >  
  17.         <Button   
  18.             android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content"  
  20.             android:text="Button2"  
  21.             />  
  22.         <Button   
  23.             android:layout_width="wrap_content"  
  24.             android:layout_height="wrap_content"  
  25.             android:text="Button3"  
  26.             />  
  27.           
  28.     </LinearLayout>  
  29. </LinearLayout>  
[html] view plaincopy
  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="horizontal" >  
  6.   
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         />  
  12.     <LinearLayout   
  13.         android:orientation="vertical"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="fill_parent"  
  16.         >  
  17.         <Button   
  18.             android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content"  
  20.             android:text="Button2"  
  21.             />  
  22.         <Button   
  23.             android:layout_width="wrap_content"  
  24.             android:layout_height="wrap_content"  
  25.             android:text="Button3"  
  26.             />  
  27.           
  28.     </LinearLayout>  
  29. </LinearLayout>  
[html] view plaincopy
  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="horizontal" >  
  6.   
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         />  
  12.     <LinearLayout   
  13.         android:orientation="vertical"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="fill_parent"  
  16.         >  
  17.         <Button   
  18.             android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content"  
  20.             android:text="Button2"  
  21.             />  
  22.         <Button   
  23.             android:layout_width="wrap_content"  
  24.             android:layout_height="wrap_content"  
  25.             android:text="Button3"  
  26.             />  
  27.           
  28.     </LinearLayout>  
  29. </LinearLayout>  

代码说明：这里button2和button3放在了嵌套的LinearLayout中，最外层的LinearLayout放置了button1，最外层的LinearLayout设置成水平方向horizontal,嵌套的LineaarLayout设置成垂直方向vertical。所以会看到Button1与Button2、Button3是以水平方向排列，Button2、Button3是以垂直方向排列。

下面总结线性布局里头一些常用的属性：

  android:id - 为控件指定相应的ID
  android:text - 指定控件当中显示的文字，需要注意的是，这里尽量使用string.xml
  android:gravity - 指定控件的基本位置，比如说居中，居右等位置
  android:textSize - 指定控件当中字体的大小
  android:background - 指定控件所用的背景色，RGB命名法
  android:layout_width - 指定控件的宽度
  android:layout_height - 指定控件的高度

  android:layout_weight - 指定控件的占用比例
  android:padding - 指定控件的内边距，也就是说控件当中的内容
  android:sigleLine - 如果设置为真的话，则将控件的内容显示在一行当中

下面继续在Layout_01项目修改main.xml来使用这些属性

项目运行效果：

修改main.xml代码：

[html] view plaincopy
  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.         android:id - 为控件指定相应的ID  
  8.         android:text - 指定控件当中显示的文字，需要注意的是，这里尽量使用string.xml  
  9.         android:gravity - 指定控件的基本位置，比如说居中，居右等位置  
  10.         android:textSize - 指定控件当中字体的大小  
  11.         android:background - 指定控件所用的背景色，RGB命名法  
  12.         android:width - 指定控件的宽度  
  13.         android:height - 指定控件的高度  
  14.         android:padding - 指定控件的内边距，也就是说控件当中的内容  
  15.         android:sigleLine - 如果设置为真的话，则将控件的内容显示在一行当中  
  16.         -->  
  17.   
  18.     <TextView  
  19.         android:id="@+id/firstText"  
  20.         android:text="第一行"  
  21.         android:gravity="center_vertical"  
  22.         android:textSize="15pt"  
  23.         android:background="#aa0000"  
  24.         android:layout_width="fill_parent"  
  25.         android:layout_height="wrap_content"  
  26.         android:paddingLeft="10dip"  
  27.         android:paddingTop="20dip"  
  28.         android:paddingRight="30dip"  
  29.         android:paddingBottom="40dip"  
  30.         android:layout_weight="2"  
  31.         android:singleLine="true"  
  32.         />  
  33.     <TextView   
  34.         android:id="@+id/secondText"  
  35.         android:text="第二行"  
  36.         android:gravity="center_vertical"  
  37.         android:textSize="15pt"  
  38.         android:background="#0000aa"  
  39.         android:layout_width="fill_parent"  
  40.         android:layout_height="wrap_content"  
  41.         android:layout_weight="1"  
  42.         />  
  43.           
  44. </LinearLayout>  
[html] view plaincopy
  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.         android:id - 为控件指定相应的ID  
  8.         android:text - 指定控件当中显示的文字，需要注意的是，这里尽量使用string.xml  
  9.         android:gravity - 指定控件的基本位置，比如说居中，居右等位置  
  10.         android:textSize - 指定控件当中字体的大小  
  11.         android:background - 指定控件所用的背景色，RGB命名法  
  12.         android:width - 指定控件的宽度  
  13.         android:height - 指定控件的高度  
  14.         android:padding - 指定控件的内边距，也就是说控件当中的内容  
  15.         android:sigleLine - 如果设置为真的话，则将控件的内容显示在一行当中  
  16.         -->  
  17.   
  18.     <TextView  
  19.         android:id="@+id/firstText"  
  20.         android:text="第一行"  
  21.         android:gravity="center_vertical"  
  22.         android:textSize="15pt"  
  23.         android:background="#aa0000"  
  24.         android:layout_width="fill_parent"  
  25.         android:layout_height="wrap_content"  
  26.         android:paddingLeft="10dip"  
  27.         android:paddingTop="20dip"  
  28.         android:paddingRight="30dip"  
  29.         android:paddingBottom="40dip"  
  30.         android:layout_weight="2"  
  31.         android:singleLine="true"  
  32.         />  
  33.     <TextView   
  34.         android:id="@+id/secondText"  
  35.         android:text="第二行"  
  36.         android:gravity="center_vertical"  
  37.         android:textSize="15pt"  
  38.         android:background="#0000aa"  
  39.         android:layout_width="fill_parent"  
  40.         android:layout_height="wrap_content"  
  41.         android:layout_weight="1"  
  42.         />  
  43.           
  44. </LinearLayout>  
[html] view plaincopy
  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.         android:id - 为控件指定相应的ID  
  8.         android:text - 指定控件当中显示的文字，需要注意的是，这里尽量使用string.xml  
  9.         android:gravity - 指定控件的基本位置，比如说居中，居右等位置  
  10.         android:textSize - 指定控件当中字体的大小  
  11.         android:background - 指定控件所用的背景色，RGB命名法  
  12.         android:width - 指定控件的宽度  
  13.         android:height - 指定控件的高度  
  14.         android:padding - 指定控件的内边距，也就是说控件当中的内容  
  15.         android:sigleLine - 如果设置为真的话，则将控件的内容显示在一行当中  
  16.         -->  
  17.   
  18.     <TextView  
  19.         android:id="@+id/firstText"  
  20.         android:text="第一行"  
  21.         android:gravity="center_vertical"  
  22.         android:textSize="15pt"  
  23.         android:background="#aa0000"  
  24.         android:layout_width="fill_parent"  
  25.         android:layout_height="wrap_content"  
  26.         android:paddingLeft="10dip"  
  27.         android:paddingTop="20dip"  
  28.         android:paddingRight="30dip"  
  29.         android:paddingBottom="40dip"  
  30.         android:layout_weight="2"  
  31.         android:singleLine="true"  
  32.         />  
  33.     <TextView   
  34.         android:id="@+id/secondText"  
  35.         android:text="第二行"  
  36.         android:gravity="center_vertical"  
  37.         android:textSize="15pt"  
  38.         android:background="#0000aa"  
  39.         android:layout_width="fill_parent"  
  40.         android:layout_height="wrap_content"  
  41.         android:layout_weight="1"  
  42.         />  
  43.           
  44. </LinearLayout>  


再解释其中一些属性的作用：

=>>layout_weight,默认为零，其属性表示当前当前还有多大视图就占据多大视图；如果其值高于零，则表示将父视图中的可用的空间进行分割，分割的大小视当前屏幕整体布局的Layout_weight值与每个组件Layout_weight值占用比例来定。

=>>grivity:每个组件默认其值为左上角对齐，其属性可以调整组件对齐方式比如向左、向右或者居中对齐等。

=>>padding:边距的填充，也称内边距。其边距属性有：

   android:paddingTop,设置上边距

   android:paddingBottom,设置下边距

   android:paddingLeft,设置左边距

   android:paddingRight,设置右边距

   android:padding则表示周围四方向各内边距统一调整。

边距属性值为具体数字

=>>layout_margin,外边距，其上下左右属性为：

  android:layout_marginTop,设置上边距

  android:layout_marginBottom,设置下边距

  android:layout_marginLeft,设置左边距

  android:layout_marginRight,设置右边距

  android:layout_margin则表示设置四方向边距统一调整

这里说明一下padding与layout_margin的区别：

padding内边距指的是当前布局与包含的组件之间的边距

layout_margin外边距指的是与其他组件之间的边距。

呼呼，挺多内容的，接下来是RelativeLayout(相对布局)

2、RelativeLayout(相对布局)

除线性布局之外最常用的，它相对于线性布局来说比较灵活，在进行组件布局的时候用线性布局往往需要进行布局嵌套，而相对布局就不会那么麻烦，每个组件都可以指定与其它组件或父组件的位置，只是必须通过ID来进行指定。

创建项目：Layout_02(相对布局)

项目运行效果：

从项目运行结果可以看到:Button1在界面左上角，Button2在Button1下面，Button3在Button2下面并且对齐Button2右边缘，Button4在Button3下面并且对齐父组件右边缘对齐，Button5在Button4下面并且在水平方向的中央位置。

布局文件代码：

main.xml

[html] view plaincopy
  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.   
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         android:id="@+id/btn1"  
  12.         />  
  13.     <Button   
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:text="Button2"  
  17.         android:id="@+id/btn2"  
  18.         android:layout_below="@id/btn1"  
  19.         />  
  20.     <Button   
  21.         android:layout_width="wrap_content"  
  22.         android:layout_height="wrap_content"  
  23.         android:text="Button3"  
  24.         android:id="@+id/btn3"  
  25.         android:layout_below="@id/btn2"  
  26.         android:layout_alignRight="@id/btn2"  
  27.         />  
  28.     <Button  
  29.         android:layout_width="wrap_content"  
  30.         android:layout_height="wrap_content"  
  31.         android:text="Button4"  
  32.         android:id="@+id/btn4"  
  33.         android:layout_below="@id/btn3"  
  34.         android:layout_alignParentRight="true"  
  35.         />  
  36.     <Button  
  37.         android:layout_width="wrap_content"  
  38.         android:layout_height="wrap_content"  
  39.         android:text="Button5"  
  40.         android:id="@+id/btn5"  
  41.         android:layout_below="@id/btn4"  
  42.         android:layout_centerHorizontal="true"  
  43.         />  
  44.            
  45.  </RelativeLayout>  
[html] view plaincopy
  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.   
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         android:id="@+id/btn1"  
  12.         />  
  13.     <Button   
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:text="Button2"  
  17.         android:id="@+id/btn2"  
  18.         android:layout_below="@id/btn1"  
  19.         />  
  20.     <Button   
  21.         android:layout_width="wrap_content"  
  22.         android:layout_height="wrap_content"  
  23.         android:text="Button3"  
  24.         android:id="@+id/btn3"  
  25.         android:layout_below="@id/btn2"  
  26.         android:layout_alignRight="@id/btn2"  
  27.         />  
  28.     <Button  
  29.         android:layout_width="wrap_content"  
  30.         android:layout_height="wrap_content"  
  31.         android:text="Button4"  
  32.         android:id="@+id/btn4"  
  33.         android:layout_below="@id/btn3"  
  34.         android:layout_alignParentRight="true"  
  35.         />  
  36.     <Button  
  37.         android:layout_width="wrap_content"  
  38.         android:layout_height="wrap_content"  
  39.         android:text="Button5"  
  40.         android:id="@+id/btn5"  
  41.         android:layout_below="@id/btn4"  
  42.         android:layout_centerHorizontal="true"  
  43.         />  
  44.            
  45.  </RelativeLayout>  
[html] view plaincopy
  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.   
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Button1"  
  11.         android:id="@+id/btn1"  
  12.         />  
  13.     <Button   
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:text="Button2"  
  17.         android:id="@+id/btn2"  
  18.         android:layout_below="@id/btn1"  
  19.         />  
  20.     <Button   
  21.         android:layout_width="wrap_content"  
  22.         android:layout_height="wrap_content"  
  23.         android:text="Button3"  
  24.         android:id="@+id/btn3"  
  25.         android:layout_below="@id/btn2"  
  26.         android:layout_alignRight="@id/btn2"  
  27.         />  
  28.     <Button  
  29.         android:layout_width="wrap_content"  
  30.         android:layout_height="wrap_content"  
  31.         android:text="Button4"  
  32.         android:id="@+id/btn4"  
  33.         android:layout_below="@id/btn3"  
  34.         android:layout_alignParentRight="true"  
  35.         />  
  36.     <Button  
  37.         android:layout_width="wrap_content"  
  38.         android:layout_height="wrap_content"  
  39.         android:text="Button5"  
  40.         android:id="@+id/btn5"  
  41.         android:layout_below="@id/btn4"  
  42.         android:layout_centerHorizontal="true"  
  43.         />  
  44.            
  45.  </RelativeLayout>  


知识补充：

 

表1-1 组件之间的位置关系属性名称作用android:layout_above将组件放在指定ID组件的上方android:layout_below将组件放在指定ID组件的下方android:layout_toLeftOf将组件放在指定ID组件的左方android:layout_toRightOf将组件放在指定ID组件的右方

 

 

表1-2 组件对齐方式属性名称作用android:layout_alignBaseline将该组件放在指定ID组件进行中心线对齐android:layout_alignTop将该组件放在指定ID组件进行顶部对齐android:layout_alignBottom将该组件放在指定ID组件进行底部对齐

android:layout_alignLeft

将该组件放在指定ID组件进行左边缘对齐android:layout_alignRight将该组件放在指定ID组件进行右边缘对齐

 

 

表1-3 当前组件与父组件的对齐方式属性名称作用android:layout_alignParentTop该组件与父组件进行顶部对齐android:layout_alignParentBottom该组件与父组件进行底部对齐android:layout_alignParentLeft该组件与父组件进行左边缘对齐android:layout_alignParentRight该组件与父组件进行右边缘对齐

 

 

表1-4 组件放置的位置属性名称作用android:layout_centerHorizontal将该组件放置在水平方向中央的位置android:layout_centerVertical将该组件放置在垂直方向的中央的位置anroid:layout_centerInParent将该组件放置在父组件的水平中央及垂直中央的位置

 

3、part-TableLayout(表格布局)

TableLayout(表格布局),顾名思义就是像表格一样布局，通常情况下，TableLayout有多个TableRow组成，每个TableRow就是一行，定义几个TableRow就是定义几行；

创建项目：Layout_03(表格布局)

项目运行效果:

修改布局文件：

main.xml

[html] view plaincopy
  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.     >  
  6.     <TableRow>  
  7.         <Button android:text="Button1"/>  
  8.         <Button android:text="Button2"/>  
  9.         <Button android:text="Button3"/>  
  10.     </TableRow>  
  11.     <TableRow>  
  12.         <Button android:text="Button4"/>  
  13.         <Button android:text="Button5"/>  
  14.         <Button android:text="Button6"/>  
  15.     </TableRow>  
  16.     <TableRow>  
  17.         <Button android:text="Button7"/>  
  18.         <Button android:text="Button8"/>  
  19.         <Button android:text="Button9"/>  
  20.     </TableRow>  
  21. </TableLayout>  
[html] view plaincopy
  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.     >  
  6.     <TableRow>  
  7.         <Button android:text="Button1"/>  
  8.         <Button android:text="Button2"/>  
  9.         <Button android:text="Button3"/>  
  10.     </TableRow>  
  11.     <TableRow>  
  12.         <Button android:text="Button4"/>  
  13.         <Button android:text="Button5"/>  
  14.         <Button android:text="Button6"/>  
  15.     </TableRow>  
  16.     <TableRow>  
  17.         <Button android:text="Button7"/>  
  18.         <Button android:text="Button8"/>  
  19.         <Button android:text="Button9"/>  
  20.     </TableRow>  
  21. </TableLayout>  
[html] view plaincopy
  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.     >  
  6.     <TableRow>  
  7.         <Button android:text="Button1"/>  
  8.         <Button android:text="Button2"/>  
  9.         <Button android:text="Button3"/>  
  10.     </TableRow>  
  11.     <TableRow>  
  12.         <Button android:text="Button4"/>  
  13.         <Button android:text="Button5"/>  
  14.         <Button android:text="Button6"/>  
  15.     </TableRow>  
  16.     <TableRow>  
  17.         <Button android:text="Button7"/>  
  18.         <Button android:text="Button8"/>  
  19.         <Button android:text="Button9"/>  
  20.     </TableRow>  
  21. </TableLayout>  


TableLayout就那么简单，TableLayout中也有几个常用属性：

（1）shrinkColumns属性：以0为序，当TableRow里面的控件布满布局时，，指定列自动延伸以填充可用部分；当TableRow里面的控件还没有布满布局时，shrinkColumns不起作用。

在布局文件中添加shrinkColumns属性代码：

[html] view plaincopy
  1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:shrinkColumns="2">  
[html] view plaincopy
  1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:shrinkColumns="2">  
[html] view plaincopy
  1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:shrinkColumns="2">  

指定第3列填充可用部分，运行项目效果如图：

没有发生变化，因为TableRow里面的控件还没有布满布局，现在再修改布局文件如下：

现在可以看到，shinkColumns属性起作用了。

[html] view plaincopy
  1.   
  2.   
  3. <TableRow>  
  4.       <Button android:text="Button1"/>  
  5.       <Button android:text="Button2"/>  
  6.       <Button android:text="Button3333333333333333333333333"/>  
  7.   </TableRow>  
[html] view plaincopy
  1.   
  2.   
  3. <TableRow>  
  4.       <Button android:text="Button1"/>  
  5.       <Button android:text="Button2"/>  
  6.       <Button android:text="Button3333333333333333333333333"/>  
  7.   </TableRow>  
[html] view plaincopy
  1. <TableRow>  
  2.       <Button android:text="Button1"/>  
  3.       <Button android:text="Button2"/>  
  4.       <Button android:text="Button3333333333333333333333333"/>  
  5.   </TableRow>  

（2）strechColumns属性，以第0行为序，指定列对空白部分进行填充。

在布局中添加strechColumns属性代码如下：

[html] view plaincopy
  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="2">  
[html] view plaincopy
  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="2">  
[html] view plaincopy
  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="2">  


android:strechColumns:指定第3列填充空白部分

（3）collapseColumns属性：以0行为序，隐藏指定的列

在布局中添加collapseColumns属性代码如下：

[html] view plaincopy
  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:collapseColumns="2">  
[html] view plaincopy
  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:collapseColumns="2">  
[html] view plaincopy
  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:collapseColumns="2">  


运行效果如图：

android:collapseColumns="2":指定第3列隐藏

(4)layout_column属性：以0行为序，设置组件显示指定列

(5)layout_span属性：以第0行为序，设置组件显示占用的列数。

修改布局代码如下：

[html] view plaincopy
  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.     <TableRow>  
  6.         <Button android:text="Button1"  
  7.             android:layout_span="3"/>  
  8.         <Button android:text="Button2"/>  
  9.         <Button android:text="Button3"/>  
  10.     </TableRow>  
  11.     <TableRow>  
  12.         <Button android:text="Button4"  
  13.             android:layout_column="2"/>  
  14.         <Button android:text="Button5"  
  15.             android:layout_column="0"/>  
  16.         <Button android:text="Button6"/>  
  17.     </TableRow>  
  18.     <TableRow>  
  19.         <Button android:text="Button7"/>  
  20.         <Button android:text="Button8"/>  
  21.         <Button android:text="Button9"/>  
  22.     </TableRow>  
  23. </TableLayout>  
[html] view plaincopy
  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.     <TableRow>  
  6.         <Button android:text="Button1"  
  7.             android:layout_span="3"/>  
  8.         <Button android:text="Button2"/>  
  9.         <Button android:text="Button3"/>  
  10.     </TableRow>  
  11.     <TableRow>  
  12.         <Button android:text="Button4"  
  13.             android:layout_column="2"/>  
  14.         <Button android:text="Button5"  
  15.             android:layout_column="0"/>  
  16.         <Button android:text="Button6"/>  
  17.     </TableRow>  
  18.     <TableRow>  
  19.         <Button android:text="Button7"/>  
  20.         <Button android:text="Button8"/>  
  21.         <Button android:text="Button9"/>  
  22.     </TableRow>  
  23. </TableLayout>  
[html] view plaincopy
  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.     <TableRow>  
  6.         <Button android:text="Button1"  
  7.             android:layout_span="3"/>  
  8.         <Button android:text="Button2"/>  
  9.         <Button android:text="Button3"/>  
  10.     </TableRow>  
  11.     <TableRow>  
  12.         <Button android:text="Button4"  
  13.             android:layout_column="2"/>  
  14.         <Button android:text="Button5"  
  15.             android:layout_column="0"/>  
  16.         <Button android:text="Button6"/>  
  17.     </TableRow>  
  18.     <TableRow>  
  19.         <Button android:text="Button7"/>  
  20.         <Button android:text="Button8"/>  
  21.         <Button android:text="Button9"/>  
  22.     </TableRow>  
  23. </TableLayout>  


运行效果：

从效果图可知：Button1被设置了占用了3列，Button4被设置显示在地3列，但代码指定Button5显示在第一列，但没有按照设定显示，这样可知TableRow在表格布局中，一行里的组件都会自动放在前一组件的右侧，依次排列，只要确定了所在列，其后面的组件就无法在进行设置位置。

4、part AbsoluteLayout(绝对布局)

AbsoluteLayout(绝对布局)布局用法如其名，组件的位置可以准确的指定其在屏幕的x/y坐标位置。虽然可以精确的去规定坐标，但是由于代码的书写过于刚硬，使得在不同的设备，不同分辨率的手机移动设备上不能很好的显示应有的效果，所以此布局不怎么被推荐使用。

创建项目：Layout_04(绝对布局)

修改布局文件代码如下：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="fill_parent"  
  10.         android:text="Button1"  
  11.         android:layout_x="100dp"  
  12.         />  
  13.     <Button   
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:text="Button2"  
  17.         android:layout_y="100dp"  
  18.         />  
  19.       
  20.     </AbsoluteLayout>  
[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="fill_parent"  
  10.         android:text="Button1"  
  11.         android:layout_x="100dp"  
  12.         />  
  13.     <Button   
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:text="Button2"  
  17.         android:layout_y="100dp"  
  18.         />  
  19.       
  20.     </AbsoluteLayout>  
[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7.     <Button   
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="fill_parent"  
  10.         android:text="Button1"  
  11.         android:layout_x="100dp"  
  12.         />  
  13.     <Button   
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:text="Button2"  
  17.         android:layout_y="100dp"  
  18.         />  
  19.       
  20.     </AbsoluteLayout>  


项目运行效果：

运行效果说明：Button1的x坐标设定为了100像素，Button2的y坐标设定为了100像素。

5、part FrameLayout(单帧布局)

FrameLayout(单帧布局),据说是五种布局中最简单的一种，因为单帧布局在新定义组件的时候都会将组件放置屏幕的左上角，即使在此布局中定义多个组件，后一个组件总会将前一个组件所覆盖，除非最后一个组件是透明的。

创建项目：Layout_05

修改布局文件代码如下：

[html] view plaincopy
  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.     >  
  6.     <Button   
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="wrap_content"  
  9.         android:text="Button1"  
  10.         />  
  11.     <Button   
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="fill_parent"  
  14.         android:text="Button2"  
  15.         />  
  16.     <Button   
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:text="Button3"  
  20.         />  
  21.       
  22. </FrameLayout>  
[html] view plaincopy
  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.     >  
  6.     <Button   
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="wrap_content"  
  9.         android:text="Button1"  
  10.         />  
  11.     <Button   
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="fill_parent"  
  14.         android:text="Button2"  
  15.         />  
  16.     <Button   
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:text="Button3"  
  20.         />  
  21.       
  22. </FrameLayout>  
[html] view plaincopy
  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.     >  
  6.     <Button   
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="wrap_content"  
  9.         android:text="Button1"  
  10.         />  
  11.     <Button   
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="fill_parent"  
  14.         android:text="Button2"  
  15.         />  
  16.     <Button   
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:text="Button3"  
  20.         />  
  21.       
  22. </FrameLayout>  

项目运行效果：


效果图说明：可以看到3个按钮组件都有重叠的部分，单帧布局不会像线性布局那样每个组件之间自动对齐且组件之间都有间隙

0 0
淘宝卡西欧手表真假 淘宝卡西欧手表真假
原创粉丝点击
热门IT博客
淘宝怎么修改密码淘宝怎么修改密码
网上交朋友软件网上交朋友软件
淘宝汽车贴膜
ps软件培训
linux内核源码目录
java编译代码
绿榴莲网络班价格
sql 2005 64 个人版
从淘宝网上买劲霸男装
mysql distinct
linux 待机 设置 按钮
java 取变量名方法
更改管家婆erp端口
意大利航空 知乎
淘宝特卖品牌女装
最新网络流行词2016
java实现aes加密
淘宝 旧版本 ipad
护盾手机数据恢复软件
js和java的区别
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 定做一个衣柜多少钱 订做衣柜哪家好 衣柜推拉门多少钱 狮子女巫和魔衣橱 收旧衣物 旧衣物 白衣物语 衣物烘干机 家人衣物 衣物消毒液 衣物消毒 衣物柔顺剂 衣物收纳架 衣物收纳袋 衣物清洁 贴身衣物 衣物染色剂 旧衣物回收价格表 卖女儿衣物遭威胁 旧衣物巧利用 衣服图片 衣服有 衣服的 定制服饰 品牌服饰批发 天衣服饰 森马服饰价格 欧美服饰 儿童服饰批发 运动服饰搭配 高档服饰 南韩服饰 一号店服饰 青少年服饰 裂锦服饰 佐纳利服饰 婴幼服饰 男士服饰 格凯服饰 服饰印花 服饰花边

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里