PSJay Blog

#FIXME, seriously

制作 Android 启动界面

| Comments

前几天在谷奥看到了这篇文章,便知道了 Google 的暑期大学生博客分享大赛 - 2011 Android 成长篇这个活动。看了一下非常感兴趣,所以当天就准备写一篇博文来参加这次比赛,题材就写定制经验。后来想了一想,作为一个准程序猿,特别是写 Java 代码的程序猿,怎么说也要写一篇开发经验吧。

于是说干就干,立马下载了Android SDK,啃了三天的 Android Development Guide,为以前做的一个 Web 小应用开发了 Android 版本(当然只实现了最基本的功能,相当于一个 demo )。

本来打算写一篇文章来整体介绍这个应用的开发过程的,不过其复杂程度其实已经超过了一篇中短篇博文的信息负载能力了。所以不如分开来写,第一篇就挑最开始的这个部分,也是相当简单的一个部分来写吧——制作一个启动界面( Splash screen )。

先上效果图吧。

校园时钟启动界面

上图就是启动界面了,停留一段时间后,自动进入主界面:

校园时钟主界面

好了,效果就是这么简单。下面具体来说怎样实现。

有用户界面,自然离不开 Activity。有Activity,自然离不开 Layout。我们使用一个 XML 文件来声明一个 RelativeLayout,这个 XML 文件除了能创建 Activity 的组件之外,还能对组件的样式进行定制(有点像 CSS 的赶脚)。我们把这个文件命名为 welcome.xml,其内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:weightSum="1"
    android:background="#FFFFFF">
        <ImageView android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:src="@drawable/logo"
            android:id="@+id/imageView1"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="64dp">
        </ImageView>
        <TextView android:text="@string/xnuol"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:textColor="#777777"
            android:id="@+id/textView1"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="34dp">
        </TextView>
        <TextView android:text="@string/ver"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_width="wrap_content"
            android:id="@+id/textView2"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="14dp">
        </TextView>
</RelativeLayout>

可以看到,XML 中声明了一个 RelativeLayout、一个 ImageView 和两个 TextView。其中 ImageView 就是用来展现 Logo 的组件, 两个 TextView 用来展示版权和版本信息。有了 Layout 的 XML,我们就可以创建一个 Activity 类了。我把这个类命名为 WelcomeActivity,当然,它必须继承 android.app.Activity,完整内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
package com.psjay.campus_clock;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
/**
 * 校园时钟欢迎界面
 * @author PSJay
 *
 */
public class WelcomeActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome);

        Thread thread = new Thread() {
            @Override
            public void run() {
                int waitingTime = 3000; // ms
                try {
                    while(waitingTime > 0) {
                            sleep(100);
                            waitingTime -= 100; // 100ms per time           
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                } finally {
                    finish();
                    Intent intent = new Intent(WelcomeActivity.this, MainActivity.class);
                    startActivity(intent);  // enter the main activity finally
                }
            }
        };

        thread.start();
    }
}

重点就是 onCreate() 这个方法中的那个匿名内部类线程了。waitingTime 变量表示需要等待的时间,单位是毫秒。循环中线程让自己休眠,最后结束 Activity ,创建一个 Intent 对象,调用 startActivity() 方法跳转到主界面,这样,就完整了启动界面的整个流程了,so easy。

本篇博文参加第二届 Google 暑期大学生博客分享大赛 - 2011 Android 成长篇。昨天在网上转悠的时候又发现 Google 正在举办第二届 Android 应用开发中国大学生挑战赛,等这个应用完善之后,我想也会拿去参加试试。

Comments