通過小項目學Android教程6

1      如何做UI

首先建立一個Android工程：

1）Application Name：SimpleNotePad

2）Minimum Required SDK：API 14（我不確定設定這個有沒有必要，這一點不打緊目前）

然後一直點下去，直到完成。

1.1      實現首頁Activity

我們先實現首頁Activity：這個Activity是由兩部分組成：

 

·        頂部：頂部是一個ActionBar（類似於網頁的設計，很多網頁頂部是logo和網站標題，Android app現在比較流行的式樣是頂部有一個ActionBar，顯示App的表徵圖、標題和可以提供的操作，例如：

其中

1）是Logo，

2）是App的標題，標題右側的小三角可以點，點擊就下拉出一些菜單；

3）是可以做的操作，

4）叫Action Overflow ，如果你提供了很多操作，但是在3）這個位置放不下，則可以放到4）裡面。

在我們便簽的APP的首頁Activity裡面，我們只在ActionBar裡面顯示Logo和標題，以及添加便簽表徵圖，具體代碼裡面如何添加這個Action表徵圖並響應點擊表徵圖事件，我們一會就介紹。

注意：ActionBar是Android 3.0引進的新功能，對應的SDK版本為11，所以一個Android App要用ActionBar，其Target SDK版本至少為11。

·        中底部：顯示所有便簽，我們這裡的做法是讓首頁的Activity繼承自系統提供的ListActivity，這樣我們只要把資料繫結到這個首頁Activity即可（下面有詳細介紹）。

1.1.1    ActionBar

通過建立工程嚮導，在CreateActivity這步，我們選中的BlankActivity已經帶有ActionBar了，不信，看對話方塊下面的小字！（因為我們選的SDK版本大於11）

嚮導建立Activity的Logo和標題都不符合我們的要求，我們需要修改它。

我們先修改預設的表徵圖，因為是便簽本App，為了更像那麼回事，我們要用一個合適的表徵圖，比如：

 

修改Logo的步驟：

1）開啟sdk內建的NotePad的例子路徑（我機器上是C:\ProgramFiles\Android\android-sdk\samples\android-17\NotePad\res\drawable ），

2）拷貝app_notes.png，

3）然後到我們的工程res/drawable（如果沒有drawable，建立一個），選中drawable，粘貼app_notes.png，這時這個檔案就在drawable目錄底下了。

4）然後開啟AndroidManifest.xml，修改<application>底下的android:icon為：

注意：在AndroidManifest.xml中的<application>標籤內的屬性icon/label分別定義了app的Logo和標題，同時在<activity>標籤內，我也可以定義icon和/或label標籤，如果<activity>內沒有定義，則Activity的Logo和標題用<application>內定義的，否則用自己的，例如：

這個例子裡，MainActivity的標題是@string/app_title，而Logo則是@drawable/app_notes。

我們希望這個App裡面所有的Activity都使用同一個Logo，所以我們只在<application>裡面定義icon，而每個activity都不定義；相反，對於Activity的標題，每個activity都不盡相同：對於首頁Activity，我們用“Notes”這個標題，方法是：

1） 在values/strings.xml裡面添加

<stringname="app_title">Notes</string>

2） 然後在AndroidManifes.xml中修改<activity>的屬性：

        <activity

           android:name="com.example.simplenotepad.MainActivity"

            android:label="@string/app_title">

            …

       </activity>

Logo和標題調整好了，我們需要在ActionBar裡面添加“添加新標籤”表徵圖：注意通過建立工程嚮導，我們的MainActivity.java裡面有這樣的代碼：

 @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }

而且在res/menu底下自動產生了main.xml這個檔案，在這個檔案裡面，我們可以定義要添加到ActionBar的功能表項目（亦稱Action），然後Activity啟動的時候，會調用到onCreateOptionsMenu，這個函數會把main.xml定義的action顯示在ActionBar裡面。

我們修改main.xml如下：

1）將其改名為main_menu.xml：選中main.xml，按下F2，輸入main_menu.xml（注意改名後onCreateOptionsMenu將做自動更新）。

2）更新main_menu.xml的內容為：

<menu xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:id="@+id/menu_add"          android:icon="@drawable/ic_menu_compose"          android:title="@string/menu_add"          android:alphabeticShortcut='a'          android:showAsAction="always" /></menu>

3）在res/values/strings.xml裡面添加：

<string name="menu_add">Newnote</string>

4）用類似修改logo的步驟，從sdk例子中拷貝ic_menu_compose.png到/res/drawable。

運行程式看看效果：

