第五讲：用户界面 View（一）

小灰灰 2022-08-04 08:35 119阅读 0赞

一、什么是View

我们上节课说，Activity是Android程序的显示层，每一个显示窗口都是一个Activity；可是Activity本身无法显示在屏幕上，我们可以把它理解成是一个抽象层，一个壳子；就譬如一个JSP页面，它本身并没有显示出来任何东西，负责显示的是他生成的HTML标签。那么Android里谁才是真正显示出来的部分？－－是View和ViewGroup，而ViewGroup其实也是View的子类。

有了上述的概念，我们现在可以讲明白一个Activity中的显示元素是如何显示出来的了。首先UI组件是按层次结构来由外到内的方式逐步展示的。要将一个屏幕元素层次树绑定在一个屏幕上显示，Activity会调用它的setContentView()方法并且传入这个层次树的根节点引用。当Activity被激活并且获得焦点时，系统会通知activity并且请求根节点去计算并绘制树，根节点就会请求它的子节点去绘制它们自己。每个树上的ViewGroup节点会负责绘制它的子节点。ViewGroup会计算它的有效空间，布局所有的子显示对象，并最终调用所有的子显示对象的 Draw()方法来绘制显示对象。各个子显示对象可以向父对象请求它们在布局中的大小和位置，但最终决定各个子显示对象的大小和位置的是父对象。

Android程序借助View和ViewGroup对象来构建用户界面。Android提供了比HTML多得多的，现成的用户界面组件，譬如现在网站上常见的五角星评分效果组件RatingBar。RatingBar的显示效果如下图所示：

[![131645tbrgtbn6hhdwxnat.png][]][131645tbrgtbn6hhdwxnat.png 1]

二、常用Layout介绍

ViewGroup是个特殊的View，它继承于Android.view.View。它的功能就是装载和管理下一层的View对象或ViewGroup对象，也就说他是一个容纳其它元素的的容器。ViewGroup是布局管理器（layout）及view容器的基类。 ViewGroup中，还定义了一个嵌套类ViewGroup.LayoutParams。这个类定义了一个显示对象的位置、大小等属性，view通过LayoutParams中的这些属性值来告诉父级，它们将如何放置。

[![131713wcnnyn12h2c2ay50.png][]][131713wcnnyn12h2c2ay50.png 1]

ViewGroup是一个抽象类，所以真正充当容器的是他的子类们。我们在这里将介绍 帧布局FrameLayout，线性布局LinearLayout，绝对布局AbsoluteLayout，相对布局RelativeLayout，表格布局TableLayout等几个常用布局，大约要分3讲讲完。

1、帧布局 FrameLayout：

是最简单的一个布局对象。在他里面的的所有显示对象爱你过都将固定在屏幕的左上角，不能指定位置，但允许有多个显示对象，只是后一个会直接覆盖在前一个之上显示，会把前面的组件部分或全部挡住。下图的例子里，FrameLayout中放了3个ImageView组件，第一个是蓝色的，第二个是绿色的，第三个是树状图（透明的png格式）。ImageView就相当于Html中的img标签，接下来会讲到这个组件。

下面看一个FrameLayout的例子：

1.  <?xml version=”1.0″ encoding=”utf-8″?><FrameLayout android:id=”@+id/FrameLayout01″  
    
2.  android:layout\_width=”fill\_parent” android:layout\_height=”fill\_parent”  
    
3.  xmlns:android=”http://schemas.android.com/apk/res/android”><ImageView android:id=”@+id/ImageView01″ android:src=”@drawable/p1″  
    
4.  android:layout\_width=”wrap\_content” android:layout\_height=”wrap\_content”></ImageView><ImageView android:id=”@+id/ImageView02″ android:src=”@drawable/p2″  
    
5.  android:layout\_width=”wrap\_content” android:layout\_height=”wrap\_content”></ImageView><ImageView android:id=”@+id/ImageView03″ android:src=”@drawable/p3″  
    
