Android基本布局解析

布局，可以理解为Android应用程序的桌面，在布局上可以摆放各种控件，形成不同的程序界面。布局上除了控件，也可以摆放布局，在此布局中再摆放控件。布局和控件的关系如下图1所示。布局这样的功能，让界面的多样化成为了一件容易的事情。本节介绍3种基本的布局，让大家对Android的布局有一个初步的了解。

图1

下面通过在一个布局上，创建3个按钮，并根据这3个按钮在布局上摆放的位置，来了解一下各个布局的作用。

一、LinearLayout布局

• 创建一个Android程序，程序名为FristLayout，创建程序的相关参数如下图2~图3所示。
  
  图2

  
  图3
  说明：如上面红色标示所示，不要通过ADT来自动创建Activity，我们后续通过手工创建来体验一下。

• 创建好的程序，应该是没有Activity，也没有Layout的。我们首先在src/layout目录下，创建一个layout，并命名为activity_main，同时布局类型请选择LinearLayout，相关参数如下图4中红色标示所示。
  
  图4

• 创建好的布局文件activit_main.xml代码如下图5所示。我们在该文件中，增加3个代码的按钮，并分别给3个按钮定义id为button_1、button_2、button_3，代码如下图6所示。
  
  图5

  
  图6

• 定义好布局文件activity_main.xml后，我们再在src目录下，创建一个类包为com.example.fristlayout，并在该类包下创建活动MainActivity.java文件，用于调用布局activity_main，相关代码如下图7所示。
  
  图7

• 最后，我们修改AndroidManifest.xml文件，注册创建的活动MainActivity，相关代码如下图8所示。
  
  图8

• 运行程序，界面展示效果如下图9所示。我看到3个按钮都是靠左对齐，并纵向排列的。这是因为，LinearLayout布局，是将控件按照纵向或者横向来进行排列的。如图6中所示的第5行代码，android:orientataion=”vertical”，我们将该布局文件定义为将控件纵向排列，因此布局中的3个按钮被依次在纵向上进行排列。
  
  图9

• 我们更改一下布局文件activit_main.xml，将布局的纵向排列改为横向排列，如下图10中，第5行代码所示。
  
  图10

• 运行程序，显示界面效果如下图11所示。界面中的3个按钮已经横向排列在一排上了，这说明布局横向排列的参数已经生效。
  
  图11

二、RelativeLayout布局

• RelativeLayout布局，顾名思义是一个相对关系的布局文件，该布局中的控件位置，都是相对于父布局，或相对于其它控件进行定位。我们将布局文件activit_main.xml，更改为RelativeLayout布局，相关代码如下图12所示。
  
  图12
  说明：
  1）第2行代码、第30行代码，将布局文件更改为RelativeLayout布局。
  2）第10、11行代码，声明按钮button_1对齐父布局的左侧和顶部。
  3）第18行代码，声明按钮button_2对齐父布局的中间。
  4）第25、26行代码，声明按钮button_3对齐父布局的右侧和底部。

• 运行程序，显示界面效果如下图13所示。3个按钮均按照我们在布局文件中声明的对齐方式排列。
  
  图13

• 上面的对齐方式，是将按钮相对于父布局进行定位的。我们修改一下布局文件的代码，将按钮相对于其它控件进行定位。相关代码如下图14所示。
  
  图14
  说明：
  1）第10、11行代码，按钮button_1沿用之前的代码，依旧相对于父布局定位，不做更改。
  2）第18、19行代码，将按钮button_2相对于按钮button_1的底部和右侧进行对齐。
  3）第26、27行代码，将按钮button_3相对于按钮button_2的底部和左侧进行对齐。

• 运行程序，界面显示如下图15所示。button_1仍然在原位置没有变动，按钮butotn_2、button_3已按照布局文件中，分别相对于button_1和button_2进行了重新定位。
  
  图15

三、TableLayout布局

• TableLayout布局，看名称就知道，这是按照表格方式进行定位的布局。TableLayout布局内按照行列的模式进行布局，同一行中，一个控件占据一列，下一行的控件和上一行同列控件对齐。我们将布局文件activit_main.xml，更改为TableLayout布局，相关代码如下图16所示。
  
  图16
  说明：
  1）第2、29行代码，将布局文件更改为RelativeLayout布局。
  2）第6、18行代码，第20、26行代码，在布局中设置了2行。
  3）第7~17行代码，在第一行中，放置了2个按钮button_1和button_2。
  4）第21~25行代码，在第二行中，方式了1个按钮button_3。

• 运行程序，界面显示如下图17所示。界面中3个按钮分为2行显示，第一行2个按钮，第二行1个按钮。
  
  图17