1、第第5章章 Android用户界面用户界面5.1 用户界面基础n设计手机用户界面应解决的问题q需要界面设计与程序逻辑完全分离，这样不仅有利于他们的并行开发，而且在后期修改界面时，也不用再次修改程序的逻辑代码q根据不同型号手机的屏幕解析度、尺寸和纵横比各不相同，自动调整界面上部分控件的位置和尺寸，避免因为屏幕信息的变化而出现显示错误q能够合理利用较小的屏幕显示空间，构造出符合人机交互规律的用户界面，避免出现凌乱、拥挤的用户界面qAndroid已经解决了前两个问题，使用XML文件描述用户界面；资源资源文件独立保存在资源文件夹中；对界用户面描述非常灵活，允许不明确定义界面元素的位置和尺寸，仅声明界面
2、元素的相对位置和粗略尺寸5.1 用户界面基础nAndroid用户界面框架qAndroid用户界面框架（Android UI Framework）采用MVC（Model-View-Controller）模型n提供了处理用户输入的控制器（Controller）n显示用户界面和图像的视图（View），以及保存数据和代码的模型（Model）5.1 用户界面基础nAndroid用户界面框架qMVC模型nMVC模型中的控制器能够接受并响应程序的外部动作，如按键动作或触摸屏动作等n控制器使用队列处理外部动作，每个外部动作作为一个对立的事件被加入队列中，然后Android用户界面框架按照“先进先出”的规则从队
3、列中获取事件，并将这个事件分配给所对应的事件处理函数5.1 用户界面基础nAndroid用户界面框架qAndroid用户界面框架（Android UI Framework）采用视图树（View Tree）模型nAndroid用户界面框架中的界面元素以一种树型结构组织在一起，称为视图树nAndroid系统会依据视图树的结构从上至下绘制每一个界面元素。每个元素负责对自身的绘制，如果元素包含子元素，该元素会通知其下所有子元素进行绘制5.1 用户界面基础nAndroid用户界面框架q视图树n视图树由View和ViewGroup构成nView是界面的最基本的可视单元，存储了屏幕上特定矩形区域内所显示内容
4、的数据结构，并能够实现所占据区域的界面绘制、焦点变化、用户输入和界面事件处理等功能nView也是一个重要的基类，所有在界面上的可见元素都是View的子类nViewGroup是一种能够承载含多个View的显示单元nViewGroup功能：一个是承载界面布局，另一个是承载具有原子特性的重构模块5.1 用户界面基础nAndroid用户界面框架q单线程用户界面n在单线程用户界面中，控制器从队列中获取事件和视图在屏幕上绘制用户界面，使用的都是同一个线程n特点：处理函数具有顺序性，能够降低应用程序的复杂程度，同时也能减低开发的难度n缺点：如果事件处理函数过于复杂，可能会导致用户界面失去响应5.2 界面控件
5、nAndroid系统的界面控件分为定制控件和系统控件q定制控件是用户独立开发的控件，或通过继承并修改系统控件后所产生的新控件。能够为用户提供特殊的功能或与众不同的显示需求方式q系统控件是Android系统提供给用户已经封装的界面控件。提供在应用程序开发过程中常见功能控件。系统控件更有利于帮助用户进行快速开发，同时能够使Android系统中应用程序的界面保持一致性n常见的系统控件包括TextView、EditText、Button、ImageButton、Checkbox、RadioButton、Spinner、ListView和TabHost5.2 界面控件n5.2.1 TextView和Ed
6、itTextqTextView是一种用于显示字符串的控件qEditText则是用来输入和编辑字符串的控件nEditText是一个具有编辑功能的TextView5.2 界面控件n5.2.1 TextView和EditTextq建立一个“TextViewDemo”的程序，包含TextView和EditText两个控件n上方“用户名”部分使用的是TextView，下方的文字输入框使用的是EditText5.2 界面控件n5.2.1 TextView和EditTextqTextViewDemo在XML文件中的代码1.5.6.10.5.2 界面控件n5.2.1 TextView和EditTextq第1行
7、android:id属性声明了TextView的ID，这个ID主要用于在代码中引用这个TextView对象n“+id/TextView01”表示所设置的ID值n表示后面的字符串是ID资源n加号（+）表示需要建立新资源名称，并添加到R.java文件中n斜杠后面的字符串（TextView01）表示新资源的名称n如果资源不是新添加的，或属于Android框架的ID资源，则不需要使用加号（+），但必须添加Android包的命名空间，例如android:id=android:id/empty5.2 界面控件n5.2.1 TextView和EditTextq第2行的android:layout_width
8、属性用来设置TextView的宽度，wrap_content表示TextView的宽度只要能够包含所显示的字符串即可q第3行的android:layout_height属性用来设置TextView的高度q第4行表示TextView所显示的字符串，在后面将通过代码更改TextView的显示内容q第7行中“fill_content”表示EditText的宽度将等于父控件的宽度5.2 界面控件n5.2.1 TextView和EditTextqTextViewDemo.java文件中代码的修改n第1行代码的findViewById()函数能够通过ID引用界面上的任何控件，只要该控件在XML文件中定义过
9、ID即可n第3行代码的setText()函数用来设置TextView所显示的内容1.TextView textView=(TextView)findViewById(R.id.TextView01);2.EditText editText=(EditText)findViewById(R.id.EditText01);3.textView.setText(用户名：);4.editText.setText();5.2 界面控件n5.2.2 Button和ImageButtonqButton是一种按钮控件，用户能够在该控件上点击，并后引发相应的事件处理函数qImageButton用以实现能够显示图
10、像功能的控件按钮5.2 界面控件n5.2.2 Button和ImageButtonq建立一个“ButtonDemo”的程序，包含Button和ImageButton两个按钮，上方是“Button按钮”，下方是一个ImageButton控件5.2 界面控件n5.2.2 Button和ImageButtonqButtonDemo在XML文件中的代码n定义Button控件的高度、宽度和内容n定义ImageButton控件的高度和宽度，但是没定义显示的图像，在后面的代码中进行定义1.5.6.9.5.2 界面控件n5.2.2 Button和ImageButtonq引入资源n将download.png文件
11、拷贝到/res/drawable文件夹下n在/res目录上选择Refreshn新添加的文件将显示在/res/drawable文件夹下nR.java文件内容也得到了更新n否则提示无法找到资源的错误5.2 界面控件n5.2.2 Button和ImageButtonq更改Button和ImageButton内容n引入android.widget.Button和android.widget.ImageButtonn第1行代码用于引用在XML文件中定义的Button控件n第2行代码用于引用在XML文件中定义的ImageButton控件n第3行代码将Button的显示内容更改为“Button按钮”n第4行
12、代码利用setImageResource()函数，将新加入的png文件R.drawable.download传递给ImageButton1.Button button=(Button)findViewById(R.id.Button01);2.ImageButton imageButton=(ImageButton)findViewById(R.id.ImageButton01);3.button.setText(Button按钮);4.imageButton.setImageResource(R.drawable.download);5.2 界面控件n5.2.2 Button和ImageBu
13、ttonq按钮响应点击事件：添加点击事件的监听器n第2行代码中button对象通过调用setOnClickListener()函数，注册一个点击（Click）事件的监听器View.OnClickListener()n第3行代码是点击事件的回调函数n第4行代码将TextView的显示内容更改为“Button按钮”1.final TextView textView=(TextView)findViewById(R.id.TextView01);2.button.setOnClickListener(new View.OnClickListener()3.public void onClick(Vi
14、ew view)4.textView.setText(Button按钮);5.6.);7.imageButton.setOnClickListener(new View.OnClickListener()8.public void onClick(View view)9.textView.setText(ImageButton按钮);10.11.);5.2 界面控件n5.2.2 Button和ImageButtonqView.OnClickListener()nView.OnClickListener()是View定义的点击事件的监听器接口，并在接口中仅定义了onClick()函数n当Butt
15、on从Android界面框架中接收到事件后，首先检查这个事件是否是点击事件，如果是点击事件，同时Button又注册了监听器，则会调用该监听器中的onClick()函数n每个View仅可以注册一个点击事件的监听器，如果使用setOnClickListener()函数注册第二个点击事件的监听器，之前注册的监听器将被自动注销n多个按钮注册到同一个点击事件的监听器上，代码如下5.2 界面控件n5.2.2 Button和ImageButtonn第1行至第12行代码定义了一个名为buttonListener的点击事件监听器n第13行代码将该监听器注册到Button上n第14行代码将该监听器注册到Image
16、Button上1.Button.OnClickListener buttonListener=new Button.OnClickListener()2.Override3.public void onClick(View v)4.switch(v.getId()5.case R.id.Button01:6.textView.setText(Button按钮);7.return;8.case R.id.ImageButton01:9.textView.setText(ImageButton按钮);10.return;11.12.;13.button.setOnClickListener(but
17、tonListener);14.imageButton.setOnClickListener(buttonListener);5.2 界面控件n5.2.3 CheckBox和RadioButtonqCheckBox是一个同时可以选择多个选项的控件qRadioButton则是仅可以选择一个选项的控件qRadioGroup是RadioButton的承载体，程序运行时不可见，应用程序中可能包含一个或多个RadioGroupq一个RadioGroup包含多个RadioButton，在每个RadioGroup中，用户仅能够选择其中一个RadioButton5.2 界面控件n5.2.3 CheckBox和
18、RadioButtonq建立一个“CheckboxRadiobuttonDemo”程序，包含五个控件，从上至下分别是TextView01、CheckBox01、CheckBox02、RadioButton01、RadioButton02n当选择RadioButton01，RadioButton02则无法选择5.2 界面控件n5.2.3 CheckBox和RadioButtonqCheckboxRadiobuttonDemo在XML文件中的代码1.5.9.10.14.5.2 界面控件n5.2.3 CheckBox和RadioButtonn第15行标签声明了一个RadioGroupn在第18行和第
19、23行分别声明了两个RadioButton，这两个RadioButton是RadioGroup的子元素15.18.22.23.27.28.5.2 界面控件n5.2.3 CheckBox和RadioButtonq引用CheckBox和RadioButton的方法参考下面的代码qCheckBox设置点击事件监听器的简要代码n与Button设置点击事件监听器中介绍的方法相似，唯一不同在于将Button.OnClickListener换成了CheckBox.OnClickListener1.CheckBox checkBox1=(CheckBox)findViewById(R.id.CheckBox0
20、1);2.RadioButton radioButton1=(RadioButton)findViewById(R.id.RadioButton01);1.CheckBox.OnClickListener checkboxListener=new CheckBox.OnClickListener()2.Override3.public void onClick(View v)4./过程代码5.;6.checkBox1.setOnClickListener(checkboxListener);7.checkBox2.setOnClickListener(checkboxListener);5.2
21、 界面控件n5.2.3 CheckBox和RadioButtonqRadioButton设置点击事件监听器的方法1.RadioButton.OnClickListener radioButtonListener=new RadioButton.OnClickListener()2.Override3.public void onClick(View v)4./过程代码5.;6.radioButton1.setOnClickListener(radioButtonListener);7.radioButton2.setOnClickListener(radioButtonListener);5.
22、2 界面控件n5.2.4 SpinnerqSpinner是一种能够从多个选项中选一选项的控件，类似于桌面程序的组合框（ComboBox），但没有组合框的下拉菜单，而是使用浮动菜单为用户提供选择q建立一个程序“SpinnerDemo”包含3个子项Spinner控件5.2 界面控件n5.2.4 SpinnerqSpinnerDemo在XML文件中的代码n第5行使用标签声明了一个Spinner控件n第6行代码中指定了该控件的宽度为300dip1.5.8.5.2 界面控件n5.2.4 Spinnerq在SpinnerDemo.java文件中，定义一个ArrayAdapter适配器，在ArrayAdap
23、ter中添加需要在Spinner中可以选择的内容，需要在代码中引入android.widget.ArrayAdapter和android.widget.Spinner1.Spinner spinner=(Spinner)findViewById(R.id.Spinner01);2.List list =new ArrayList();3.list.add(Spinner子项1);4.list.add(Spinner子项2);5.list.add(Spinner子项3);6.ArrayAdapter adapter=new ArrayAdapter(this,android.R.layout.s
24、imple_spinner_item,list);7.adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);8.spinner.setAdapter(adapter);5.2 界面控件n5.2.4 Spinnern第2行代码建立了一个字符串数组列表（ArrayList），这种数组列表可以根据需要进行增减n表示数组列表中保存的是字符串类型的数据n在代码的第3、4、5行中，使用add()函数分别向数组列表中添加3个字符串n第6行代码建立了一个ArrayAdapter的数组适配器，数组适配器能够将
25、界面控件和底层数据绑定在一起n第7行代码设定了Spinner的浮动菜单的显示方式，其中，android.R.layout.simple_spinner_dropdown_item是Android系统内置的一种浮动菜单n第8行代码实现绑定过程，所有ArrayList中的数据，将显示在Spinner的浮动菜单中5.2 界面控件n5.2.4 Spinnerq设置android.R.layout.simple_spinner_item浮动菜单，显示结果如图q适配器绑定界面控件和底层数据，如果底层数据更改了，用户界面也相应修改显示内容，就不需要应用程序再监视，从而极大的简化的代码的复杂性5.2 界面控件
26、n5.2.5 ListViewqListView是一种用于垂直显示的列表控件，如果显示内容过多，则会出现垂直滚动条qListView能够通过适配器将数据和自身绑定，在有限的屏幕上提供大量内容供用户选择,所以是经常使用的用户界面控件qListView支持点击事件处理，用户可以用少量的代码实现复杂的选择功能5.2 界面控件n5.2.5 ListViewq建立一个“ListViewDemo”程序，包含四个控件，从上至下分别为TextView01、ListView01、ListView02和 ListView035.2 界面控件n5.2.5 ListViewqListViewDemo在XML文件中的代
27、码1.5.8.5.2 界面控件n5.2.5 ListViewq在ListViewDemo.java文件中，首先需要为ListView创建适配器，并添加ListView中所显示的内容n第2行代码通过ID引用了XML文件中声明的ListViewn第7行代码声明了适配器ArrayAdapter，第三个参数list说明适配器的数据源为数组列表n第8行代码将ListView和适配器绑定1.final TextView textView=(TextView)findViewById(R.id.TextView01);2.ListView listView=(ListView)findViewById(R.
28、id.ListView01);3.List list =new ArrayList();4.list.add(ListView子项1);5.list.add(ListView子项2);6.list.add(ListView子项3);7.ArrayAdapter adapter=new ArrayAdapter(this,android.R.layout.simple_list_item_1,list);8.listView.setAdapter(adapter);5.2 界面控件n5.2.5 ListViewq下面的代码声明了ListView子项的点击事件监听器，用以确定用户在ListView
29、中，选择的是哪一个子项1.AdapterView.OnItemClickListener listViewListener=newAdapterView.OnItemClickListener()2.Override3.public void onItemClick(AdapterView arg0,View arg1,int arg2,long arg3)4.String msg=”;5.textView.setText(msg);6.;7.listView.setOnItemClickListener(listViewListener);5.2 界面控件n5.2.5 ListViewn第1
30、行的AdapterView.OnItemClickListener是ListView子项的点击事件监听器，同样是一个接口，需要实现onItemClick()函数。在ListView子项被选择后，onItemClick()函数将被调用n第3行的onItemClick()函数中一共有四个参数，参数0表示适配器控件，就是ListView；参数1表示适配器内部的控件，是ListView中的子项；参数2表示适配器内部的控件，也就是子项的位置；参数3表示子项的行号n第4行和第5行代码用于显示信息，选择子项确定后，在TextView中显示子项父控件的信息、子控件信息、位置信息和ID信息n第7行代码是List
31、View指定刚刚声明的监听器5.2 界面控件n5.2.6 TabHostqTab标签页是界面设计时经常使用的界面控件，可以实现多个分页之间的快速切换，每个分页可以显示不同的内容q下图是Android系统内置的Tab标签页，点击“呼出/接听键”后出现，用于电话呼出和查看拨号记录、联系人5.2 界面控件n5.2.6 TabHostqTab标签页的使用n首先要设计所有的分页的界面布局n在分页设计完成后，使用代码建立Tab标签页，并给每个分页添加标识和标题n最后确定每个分页所显示的界面布局q每个分页建立一个XML文件，用以编辑和保存分页的界面布局，使用的方法与设计普通用户界面没有什么区别5.2 界面控
32、件n5.2.6 TabHostq建立一个“TabDemo”程序，包含三个XML文件，分别为tab1.xml、tab2.xml和tab3.xml，这3个文件分别使用线性布局、相对布局和绝对布局示例中的main.xml的代码，并将布局的ID分别定义为layout01、layout02和layout035.2 界面控件n5.2.6 TabHostqtab1.xml文件代码qtab2.xml文件代码qtab3.xml文件代码1.2.LinearLayout android:id=+id/layout013.4.5.1.2.AbsoluteLayout android:id=+id/layout023.
33、4.5.1.2.RelativeLayout android:id=+id/layout03 3.4.5.5.2 界面控件n5.2.6 TabHostq在TabDemo.java文件中键入下面的代码，创建Tab标签页，并建立子页与界面布局直接的关联关系1.package edu.hrbeu.TabDemo;2.3.import android.app.TabActivity;4.import android.os.Bundle;5.import android.widget.TabHost;6.import android.view.LayoutInflater;7.8.public clas
34、s TabDemo extends TabActivity 9.Override5.2 界面控件n5.2.6 TabHost10.public void onCreate(Bundle savedInstanceState)11.super.onCreate(savedInstanceState);12.TabHost tabHost=getTabHost();13.LayoutInflater.from(this).inflate(R.layout.tab1,tabHost.getTabContentView(),true);14.LayoutInflater.from(this).infl
35、ate(R.layout.tab2,tabHost.getTabContentView(),true);15.LayoutInflater.from(this).inflate(R.layout.tab3,tabHost.getTabContentView(),true);16.tabHost.addTab(tabHost.newTabSpec(TAB1)17.setIndicator(线性布局).setContent(R.id.layout01);18.tabHost.addTab(tabHost.newTabSpec(TAB2)19.setIndicator(绝对布局).setConten
36、t(R.id.layout02);20.tabHost.addTab(tabHost.newTabSpec(TAB3)21.setIndicator(相对布局).setContent(R.id.layout03);22.23.5.2 界面控件n5.2.6 TabHostn第8行代码的声明TabDemo类继承与TabActivity，与以往继承Activity不同，TabActivity支持内嵌多个Activity或Viewn第12行代码通过getTabHost()函数获得了Tab标签页的容器，用以承载可以点击的Tab标签和分页的界面布局。n第13行代码通过LayoutInflater将tab1
37、.xml文件中的布局转换为Tab标签页可以使用的View对象n第16行代码使用addTab()函数添加了第1个分页，tabHost.newTabSpec(TAB1)表明在第12行代码中建立的tabHost上，添加一个标识为TAB1的Tab分页n第17行代码使用setIndicator()函数设定分页显示的标题，使用setContent()函数设定分页所关联的界面布局5.2 界面控件n5.2.6 TabHostqTabDemo示例的运行结果如图5.2 界面控件n5.2.6 TabHostq在使用Tab标签页时，可以将不同分页的界面布局保存在不同的XML文件中，也可以将所有分页的布局保存在同一个X
38、ML文件中n第一种方法有利于在Eclipse开发环境中进行可视化设计，并且不同分页的界面布局在不同的文件中更加易于管理n第二种方法则可以产生较少的XML文件，同时编码时的代码也会更加简洁5.3 界面布局n界面布局q界面布局（Layout）是用户界面结构的描述，定义了界面中所有的元素、结构和相互关系q声明Android程序的界面布局有两种方法n使用XML文件描述界面布局n在程序运行时动态添加或修改界面布局q用户既可以独立使用任何一种声明界面布局的方式，也可以同时使用两种方式5.3 界面布局n界面布局q使用XML文件声明界面布局的特点n将程序的表现层和控制层分离n在后期修改用户界面时，无需更改程序
39、的源代码n用户还能够通过可视化工具直接看到所设计的用户界面，有利于加快界面设计的过程，并且为界面设计与开发带来极大的便利性 5.3 界面布局n5.3.1 线性布局q线性布局（LinearLayout）是一种重要的界面布局中，也是经常使用到的一种界面布局q在线性布局中，所有的子元素都按照垂直或水平的顺序在界面上排列n如果垂直排列，则每行仅包含一个界面元素n如果水平排列，则每列仅包含一个界面元素5.3 界面布局n5.3.1 线性布局q创建Android工程n工程名称是LinearLayoutn包名称是edu.hrbeu.LinearLayoutnActivity名称为LinearLayoutq为了
40、能够完整体验创建线性布局的过程，首先删除Eclipse自动建立的/res/layout/main.xml文件，然后建立用于显示垂直排列线性布局的XML文件5.3 界面布局n5.3.1 线性布局q右击/res/layout文件夹q选择New File打开新文件建立向导q文件名为main_vertical.xmlq保存位置为LinearLayout/res/layout5.3 界面布局n5.3.1 线性布局q双击新建立的/res/layout/main_vertical.xml文件，Eclipse将打开界面布局的可视化编辑器5.3 界面布局n5.3.1 线性布局q可视化编辑器顶部是资源配置清单，可
41、以根据手机的配置不同选择不同的资源，主要用来实现应用软件的本地化q下部左侧是界面布局和界面控件，用户可以将需要的布局和控件拖拽到右面的可视化界面中，并修改布局和控件的属性q右侧是可视化的用户界面，能够实时的呈现用户界面，但对无法正确显示中文。左下角的“Layout”和“main_vertical.xml”能够在可视化编辑器和XML文件编辑器之间切换5.3 界面布局n5.3.1 线性布局q在Eclipse右边的Outline中，双击LinearLayout，打开线性布局的属性编辑器q线性布局的排列方法主要由Orientation属性进行控制，vertical表示垂直排列，horizontal表示
42、水平排列q选择Orientation的值为vertical，表示该线性布局为垂直排列5.3 界面布局n5.3.1 线性布局q缺省情况下，Layout height的值为wrap_content，表示线性布局高度等于所有子控件的高度总和，也就是线性布局的高度会刚好将所有子控件包含其中q将Layout width属性的值改为fill_parent，表示线性布局宽度等于父控件的宽度，就是将线性布局在横向上占据父控件的所有空间5.3 界面布局n5.3.1 线性布局q打开XML文件编辑器，main_vertical.xml文件的代码如下n第2行代码是声明XML文件的根元素为线性布局n第4、5、6行代码是
43、在属性编辑器中修改过的宽度、高度和排列方式的属性n用户在可视化编辑器和属性编辑器中的任何修改，都会同步的反映在XML文件中；反之，也是如此1.2.7.5.3 界面布局n5.3.1 线性布局q将四个界面控件TextView、EditText、Button、Button先后拖拽到可视化编辑器中n所有控件都自动获取控件名称，并把该名称显示在控件上，如TextView01、EditText01、Button01和Button025.3 界面布局n5.3.1 线性布局q修改界面控件的属性n所有界面控件都有一个共同的属性IDnID是一个字符串，编译时被转换为整数，可以用来在代码中引用界面元素，一般仅在代码
44、中需要动态修改的界面元素时才为界面元素设置ID，反之则不需要设置ID编号编号类型类型属性属性值值1TextViewId+id/labelText用户名：2EditTextId+id/entryLayout widthfill_parentTextnull3ButtonId+id/okText确认4ButtonId+id/cancelText取消5.3 界面布局n5.3.1 线性布局q从可视化编辑器中发现，界面控件的中文字符都显示为“”，因为可视化编辑器还不能很好的支持中文字符q打开XML文件编辑器查看main_vertical.xml文件代码，发现在属性编辑器内填入的文字已经正常写入到XML文
45、件中，例如第11、20、25行代码1.2.7.8.5.3 界面布局n5.3.1 线性布局12.13.16.17.21.22.26.27.5.3 界面布局n5.3.1 线性布局q将LinearLayout.java文件中的setContentView(R.layout.main)，更改为setContentView(R.layout.main_vertical)。运行后的结果如图5.3 界面布局n5.3.1 线性布局q建立横向线性布局与纵向线性布局相似，只需注意以下几点n建立main_ horizontal.xml文件n线性布局的Orientation属性的值设置为horizontaln将Edi
46、tText的Layout width 属性的值设置为 wrap_contentn将LinearLayout.java文件中的 setContentView(R.layout.main_vertical)修改为setContentView(R.layout.main_ horizontal)5.3 界面布局n5.3.2 框架布局q框架布局（FrameLayout）是最简单的界面布局，是用来存放一个元素的空白空间，且子元素的位置是不能够指定的，只能够放置在空白空间的左上角q如果有多个子元素，后放置的子元素将遮挡先放置的子元素q使用Android SDK中提供的层级观察器（Hierarchy Vie
47、wer）进一步分析界面布局q层级观察器能够对用户界面进行分析和调试，并以图形化的方式展示树形结构的界面布局q还提供了一个精确的像素级观察器（Pixel Perfect View），以栅格的方式详细观察放大后的界面界面5.3 界面布局n5.3.2 框架布局q在层级观察器中获得示例界面布局的树形结构图5.3 界面布局n5.3.2 框架布局q示意图5.3 界面布局n5.3.2 框架布局q结合界面布局的树形结构图和示意图，分析不同界面布局和界面控件的区域边界n用户界面的根节点（#043599ee0）是线性布局，其边界是整个界面，也就是示意图的最外层的实心线n根节点右侧的子节点（#043599a730）
48、是框架布局，仅有一个节点元素（#04359ad18），这个子元素是TextView控件，用来显示Android应用程序名称，其边界是示意图中的区域1。因此框架布局元素#043599a730的边界是同区域1的高度相同，宽带充满整个根节点的区域。这两个界面元素是系统自动生成的，一般情况下用户不能够修改和编辑n根节点左侧的子节点（#14359b858）也是框架布局，边界是区域2到区域7的全部空间5.3 界面布局n5.3.2 框架布局n子节点（#14359b858）下仅有一个子节点（#04359bd60）元素是线性布局，因为线性布局的Layout width属性设置为fill_parent，Layou
49、t height属性设置为wrap_content，因此该线性布局的宽度就是其父节点#14359b858的宽带，高度等于所有子节点元素的高度之和n线性布局#04359bd60的四个子节点元素#04359bfa8、#14359c5f8、#24359d5d8和#34359de18的边界，分别是界面布局示意图中的区域2、区域3、区域4和区域55.3 界面布局n5.3.3 表格布局q表格布局（TableLayout）也是一种常用的界面布局，它将屏幕划分网格，通过指定行和列可以将界面元素添加的网格中n网格的边界对用户是不可见的n表格布局还支持嵌套，可以将另一个表格布局放置在前一个表格布局的网格中，也可以
50、在表格布局中添加其他界面布局，例如线性布局、相对布局等等5.3 界面布局n5.3.3 表格布局q表格布局示意图 q表格布局效果图5.3 界面布局n5.3.3 表格布局q建立表格布局要注意以下几点n向界面中添加一个表格布局，无需修改布局的属性值。其中，Id属性为TableLayout01，Layout width和Layout height属性都为wrap_contentn向TableLayout01中添加两个TableRow。TableRow代表一个单独的行，每行被划分为几个小的单元，单元中可以添加一个界面控件。其中，Id属性分别为TableRow01和TableRow02，Layout wi