6.  android:layout\_width=”wrap\_content” android:layout\_height=”wrap\_content”></ImageView></FrameLayout>

复制代码

完整的代码在PPT附带的目录中，需要的朋友可以留言向我索要。

[![1317309uzluk4zdzb6k1u6.png][]][1317309uzluk4zdzb6k1u6.png 1]  
(FrameLayout的显示效果)

2、线性布局 LinearLayout：

线性布局是所有布局中最常用的类之一，也是RadioGroup, TabWidget, TableLayout, TableRow, ZoomControls类的父类。LinearLayout可以让它的子元素垂直或水平的方式排成一行（不设置方向的时候默认按照垂直方向排列）。

下面看一个LinearLayout的例子：别被例子的长度吓住，仔细看一下其实就是一个LinearLayout中放5个TextView标签而已，TextView相当于Html标签中的Label。

1.  <?xml version=”1.0″ encoding=”utf-8″?>  
    
2.  <LinearLayout 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.  android:gravity=”center\_horizontal”  
    
7.  >  
    
8.  <TextView  
    
9.  android:layout\_width=”fill\_parent”  
    
10. android:layout\_height=”wrap\_content”  
    
11. android:text=”给小宝宝起个名字：”  
    
12. android:textSize=”20px”  
    
13. android:textColor=”\#0ff”  
    
14. android:background=”\#333″/>  
    
15. <TextView  
    
16. android:layout\_width=”wrap\_content”  
    
17. android:layout\_height=”wrap\_content”  
    
18. android:text=”遥遥是男孩的小名”  
    
19. android:textSize=”20px”  
    
20. android:textColor=”\#0f0″  
    
21. android:background=”\#eee”  
    
22. android:layout\_weight=”3″  
    
23. />  
    
24. <TextView  
    
25. android:layout\_width=”wrap\_content”  
    
26. android:layout\_height=”wrap\_content”  
    
27. android:text=”瑶瑶是女孩的小名”  
    
28. android:textColor=”\#00f”  
    
29. android:textSize=”20px”  
    
30. android:background=”\#ccc”  
    
31. android:layout\_weight=”1″  
    
32. /><TextView  
    
33. android:layout\_width=”fill\_parent”  
    
34. android:layout\_height=”wrap\_content”  
    
35. android:text=”海因是男孩的大名”  
    
36. android:textColor=”\#f33″  
    
37. android:textSize=”20px”  
    
38. android:background=”\#888″  
    
39. android:layout\_weight=”1″  
    
40. />  
    
41. <TextView  
    
42. android:layout\_width=”fill\_parent”  
    
43. android:layout\_height=”wrap\_content”  
    
44. android:text=”海音是女孩的大名”  
    
45. android:textColor=”\#ff3″  
    
46. android:textSize=”20px”  
    
47. android:background=”\#333″  
    
48. android:layout\_weight=”1″  
    
49. />  
    
50. </LinearLayout>

复制代码

下图是显示效果：

[![131612m5vpqbmxvqxbblee.png][]][131612m5vpqbmxvqxbblee.png 1]

[131645tbrgtbn6hhdwxnat.png]: http://www.apkbus.com/data/attachment/forum/201104/23/131645tbrgtbn6hhdwxnat.png
[131645tbrgtbn6hhdwxnat.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image28.png
[131713wcnnyn12h2c2ay50.png]: http://www.apkbus.com/data/attachment/forum/201104/23/131713wcnnyn12h2c2ay50.png
[131713wcnnyn12h2c2ay50.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image29.png
[1317309uzluk4zdzb6k1u6.png]: http://www.apkbus.com/data/attachment/forum/201104/23/1317309uzluk4zdzb6k1u6.png
[1317309uzluk4zdzb6k1u6.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image37.png
[131612m5vpqbmxvqxbblee.png]: http://www.apkbus.com/data/attachment/forum/201104/23/131612m5vpqbmxvqxbblee.png
[131612m5vpqbmxvqxbblee.png 1]: http://android.yaohuiji.com/wp-content/uploads/2010/07/image38.png