Android应用程序----UI界面控件(框架布局,表格布局)
框架布局(FrameLayout)是最简单的界面布局,是用来存放一个元素的空白空间,且子元素的位置是不能够指定的,只能够放置在空白空间的左上角
如果有多个子元素,后放置的子元素将遮挡先放置的子元素
使用Android SDK中提供的层级观察器(Hierarchy Viewer)进一步分析界面布局
层级观察器能够对用户界面进行分析和调试,并以图形化的方式展示树形结构的界面布局
还提供了一个精确的像素级观察器(Pixel Perfect View),以栅格的方式详细观察放大后的界面界面
在层级观察器中获得示例界面布局的树形结构图
示意图
结合界面布局的树形结构图和示意图,分析不同界面布局和界面控件的区域边界
用户界面的根节点(#0@43599ee0)是线性布局,其边界是整个界面,也就是示意图的最外层的实心线
根节点右侧的子节点(#0@43599a730)是框架布局,仅有一个节点元素(#0@4359ad18),这个子元素是TextView控件,用来显示Android应用程序名称,其边界是示意图中的区域1。因此框架布局元素#0@43599a730的边界是同区域1的高度相同,宽带充满整个根节点的区域。这两个界面元素是系统自动生成的,一般情况下用户不能够修改和编辑
根节点左侧的子节点(#1@4359b858)也是框架布局,边界是区域2到区域7的全部空间
子节点(#1@4359b858)下仅有一个子节点(#0@4359bd60)元素是线性布局,因为线性布局的Layout width属性设置为fill_parent,Layout height属性设置为wrap_content,因此该线性布局的宽度就是其父节点#1@4359b858的宽带,高度等于所有子节点元素的高度之和
线性布局#0@4359bd60的四个子节点元素#0@4359bfa8、#1@4359c5f8、#2@4359d5d8和#3@4359de18的边界,分别是界面布局示意图中的区域2、区域3、区域4和区域5
表格布局(TableLayout)也是一种常用的界面布局,它将屏幕划分网格,通过指定行和列可以将界面元素添加的网格中
网格的边界对用户是不可见的
表格布局还支持嵌套,可以将另一个表格布局放置在前一个表格布局的网格中,也可以在表格布局中添加其他界面布局,例如线性布局、相对布局等等
表格布局示意图
表格布局效果图
建立表格布局要注意以下几点
向界面中添加一个线性布局,无需修改布局的属性值。其中,Id属性为TableLayout01,Layout width和Layout height属性都为wrap_content
向TableLayout01中添加两个TableRow。TableRow代表一个单独的行,每行被划分为几个小的单元,单元中可以添加一个界面控件。其中,Id属性分别为TableRow01和TableRow02,Layout width和Layout height属性都为wrap_content
通过Outline,向TableRow01中添加TextView和EditText
通过Outline,向TableRow02中添加两个Button
参考下表设置TableRow中四个界面控件的属性值
main.xml文件的完整代码如下
第3行代码使用了<TableLayout>标签声明表格布局
第7行和第23行代码声明了两个TableRow元素
第12行设定宽度属性android:layout_width:160dip
第13行设定属性android:gravity,指定文字为右对齐
第15行使用属性android:padding,声明TextView元素与其他元素的间隔距离为3dip