[Android步步为营]第3营 Acitivity与简单界面编程

接着上一讲留下的“需求”：

设计一个登陆界面：

允许用户输入用户名，密码；

用户点击“Login”之后，如果用户名为admin, 密码为123则显示“登陆成功”；

如果用户名密码其中之一不正确，红色字体显示“登陆失败！”

首先我们来建立一个新的项目：

图标那一步就随便选吧，下一步：

这一步与上次有点不同， 这次我们不要ADT 帮我们创建任何的Activity，我们只需要一个空的项目。

 

点击Finish后，我们会发现，项目文件视图下， 与上次的不一样，src, res/layout 是空的，这一会需要我们自己去添加了。

 

首先来明确一下我们现在的目标：

建立一个包含登录框的界面，并将它显示在我们的手机（模拟器）上。

建立一个界面的主要步骤是什么呢？主要有以下几步：

• 在res/layout下创建布局文件；
• 在src下创建Activity子类，并将布局文件与这个Activity联系起来。
• 在AndroidManifest.xml程序配置文件中，添加Activity的声明。

我们先来

1. 创建布局文件：

在Eclipse项目文件中选中layout 文件夹，在工具栏里点击下面图标

在弹出的窗口，填上这个xml布局文件的文件名，Root Element 根节点就选择Linearlayout即可

点击下一步，这一步是选择更多配置属性的，暂且不用理会，直接点击Finish。

我们发现，在res/layout 下面多了一个login.xml文件，同时Android 的Layout 编辑器也把它打开了。

切换到“source”代码视图，今天我们不用“所见即所得”的傻瓜拖拽方式。

我们看到xml代码是这样的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
</LinearLayout>

根节点是LinearLayout，即线性布局，所谓线性布局，有点像J2SE上的流式布局，就是其中的UI元素，会按水平或者垂直方向顺序地铺开。

LinearLayout有个xml属性：android:orientation，它有两个可选值：vertical和horizontal，指明该线性布局中的元素，是以垂直（vertical)还是水平(horizontal)方向排列。

下面是两种方式的示意图：

接下来，我们要添加两个输入框，让用户输入用户名，密码。

输入框使用的是EditText, 我们在LinearLayout中添加两个EditText

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/login_username"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:hint="Type name here...."
        android:text="" >
    </EditText>
    <EditText
        android:id="@+id/login_password"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:hint="Type password here...."
        android:inputType="textPassword"
        android:text="" >
    </EditText>
</LinearLayout>

对比每个节点属性，我们发现，不管是LinearLayout还是EditText，都会至少包含

android:layout_width

android:layout_height

上一讲我们有介绍这两个属性，这里再详细介绍一下，

不管是android:layout_width还是android:layout_height 都有四种可选填的值：

• wrap_content
• fill_parent
• match_parent
• 具体数值

前面三个参考上一讲。

具体数值可以填像素px，如300px, 也可以填dp. dp（也写作dip)是Android平台上特有的长度计量单位，它是与设备屏幕无关的单位，强烈建议我们在设计界面元素时，都使用dp，而非px! 原因这里不多拓展，以后会详细描述。

还有一个重要的属性是：android:id， 它是UI元素的唯一标识，格式为@+id/XXXXXXX

保存之后，我们会发现，在gen文件夹下面， ADT为我们自动生成了代码R.java：

他们都是静态且final 的类或者成员。它的作用是，为资源建立索引，以便代码中或者layout中方便的引用。

public final class R {
    public static final class attr {
    }
    public static final class drawable {
        public static final int ic_launcher=0x7f020000;
    }
    public static final class id {
        public static final int login_password=0x7f060001;
        public static final int login_username=0x7f060000;
    }
    public static final class layout {
        public static final int login=0x7f030000;
    }
    public static final class string {
        public static final int app_name=0x7f040000;
    }
    public static final class style {
        public static final int AppTheme=0x7f050000;
    }
}

接下来我们再添加一个用于提交的按钮，以及用于显示结果的文本：

<Button 
        android:id="@+id/login_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登录"/>
    <TextView 
        android:id="@+id/login_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="用于显示登录的结果"/>

android:hint是用于提示文本，当android:text有值是，会被替换。

切换回“所见即所得”的图形编辑视图预览一下：

布局文件创建完成，我们进行第二步：

2. 编写代码

在src右键New->Class->

需要注意的是，该LoginActivity类必须继承自Activity类

public class LoginActivity extends Activity {

    
    
    /**
     * 必须重载父类的onCreate
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.login);//将布局文件与代码关联起来
        
        //获取布局文件中的UI元素对象
        final EditText mUserName = (EditText) this.findViewById(R.id.login_username);
        final EditText mPassword = (EditText) this.findViewById(R.id.login_password);
        Button mSubmit = (Button)this.findViewById(R.id.login_submit);
        final TextView mResult = (TextView)this.findViewById(R.id.login_result);
        
        //设置按钮点击之后的事件处理
        mSubmit.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                String userName = mUserName.getText().toString();
                String password = mPassword.getText().toString();
                if("admin".equals(userName) && "123".equals(password)){
                    mResult.setText("恭喜您，登录成功！");
                }else{
                    mResult.setText("登录失败，用户名或密码不正确！");
                }
                
            }
        });
    }
}

注意以下几点：

• 必须重载onCreate()方法，而且必须首先调用一次父类的方法super.onCreate(savedInstanceState);
• setContentView()方法用于关联布局文件，应该在onCreate中先调用，后面才能获取到UI元素的对象。
• 因为要供OnClickListener匿名内部类调用，所以局部变量要声明为final.
• EditText.getText()方法返回的是Editable对象，而不是String,需要调用toString();

3. AndroidManifest.xml声明activity

所有的Activity定义好了之后，只有在AndroidManifest.xml中声明过，才会有效。

在application节点中添加：

<activity android:name="LoginActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
 </activity>

android:name对应的是代码中Activity的类名，因为前面有程序默认包声明“package="com.stanley.basiclogin"”，所以可以省略包名直接写类名，或者写错.类名。如果Activity类所在的包不是默认包，则需要添加包名作为前缀。所以这个例子中 LoginActivity 或者.LoginActivity都是正确的。

保存，编译完成之后，我们就可以开始运行代码了。

以下是运行结果：

 

我们再来回顾一下，建立新界面的步骤：

• 在res/layout下创建布局文件；
• 在src下创建Activity子类，并将布局文件与这个Activity联系起来。
• 在AndroidManifest.xml程序配置文件的application节点中，添加Activity的声明。如果需要程序运行就启动该Activity，要加main 的Inten Filter.

 

下一讲， 我们来探讨一下各种布局管理器。