单片机与物联网技术应用实战教程
上QQ阅读APP看书,第一时间看更新

7.2 Android UI布局

7.2.1 视图(View)

一个Android程序是由一个或者多个Activity组成。Activity是一个UI的容器,其本身不在用户界面中显示。其中view类是一个最基本的UI类,大部分的UI组件都是继承于view类实现的。比如:List(列表)、Button(按钮)、EditText(编辑框)、Textview(文本框)、RadioButoon(多选按钮)都是继承于view类。这里简单地介绍view类中的XML一些比较常见的属性。见表7-1。

7-1 View属性

978-7-111-59182-5-Part01-365.jpg

7.2.2 视图组(ViewGroup)

ViewGroup是View类的一个子类,它能够承载包含多个View的显示单元。ViewGroup能够装载和管理一组下层的View和其他ViewGroup。它是布局类的一个基类,布局类则是一组提供屏幕界面通用类型的完全实现子类。

一个Viewgroup对象是一个Android.View.Viewgroup的实例。Viewgroup的作用就是View的容器,其职责是View类中的组件进行布局。当然,Viewgroup可以加入到另一个Viewgroup。因为它是抽象类,也是其他容器类的基类。

7.2.3 线性布局(Linearlayout)

线性布局是最常见的布局形式之一,线性布局是把所有的控件按照水平或者垂直的方式进行摆放。对于每一行而言是垂直摆放,对于每一列而言是水平摆放。在Android系统开发中,线性布局可以在XML中定义,也可以在.java代码中编写。常用的是在XML中定义。

下面是在.xml中定义的垂直方式的线性布局程序。

978-7-111-59182-5-Part01-366.jpg

978-7-111-59182-5-Part01-367.jpg

解释上面的代码:如第二行和第三中的“fill_parent”代表填满其父元素。第四行属性“orien-tation”指定元素排列方式,其“vertical”表示的是垂直方式,每个元素独占一行。第六行表示该元素的编号。第七行和第八行分别表示该元素的宽度和高度。第九行设置该元素的名称。其运行的结果如图7-27所示。

7.2.4 相对布局(Relativelayout)

相对布局也是最常见的布局之一。相对布局意思是一个控件相对于另一个控件的位置或是相对于布局管理器的位置。在Android中,线性布局可以在XML中定义,也可以在.java代码中编写。常用的是在XML中定义。

下面是在.xml中定义的相对布局程序。

978-7-111-59182-5-Part01-368.jpg

978-7-111-59182-5-Part01-369.jpg

图7-27 线性布局运行结果图

978-7-111-59182-5-Part01-370.jpg

978-7-111-59182-5-Part01-371.jpg

解释上面的代码:

第十五行android:layout_alignParentLeft="truer"表示贴紧父元素的左边缘。第八行android:layout_center-Horizontal="true"表示相对与父元素完全居中。第二十二行android:layout_alignParentRight="true"表示贴紧父元素的右边缘。第二十三行android:layout_alignParent-Top="true"表示贴紧父元素的上边缘。其运行结果如图7-28所示。

7.2.5 框架布局(Framelayout)

框架布局就是每增加一个控件都会产生空白的区域,称为一帧。每个控件可以调用gravity属性来调整该控件的位置。默认情况下是从左上角(0,0)坐标开始。含有多个组件会进行叠层排序,后来添加的控件覆盖先前的控件。在Android系统开发中,线性布局可以在XML中定义,也可以在.java代码中编写,常用的是在XML中定义。

下面是在.xml中定义的框架布局程序。

978-7-111-59182-5-Part01-372.jpg

图7-28 相对布局运行结果图

978-7-111-59182-5-Part01-373.jpg

978-7-111-59182-5-Part01-374.jpg

解释上面的代码:

android:layout_gravity="center"是用来设置该view相对与其父view的位置,“center”表示居中。框架布局运行结果如图7-29所示。

7.2.6 表单布局(Tablelayout)

表单布局就是以行和列的形式来添加控件,和常见的表格形式是类似的,但是不会显示行和列的边界线。若直接向表格布局中添加控件,那么该控件会独自占一行。可以在表格布局中,添加<TableRow>标记,每个<TableRow>标记会占用一行,可以在其中添加控件。每增加一个控件,就会增加一列,在Android系统开发中,线性布局可以在XML中定义,也可以在.java代码中编写。常用的是在XML中定义。

下面是在.xml中定义的表单布局程序。

978-7-111-59182-5-Part01-375.jpg

图7-29 框架布局结果图

978-7-111-59182-5-Part01-376.jpg

978-7-111-59182-5-Part01-377.jpg

978-7-111-59182-5-Part01-378.jpg

解释上面的代码:

android:layout_weight="1"layout_weight值与其所处布局中所有控件layout_weight值之和的比值为该控件分配占用的区域。其值越大,权重就大。android:hint=""表示输入框。android:inputType="text-Password"也是表示输入框,只是输入的文字不能显示出来。

表单布局运行的结果如图7-30所示。

7.2.7 网格布局(Gridlayout)

网格布局就是将容器分割成多行多列,组件可以添加到每一个网格当中。在Android系统中,线性布局可以在XML中定义,也可以在.java代码中编写,常用的是在XML中定义。

978-7-111-59182-5-Part01-379.jpg

图7-30 表单布局结果图

下面是在.xml中定义的网格布局程序。

978-7-111-59182-5-Part01-380.jpg

978-7-111-59182-5-Part01-381.jpg

978-7-111-59182-5-Part01-382.jpg

978-7-111-59182-5-Part01-383.jpg

解释上面的代码:

这是网格布局,android:columnCount="4"和android:rowCount="4"形成4行4列的网格。每一个网格可以添加一个控件。

图7-31为运行结果。

978-7-111-59182-5-Part01-384.jpg

图7-31 网格布局结果图