(在读本文之前,会缺省的认为你已经知道如何创建一个Android项目,并知道如何在模拟器中运行这个项目。并且,期望你已经有一点HTML或者其他GUI的开发经验。)
在我的理解中,对开发者来说,写J2SE的程序和J2ME的程序相比,最大的区别不是他们API或者是其他一些规则、限制等的不同,更多的是两者程序界面(或者说UI)方面的区别。
我们写任何一段程序,都是需要有UI的,因为我们的程序最终是给用户去用的,即使我们写了一个工具,没有任何显式IO,我们也还是需要暴露必要的方法来提供别人使用,在此情景下,这些方法似乎也可以看作是UI。
对J2SE来说,一般都不会需要GUI,因为我们很少去写SWING、SWT程序,即使Sun力推的JavaFX,好像涉及的也不多,而对于J2ME来说,最大的困难可以就是那些GUI的实现,以及如何将程序的功能绑定到那些界面上,从界面中接收用户的输入,或者是用合适、合理的方式向界面输出,无论是通过文本,或是曲线、图形。
同理,如果你有J2EE的经验,服务后台的代码往往是相对易读、易懂、系统并且内聚的,这些代码看起来是如此的和谐、整洁、干净。而如果涉及到界面,就会陡然复杂的多,即使各种各样的framework试图要解决View与Model、Control的协作问题,结果却让大家更加的迷惑于各种配置之间。总是有GUI的程序都会看起来有些凌乱和繁芜。
似乎有些跑题… 打住…:)。咳咳,同样,对于Android开发来说,用户界面的实现应该是比较重要的和复杂的一环。好消息是,到目前为止,“神仙”们也没有发现其他更好的用户界面实现方式,所以说如果有HTML设计经验,或者说有Swing,Flash等图形设计经验,那么理解Android的UI设计,会容易的多,甚至会有似曾相识的感觉。
Android的用户界面可以有两种实现方式:使用XML或者是使用Java代码。通过直接书写代码的方式来实现界面是比较恐怖的事情。举个例子来说,如果你有DHTML的经验,那么这两者的区别可以比喻为:用XML来实现用户界面就像直接写HTML代码,而用 Java代码来实现用户界面就像用Javascript创建DOM对象来拼接页面。所以,使用XML来布局界面应该是首选。
Android使用一个XML文件来定义用户界面。为了方便理解,你可以直接把它理解为一个HTML文件。事实上,它也确实比较像一个HTML文件。
这个XML文件的格式为:
<ViewGroupClass xmlns:android="http://schemas.android.com/apk/res/android" id="@+id/string_name" (attributes)> <widget or other nested ViewGroupClass>+ <requestFocus/>(0 or 1 per layout file, assigned to any element) </ViewGroupClass>
这里面有一个比较重要的类叫ViewGroup,这个XML的root节点必须是一个ViewGroup,或者是一个单一的Widget(整个XML只有一个元素)。Android几乎所有的UI似乎都和ViewGroup有或多或少的关系。但是它只是一个abstract class,并不能直接使用,我们能用的,是它的一些子类,例如:
- AbsoluteLayout
- FrameLayout
- LinearLayout
- RelativeLayout
- TableLayout
- … 其他还有很多,以后用到的时候再说,一次性把这些东西都弄明白既不客观也不现实。
从上述这几个类从名字就可看的出来,他们是Layout,也就是布局,如果用过Swing的话,这些东西和Swing的那套东西一致,如果没有用过 Swing,希望你用过HTML,那么每一个Layout,可以理解为有了特定排版样式的DIV。在DIV的内部,可以放置其他的DIV,当然也可以放置最底层的元素,比如说文本、文本框、单选按钮、图片等等。这里面所说的最底层的元素,它们有一个超类叫做View,这个超类非常的超,连 ViewGroup都是它的子类。ViewGroup就是能容纳其他View的View。常用的View有很多,可以参考这里,后文再介绍。
关于XML布局,可以总结一下:
- 这个XML文件是由许多View嵌套组成的
- 如果布局中有多个元素,那么最顶层必须是ViewGroup(一个ViewGroup对象同时也是一个View对象),不可以是View,如果整个布局只有一个元素,那么最顶层元素就是这个唯一的元素。
- 在ViewGroup可以内部嵌套View(既然可以嵌套View,就更以嵌套ViewGroup了)
- 在View中,不可嵌套其他东西了,要不然它就是ViewGroup了,就是这么定义的。
用一个结构图表示:
![ViewGroup ViewGroup](http://image26.360doc.com/DownloadImg/2011/04/0420/10642476_1.png)
ViewGroup
上面提到的几个ViewGroup,稍微详细点介绍一下:
- AbsoluteLayout,绝对定位的布局方式,在它内部嵌套的元素必须指定具体的位置。
- FrameLayout,帧布局方式,说帧不太容易理解,可以说成是层布局方式,也就是说,在它内部的元素,是一层一层的叠加在一起的。如果用过Photoshop,或者Flash,这里面的层的概念是和他们一致的。如果最上层的元素是不透明的,并且比下面的元素尺寸要大,那么将看不到下面的元素,只能看到顶层元素。这些层的顺序是:最新声明的放到最前面。可以这样理解,Android按文件的书写顺序来组织这个布局,先声明的放在第一层,再声明的放到第二层,…,最后声明的放在最顶层。
- LinearLayout,线性布局方式(真不知道这该怎么翻译,其实很多技术名词还是不翻译的好),这种布局比较常用,也比较简单,就是每个元素占一行,当然也可能声明为横向排放,也就是每个元素占一列。
- RelativeLayout,相对定位的布局方式,这个比较好玩,在元素的位置的时候,使用相对位置,可以相对其他元素,也可以相对这个布局,就像我说:我现在站在pawa和 tempest的中间;或者说,我站在队伍的中间。前者就是相对其他元素来定义位置,后者是相对整个布局来定义位置。(注:pawa和tempest是Android历史上很著名的两位人物,具体请参阅 Roiding.com)。
- TableLayout,表格的布局方式,我真的不忍心翻译Table这个词,翻译成表格,似乎少了一些神韵,这里面的Table和HTML中的Table非常像,就连写法都非常像。
其实,说了这么一大堆,还是不如一个具体的实例看的痛快:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>
详细解释一下:
- 首先,定义了一个LinearLayout,前面中说过,这个布局要么将子元素水平排列,要么将它们竖直排列。
- android:orientation=”vertical”
声明此布局中的子元素要竖直排列,这样如果在这个布局中有两个子元素的话,那么这两个将分别各占一行,如果将这个值设置为”horizontal”,就变成了水平排列,那么两个子元素将分别各占一列,但是在这个示例中,只声明了一个子元素,你可以再为它添加一个子元素来观察效果。 - android:layout_width=”fill_parent”
声明此布局的宽度为:填满parent,这里面的parent也不好翻译,意思就是,如果它是嵌套在其他ViewGroup之中,那么那个ViewGroup的宽度就是它的宽度,如果它是顶层的元素,那么就填满屏幕。 - android:layout_height=”fill_parent”
声明此布局的高度为:填满parent。
- android:orientation=”vertical”
- 然后,定义了一个TextView,一个TextView,就是一块区域,用来显示文本,用这个View定义的元素只能用来显示,是不可以编辑的,如果想要可编辑的文本块,那么应该使用它的子类EditText,这个等后面遇到再说。
- android:layout_width=”fill_parent”
同上。 - android:layout_height=”wrap_content”
wrap_content的意思是:够用即可,那如果说填满整个parent都不够用呢?那就只能显示那么多了,空间不够的只能被隐藏掉了,所以必要的时候得使用ScrollView,后面再说。 - android:text=”@string/hello”
用来定义这个文本框中显示的内容,你可以直接将字符串写在这里:android:text=”hello, Roind.com”,也可以像本例中的那样,将所有的字符串放到一个资源文件中,然后在这里直接引用那个资源文件中的定义。在这里就是使用资源文件中的hello变量,在Android的缺省设置中,这个资源文件是:res/values/strings.xml。在这里你可能会问为什么声明一下”@string/hello”就知道使用这个文件中定义的字符串呢,这个也留在后面详述,关于res目录下的东西还有很多,可以参考一下这里或者这里。
- android:layout_width=”fill_parent”
每一种元素可以定义属性有很多,并且这些属性都可以和HTML的css中的属性来类比,遇到的时候再叙或者是翻一下相关文档。
通过上一篇文章,大概了解了Android用户界面的设计方式,以及如何通过XML来设计界面。并且完成了一个非常简单的示例。
在上一篇文章中,涉及到了一些资源文件,直观点说,就是res目录下的那些目录和文件,常用的有:
- res/drawable/ 用来存放图片文件
- res/layout/ 用来存放布局定义文件
- res/values/ 用来存放一些变量、参数等文件
这些资源文件都是独立于代码而存在的,那么在代码中又是如何访问到这些资源的呢?
在 Android的代码中,有一个文件比较奇怪,第一次接触到Android代码的人都应该迷惑过,这个文件就是R.java,在R.java的注释部分, 有这样一段话:“AUTO-GENERATE FILE. DO NOT MODIFY”,这个文件是自动生成的,不要修改。
- 这个文件就是Java代码和独立于Java代码的资源文件之间的访问窗口,Java程序可以通过R.java来访问那些资源文件。
- 这个文件是在程序编译过程中由aapt(Android Asset Packaging Tool) 自动生成
- 这个文件中的属性都是public static final的,所以可以直接在Java代码中引用,每个属性都代表一个资源,看起来就像为每个资源都定义了一个ID,然后通过这个ID来访问资源
- 所有的资源文件都被编译进最后生成的二进制包中,这样能够带来很高的性能和效率
按照前面的示例,那么在R.java中会存在像这样一段代码:
public static final class layout {
public static final int main=0x7f030001;
}
这里面的main就是由res/layout/main.xml生成的。
接下来在看一下,如何在Java代码中使用这个R.java,创建一个文件Main.java :
package com.roiding.study;
import android.app.Activity;
import android.os.Bundle;
public class Main extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
注意这其中的R.layout.main,通过setContextView(),被Java程序调用。
这段代码中引入了另外一个非常重要的概念:Activity,到目前为止,已经介绍的另外两个比较重要的概念是ViewGroup和View。如果套用时髦的MVC来理解的话:ViewGroup和View属于View领域的东西,Activity可以理解为Control领域的东西,虽然可以这 么类比着来理解,但是Activity其实做了更多的事情,由它将View和一些数据、操作等结合在一起,完成一个相对完整的行为、活动。所以,任何 View要被显示,必须通过Activity来进行。这样每个Activity都会包含特定的行为,多个Activity互相合作,最终组成一个完整的 Android程序。
在示例的Activity中,有一个onCreate()方法,这个方法会在此Activity被创建的时刻调用。在方法内部,设置此Activity的视图为R.layout.main中定义的视图,也就是res/layout/main.xml中定义的视图 (视图、布局、GUI、UI在这里已经混合使用了,并且他们意义相同,后文统一用View表示)。
Activity所包含的内容很多,会用单独的一篇文章来详细介绍。
说到此处,我们应该知道如何创建一个View,并通过Activity将其显示在屏幕上。接下来事情,就是用户如何和这个Activity交互。
通过上一篇文章,知道了如何创建一个应用程序来显示一个静态的View。然而,在大多数情况下仅仅显示是不够的,应该还需要与用户的交互行为。现在完成一个简单的和用户交互的示例。
这个小程序的需求是:
画面上有三行元素:
- 第一行是一个TextView,用来显示文字
- 第二行是一个EditText,用户将在此输入文字
- 第三行是一个Button
- 用户点击Button之后,会在第一行的TextView中显示:Hello,(用户在第二行中输入的文字)。
比如说用户在输入框中输入:“Roiding.com”,那么点击Button之后,会在显示区域显示:“Hello, Roiding.com”。
要完成这个程序,大概需要用5步:
第1步,先完成UI的设计,在res/layout/目录下创建一个文件,名为:sayhello.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/textview_display" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="20px" android:textStyle="bold" /> <EditText android:id="@+id/edittext_name" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/button_sayhello" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/sayhello" /> </LinearLayout>
如果已经看过前一篇文章的话,这个文件还是比较容易懂的,不需要太多的解释了,只解释一下这几个语句:
- android:id=”@+id/textview_display”
这个是用来为当前的View声明一个ID,这样,在Java程序中就可以通过这个ID来找到这个元素,进而能够操作这个元素。 - android:textSize=”20px”
声明字体大小为20px,对于每种View,都会有一系列的可以设置的属性,具体的需要参考每个View的说明文档。
第2步,创建好这个布局文件之后,再把这个文件需要的android:text=”@string/sayhello”在res/values/strings.xml中声明一下:
<string name="sayhello">say hello</string>
第3步,现在,UI已经设计好了,那么创建一个Activity(命名为:SayHello.java)来显示这个UI:
package com.roiding.study;
import android.app.Activity;
import android.os.Bundle;
public class SayHello extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.sayhello);
}
}
在这一步完成的时候,就可以运行一下这个Activity,看看最终显示的效果是否和预期的一致,如果有差别,再调整一下。
第4步,为UI添加交互动作,添加完毕之后的SayHello.java:
package com.roiding.study;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class SayHello extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.sayhello);
Button btn = (Button) findViewById(R.id.button_sayhello);
btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
EditText edt = (EditText) findViewById(R.id.edittext_name);
TextView tv = (TextView) findViewById(R.id.textview_display);
tv.setText("Hello," + edt.getText());
}
});
}
}
这里面有些语句需要解释:
- Button btn = (Button) findViewById(R.id.button_sayhello)
这个语句中的findViewById()s是一个比较简单、重要、常用并且是一直用的语句,他的功能就是在当前的ContentView中按ID来找到 对应的View。例如这里,通过R.id.button_sayhello,就能找到第1步提到的Button了。这个用法和javascript中 的:document.getElementById()有异曲同工之妙。
那这里面的R.id.button_sayhello又是怎么出来的呢?前文中 说过,在Build的时候,aapt会自动生成R.java,对资源文件中的 android:id=”@+id/textview_display”,就会在R.java中向对应的生成一个ID。 - btn.setOnClickListener(new View.OnClickListener())
现在的GUI程序,好像都喜欢事件驱动的模型,有人这样描述过GUI系统本质: 在事件驱动下动态地展现数据模型的图形系统。在这个语句中,setOnClickListener就是为btn添加一个事件监听,监听OnClick事件,也就是说,如果一旦触发btn的OnClick事件,就会执行后面定义的功能。
第5步,运行程序,欣赏这部作品吧,Done。Oh My God,真是太容易了!
[待续]