Android用户界面详解
扫描二维码
随时随地手机看文章
这个章节描述怎么实现一个基本的Android界面。它涉及构建屏幕基本元素,怎么在xml(定义文件)内定义屏幕、用你的代码生成、在不同任务你需要操作你的用户接口。Android生成屏幕有三种方式:xml配置生成;通过你自己用户界面接口生成;直接用代码生成。根据MVC原则,UI应该与程序逻辑相分离,因此,在XML中定义UI结构是高度推荐的。此外,一个程序从一个屏幕方案调整到另一个也容易得多。在XML中定义UI跟创建一个普通的HTML文档非常相似,例如,你有如下的一个文件:
The content of the body element.
就如Android的XML布局一样,所有的元素都是结构化的,能够通过树形结构来表示:
xmlns:android=http://schemas.android.com/apk/res/android
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"/>
3.2.1屏幕元素的层次
Android应用程序的基础功能单元就是Activity--android.app.Activity类中的一个对象。一个Activity可以做很多事,但是他自己并不会显示到屏幕上。想要让你的Activity显示在屏幕上并且设计它的UI,你需要使用view和viewgroup--Android平台基础的用户界面表达单元。
Views
一个view是一个android.view.View基础类的对象。它是一个存储有屏幕上特定的一个矩形内布局和内容属性的数据结构。一个View对象处理测距和布局,绘图,焦点变换,滚动条,还有屏幕区域自己表现的按键和手势。
View类作为一个基类,为widget(窗体部件)服务,widget--是一组用于绘制交互屏幕元素的完全实现子类。Widget处理它们自己的测距和绘图,所以你可以更快速地用它们去构建你的UI。可用到的widget包括Text,EditText,InputMethod,Button,RadioButton,Checkbox,和ScrollView……。
Viewgroups
一个ViewGroup是一个android.view.Viewgroup类的对象。正如同它的名字表明的一样,一个viewgroup是一个特殊的view对象,它的功能是去装载和管理一组下层的view和其他viewgroup,Viewgroup让你可以为你的UI增加结构并且将复杂的屏幕元素构建成一个独立的实体。
Viewgroup类作为一个基类为layout(布局)服务,layout--是一组提供屏幕界面通用类型的完全实现子类。layout让你可以为一组view构建一个结构。
一个树形结构的界面
在Android平台上,你用view树和viewgroup节点来定义一个Activity的UI,就如同下面图表一样。这个树可以如你需要那样简单或者复杂,并且你可以使用Android的预定义widget和layout或者你自定义的view类型来构建它。
一个view和viewgroup树的样例:
Picture 4 Android UI - Tree structure
要将屏幕绑定一个树以便于渲染,你的Activity调用它的setContentView()方法并且传递一个参数给根节点对象。一旦Android系统获得了根节点的参数,它就可以直接通过节点来无效化,测距和绘制树。当你的Activity被激活并且获得焦点时,系统会通知你的activity并且请求根节点去测距并绘制树,根节点就会请求它的子节点去绘制它们自己,同时,每个树上的viewgroup节点负责绘制它的直接子节点。
正如之前提到的,每个view group都有测量它的有效空间,布局它的子对象,并且调用每个子对象的Draw()方法去绘制它们自己。子对象可能会请求获得一个它们在父对象中的大小和位置,但是父对象对于每个子对象的大小和位置有最终的决定权。
LayoutParams:一个子对象如何指定它的位置和大小
每个viewgroup类都会使用一个继承于Viewgroup.LayoutParams的嵌套类。这个子类包含了一系列的属性类型,这些属性类型定义一个子对象位置和大小,与view group类相适应。
layoutparams的一个样例:
要注意的是,每个LayoutParams子类都有它自己赋值的语法。每个子元素必须定义适用于它们父对象的LayoutParams,尽管父对象可能会为子元素定义不同的LayoutParams。
所有的viewgroup都包括宽和高。很多还包括边界的定义(margin和border)。你可以非常精确地描述宽和高,尽管你并不想经常这么做。更多时候你希望你的view自行调整到适应内容大小,或者适应容器大小。
Android 界面元素与Swing界面元素的比较
Android 界面元素 |
Swing 界面元素 |
Activities |
Frame |
Views |
Components |
TextViews |
Labels |
EditTexts |
TextFields |
Buttons |
Buttons |
Android和Swing的监听者设置也几乎一样:
3.2.2 通用布局对象
下面为在你的应用中为最普遍的view groups。这里介绍每种类型的一些基本信息;更深入的细节,请看每章前面的链接参考页。
FrameLayout
FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域,之后你可以在其中填充一个单一对象 — 比如,一张你要发布的图片。所有的子元素将会固定在屏幕的左上角;你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充,把它们部份或全部挡住(除非后一个子元素是透明的)。
LinearLayout
LinearLayout以你为它设置的垂直或水平的属性值,来排列所有的子元素。所有的子元素都被堆放在其它元素之后,因此一个垂直列表的每一行只会有一个元素,而不管他们有多宽,而一个水平列表将会只有一个行高(高度为最高子元素的高度加上边框高度)。LinearLayout保持子元素之间的间隔以及互相对齐(相对一个元素的右对齐、中间对齐或者左对齐)。
LinearLayout还支持为单独的子元素指定weight。好处就是允许子元素可以填充屏幕上的剩余空间。这也避免了在一个大屏幕中,一串小对象挤成一堆的情况,而是允许他们放大填充空白。子元素指定一个weight值,剩余的空间就会按这些子元素指定的weight比例分配给这些子元素。默认的weight值为0。例如,如果有三个文本框,其中两个指定了weight值为1,那么,这两个文本框将等比例地放大,并填满剩余的空间,而第三个文本框不会放大。
下面的两个窗体采用LinearLayout,包含一组的元素:一个按钮,几个标签,几个文本框。两个窗体都为布局做了一番修饰。文本框的width被设置为FILL_PARENT;其它元素的width被设置为WRAP_CONTENT。默认的对齐方式为左对齐。左边的窗体没有设置weight(默认为0);右边的窗体的comments文本框weight被设置为1。如果Name文本框也被设置为1,那么Name和Comments这两个文本框将会有同样的高度。
在一个水平排列的LinearLayout中,各项按他们的文本基线进行排列(第一列第一行的元素,即最上或最左,被设定为参考基线)。因此,人们在一个窗体中检索元素时,就不需要七上八下地读元素的文本了。我们可以在layout的XML中设置android:baselineAligned="false",来关闭这个设置。[!--empirenews.page--]
TableLayout
TableLayout将子元素的位置分配到行或列中。android的一个TableLayout由许多的TableRow组成,每个TableRow都会定义一个row(事实上,你可以定义其它的子对象,这在下面会解释到)。TableLayout容器不会显示row、cloumns或cell的边框线。每个row拥有0个或多个的cell;每个cell拥有一个View对象。表格由列和行组成许多的单元格。表格允许单元格为空。单元格不能跨列,这与HTML中的不一样。下图显示了一个TableLayout,图中的虚线代表不可视的单元格边框。
列可以被隐藏,也可以被设置为伸展的从而填充可利用的屏幕空间,也可以被设置为强制列收缩直到表格匹配屏幕大小。对于更详细信息,可以查看这个类的参考文档。 AbsoluteLayout AbsoluteLayout可以让子元素指定准确的x/y坐标值,并显示在屏幕上。(0, 0)为左上角,当向下或向右移动时,坐标值将变大。AbsoluteLayout没有页边框,允许元素之间互相重叠(尽管不推荐)。我们通常不推荐使用AbsoluteLayout,除非你有正当理由要使用它,因为它使界面代码太过刚性,以至于在不同的设备上可能不能很好地工作。 RelativeLayout RelativeLayout[!--empirenews.page--]允许子元素指定他们相对于其它元素或父元素的位置(通过ID指定)。因此,你可以以右对齐,或上下,或置于屏幕中央的形式来排列两个元素。元素按顺序排列,因此如果第一个元素在屏幕的中央,那么相对于这个元素的其它元素将以屏幕中央的相对位置来排列。如果使用XML来指定这个layout,在你定义它之前,被关联的元素必须定义。 这是一个RelativeLayout例子,其中有可视的和不可视的元素。基础的屏幕layout对象是一个RelativeLayout对象。 这个视图显示了屏幕元素的类名称,下面是每个元素的属性列表。这些属性一部份是由元素直接提供,另一部份是由容器的LayoutParams成员(RelativeLayout的子类)提供。RelativeLayout参数有width,height,below,alignTop,toLeft,padding和marginLeft。注意,这些参数中的一部份,其值是相对于其它子元素而言的,所以才RelativeLayout。这些参数包括toLeft,alignTop和below,用来指定相对于其它元素的左,上和下的位置。 Summary of Important View Groups 重要View Group摘要 These objects all hold child UI elements. Some provide visible UI, and others only handle child layout. 这些对象拥有UI子元素。一些提供可视的UI,另一些只处理子元素的布局。
3.2.3数据绑定
有些View groups会有UI。这些对象通常是AdapterView类的子类.例如包括图库和列表视图, 它们具有两个共同的职责: · 填充布局数据 · 处理用户操作 填充布局数据通常通过把这个类绑定到一个Adapter来完成,Adapter从某个地方获取它的数据,或者是代码提供的一个列表,或者是来自设备数据库的查询结果。 // Get a Spinner and bind it to an ArrayAdapter that // references a String array. Spinner s1 = (Spinner) findViewById(R.id.spinner1); ArrayAdapter adapter = ArrayAdapter.createFromResource( this, R.array.colors, android.R.layout.simple_spinner_item); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); s1.setAdapter(adapter); // Load a Spinner and bind it to a data query. private static String[] PROJECTION = new String[] { People._ID, People.NAME }; Spinner s2 = (Spinner) findViewById(R.id.spinner2); Cursor cur = managedQuery(People.CONTENT_URI, PROJECTION, null, null); SimpleCursorAdapter adapter2 = new SimpleCursorAdapter(this, android.R.layout.simple_spinner_item, // Use a template // that displays a // text view cur, // Give the cursor to the list adatper new String[] {People.NAME}, // Map the NAME column in the // people database to... new int[] {android.R.id.text1}); // The "text1" view defined in // the XML template adapter2.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); s2.setAdapter(adapter2); 注意:使用CursorAdapter时,必须有People._ID, 否则将会发生异常。 处理用户操作 Android通过设置类的AdapterView.OnItemClickListener 成员到一个监听者并捕捉用户的操作事件,来处理用户的操作。 // Create a message handling object as an anonymous class. private OnItemClickListener mMessageClickedHandler = new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { // Display a messagebox. showAlert("You‘ve got an event", "Clicked me!", "ok", false); } }; // Now hook into our object and set its onItemClickListener member // to our class handler object. mHistoryView = (ListView)findViewById(R.id.accept_button); mHistoryView.setOnItemClickListener(mMessageClickedHandler); |