设计Android的用户界面(一)

（在读本文之前，会缺省的认为你已经知道如何创建一个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文件的格式为：

 +
 (0 or 1 per layout file, assigned to any element)
 
 

这里面有一个比较重要的类叫ViewGroup，这个XML的root节点必须是一个ViewGroup，或者是一个单一的Widget(整个XML只有一个元素)。Android几乎所有的UI似乎都和ViewGroup有或多或少的关系。但是它只是一个abstract class，并不能直接使用，我们能用的，是它的一些子类，例如：

从上述这几个类从名字就可看的出来，他们是Layout，也就是布局，如果用过Swing的话，这些东西和Swing的那套东西一致，如果没有用过 Swing，希望你用过HTML，那么每一个Layout，可以理解为有了特定排版样式的DIV。在DIV的内部，可以放置其他的DIV，当然也可以放置最底层的元素，比如说文本、文本框、单选按钮、图片等等。这里面所说的最底层的元素，它们有一个超类叫做View，这个超类非常的超，连 ViewGroup都是它的子类。ViewGroup就是能容纳其他View的View。常用的View有很多，可以参考这里，后文再介绍。

关于XML布局，可以总结一下：

1. 这个XML文件是由许多View嵌套组成的
2. 如果布局中有多个元素，那么最顶层必须是ViewGroup(一个ViewGroup对象同时也是一个View对象)，不可以是View，如果整个布局只有一个元素，那么最顶层元素就是这个唯一的元素。
3. 在ViewGroup可以内部嵌套View(既然可以嵌套View，就更以嵌套ViewGroup了)
4. 在View中，不可嵌套其他东西了，要不然它就是ViewGroup了，就是这么定义的。

用一个结构图表示：

ViewGroup

上面提到的几个ViewGroup，稍微详细点介绍一下：

其实，说了这么一大堆，还是不如一个具体的实例看的痛快：

详细解释一下：

每一种元素可以定义属性有很多，并且这些属性都可以和HTML的css中的属性来类比，遇到的时候再叙或者是翻一下相关文档。

设计Android的用户界面(二)

通过上一篇文章，大概了解了Android用户界面的设计方式，以及如何通过XML来设计界面。并且完成了一个非常简单的示例。

在上一篇文章中，涉及到了一些资源文件，直观点说，就是res目录下的那些目录和文件，常用的有：

这些资源文件都是独立于代码而存在的，那么在代码中又是如何访问到这些资源的呢？

在 Android的代码中，有一个文件比较奇怪，第一次接触到Android代码的人都应该迷惑过，这个文件就是R.java，在R.java的注释部分， 有这样一段话：“AUTO-GENERATE FILE. DO NOT MODIFY”，这个文件是自动生成的，不要修改。

按照前面的示例，那么在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交互。

设计Android的用户界面(三)

通过上一篇文章，知道了如何创建一个应用程序来显示一个静态的View。然而，在大多数情况下仅仅显示是不够的，应该还需要与用户的交互行为。现在完成一个简单的和用户交互的示例。

这个小程序的需求是：

画面上有三行元素：

1. 第一行是一个TextView，用来显示文字
2. 第二行是一个EditText，用户将在此输入文字
3. 第三行是一个Button
4. 用户点击Button之后，会在第一行的TextView中显示：Hello,(用户在第二行中输入的文字)。
   比如说用户在输入框中输入：“Roiding.com”，那么点击Button之后，会在显示区域显示：“Hello, Roiding.com”。

要完成这个程序，大概需要用5步：

第1步，先完成UI的设计，在res/layout/目录下创建一个文件，名为：sayhello.xml：

如果已经看过前一篇文章的话，这个文件还是比较容易懂的，不需要太多的解释了，只解释一下这几个语句：

第2步，创建好这个布局文件之后，再把这个文件需要的android:text=”@string/sayhello”在res/values/strings.xml中声明一下：

say hello
 

第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());
 }
 });
 }
 }
 

这里面有些语句需要解释：

第5步，运行程序，欣赏这部作品吧，Done。Oh My God，真是太容易了！

[待续]