上面的main_menu.xml裡面定義了一個Action，即“添加新便簽”，其中的showAsAction屬性值得關注，這裡為always，即總是顯示這個Action；如果其為ifRoom，則在Action很多的時候，這個Action可能被隱藏在Action Overflow裡面。

響應Action的點擊：在MainActivity.java中添加如下代碼：

import android.widget.Toast;    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {        case R.id.menu_add:        Toast.makeText(this, "Menu add new note clicked.", Toast.LENGTH_LONG).show();        return true;                default:            return super.onOptionsItemSelected(item);        }    }

我們這裡用Toast（Android的一種顯示訊息的方法）來展示點擊的效果，後面我們將實現在點擊後啟動編輯便簽的Activity：

1.2      實現建立便簽Activity

首先選中SimpleNotePad工程，右擊選擇New =>Other…=>Android=>Android Activity（或者直接點擊Toolbar的第一個New表徵圖），點擊Next，選擇Blank Activity，點擊Next，修改這個新Activity的資訊如下：

 

點擊Next，你可以看到Eclipse將要執行的更新，點擊Finish完成Activity的建立。

注意Eclipse對於建立一個Activity執行的更新包括：

1）在AndroidManifest.xml中添加了新Activity的資訊，在一個App中的所有Activity都需要在AndroidManifest.xml中定義！

2）在res/values/strings.xml添加了新Activity標題和內容的字串。

3）在res/menu中建立了note_editor.xml，這裡包含新Activity的ActionBar資訊。

4）在res/layout中建立了activity_note_editor.xml，這是新Activity的UI定義。

開啟res/layout/activity_note_editor.xml，將其內容更新為：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".NoteEditorActivity" >    <TextView android:id="@+id/titleLabel"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/note_title"/>        <EditText        android:id="@+id/noteTitleEditText"        android:layout_width="match_parent"        android:layout_height="wrap_content"         android:layout_below="@id/titleLabel"/>            <TextView android:id="@+id/contentLabel"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/noteTitleEditText"         android:text="@string/note_content"       />         <EditText        android:id="@+id/noteContentEditText"        android:layout_width="match_parent"        android:layout_height="wrap_content"         android:layout_below="@id/contentLabel"/></RelativeLayout>

我們在這個建立便簽Activity中包含了兩個EditText控制項，讓使用者輸入便簽標題和內容。 

接著我們為建立便簽Activity設定ActionBar，在其中添加“儲存”和“取消”兩個Action：

1）更名res/menu/note_editor.xml為note_editor_menu.xml。

<menu xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:id="@+id/menu_save"          android:icon="@drawable/ic_menu_save"          android:alphabeticShortcut='s'          android:title="@string/menu_save"          android:showAsAction="ifRoom|withText" />    <item android:id="@+id/menu_delete"          android:icon="@drawable/ic_menu_delete"          android:title="@string/menu_delete"          android:showAsAction="ifRoom|withText" /></menu>

2）將ic_menu_save.png和ic_menu_delete.png從sdk sample中拷貝到res/drawable中。 

3）在res/values/strings.xml中添加

    <string name="menu_save">Save</string>    <string name="menu_delete">Delete</string>

1.3      從首頁Activity啟動建立便簽Activity

從一個Activity跳轉到另外一個Activity需要用到Intent：開啟MainActivity.java，更新onOptionsItemSelected為：

import android.content.Intent;    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {        case R.id.menu_add:        Intent intent = new Intent(this, NoteEditorActivity.class);        startActivity(intent);        return true;                default:            return super.onOptionsItemSelected(item);        }    }

關於Intent：Intent是一種訊息，主要用來從一個Activity啟動另外一個Activity，包括：

1）啟動本App中的另外一個Activity，或者

2）啟動Android系統中的其他App中的某個Activity，例如啟動網路攝影機

在這裡我們使用：

            Intentintent = new Intent(this, NoteEditorActivity.class);            startActivity(intent);

首先構造了一個Intent，建構函式包含一個Context對象（this為一個Activity，Activity本身就繼承自Content），另外一個是要啟動的Activity的資訊。

運行App，點擊首頁的“添加便簽”Action，彈出建立便簽Activity：

到目前為止，我們完成了兩個Activity，並且實現了ActionBar以及從首頁Activity到建立便簽Activity的跳轉，我們只涉及了UI，沒有涉及到便簽資料的處理，接下來，我們開始講解資料存放區和讀取的部分。

思路是從 建立便簽Activity開始，我們在裡面編輯便簽內容後，點擊“儲存”Action，資料應該儲存到資料庫，然後返回到首頁Activity，首頁Activity此時應該顯示新便簽資訊，這條路走通後，我們心裡就有底了。

接下來我們來講解如何向SQLite資料庫存取便簽資料。