Android 程式設計入門 - 學習正確的App專案開發技巧 Part 2－安卓亭 Android Station

這篇文章要示範如何從無到有建立一個具有完整功能的Android App專案，完成後的程式執行畫面如下圖。使用者輸入「性別」和「年齡」之後，按下「確定」按鈕，程式會顯示一個建議。在操作的過程中，我們會學到許多Eclipse使用技巧，善用它們可以大大提升開發程式的效率，而且可以避免打錯字的情況，現在就一起動手吧！

Step 1. 執行Eclipse，利用這篇文章Android 程式設計入門 - 學習正確的App專案開發技巧 Part 1介紹的方法新增一個Android App專案。

Step 2. Eclipse中央的編輯視窗會自動開啟介面佈局檔activity_main.xml（或者也可以在路徑res/layout中找到該檔，再用滑鼠快按二下將它開啟），將編輯視窗中的「介面佈局檔」切換到Graphical Layout模式，用滑鼠右鍵點選程式畫面上方的Hello World …字串（它是一個TextView型態的介面元件），然後在彈出的功能表中選擇Delete將它刪除。

Step 3. 在編輯視窗右邊有一個名為Outline的視窗，它會以樹狀結構顯示目前程式畫面中的物件。目前裡頭只剩下一個RelativeLayout元件，我們要把它改成LinearLayout。先用滑鼠右鍵點選它，然後在快顯功能表中選擇Change Layout，再從出現的對話盒中拉下裡頭的元件清單，點選其中的LinearLayout (Vertical)，最後按下OK按鈕。

「介面佈局檔」的架構

「介面佈局檔」是用樹狀結構的方式來組織程式畫面中的介面元件，它是一個XML格式的檔案，每一個標籤都是一個介面元件，像是<Button … />，標籤裡頭是介面元件的屬性設定。Android SDK提供非常豐富的介面元件，讓程式開發人員可以做出各種生動有趣的操作畫面，如果能夠進一步搭配相關的程式資源，像是Nine-Patch影像檔、State List、Shape、Theme和Style，更可以打造出屬於自己風格的程式畫面。

Step 4. 接著要開始加入需要的介面元件，在編輯視窗左邊的介面元件群組中，找到Form Widgets類別裡頭一個名為TextView的介面元件（操作提示：把滑鼠游標移到介面元件上就會出現它的名稱），用滑鼠左鍵點選它並拖曳到程式畫面中再放開。

Step 5. 接下來是設定這個新加入的介面元件的屬性，我們希望上面顯示「性別：」，先用滑鼠右鍵點選它，然後選擇Edit Text就會出現如下圖的對話盒。

Step 6. 我們必須先將「性別：」這個字串存成一個String型態的資源，然後再把它套用到TextView元件（這是為了能夠讓程式支援多國語言版本的考量）。按下對話盒中央偏下方的New String按鈕就會出現如下圖的畫面。

Step 7. 在對話盒最上面的欄位輸入字串內容，也就是「性別：」這個字串，然後在第二個欄位輸入字串名稱，例如sex（操作提示：一般字串名稱是用小寫英文字母和底線字元來命名），最後按下OK按鈕回到原來的對話盒。

Step 8. 在原來對話盒中央的清單會出現一個剛剛建立的新字串，用滑鼠左鍵對它快按二下，就會套用到目前的TextView元件。

Step 9. 如果要修改字串的大小，可以再設定TextSize屬性。用滑鼠右鍵點選TextView元件，然後選擇Edit TextSize就會一個對話盒，字串大小是以sp為單位，例如我們可以輸入25sp。

設定介面元件屬性的操作技巧

介面元件的屬性有數十個，用滑鼠右鍵點選介面元件之後，最常用的幾個會出現在快顯功能表的上方（常用的屬性會隨著介面元件的種類而改變）。如果要列出所有的元件屬性，可以選擇快顯功能表中的Other Properties > All By Name便會列出所有的屬性清單，它會依照字母順序排列。

Step 10. 接下來我們需要再加入一個EditText型態的介面元件，它可以讓使用者輸入資料。請點選介面元件群組中的Text Fields類別，它提供不同字元型態的輸入欄位，像是所有字元、密碼、電子郵件…，我們需要的是所有字元型態的EditText，它是最上面的第一個，用滑鼠左鍵點選它，然後拖曳到程式畫面中完成加入的動作。

Step 11. 這個EditText元件是讓使用者輸入性別，因此在程式碼中必須能夠讀取其中的字串，所以我們要設定它的id屬性讓程式能夠找到它。使用類似前面介紹的操作技巧，先用滑鼠右鍵點選這個EditText元件，再從設定屬性的快顯功能表中，叫出Edit ID對話盒，然後輸入edtSex。利用同樣的操作方式，叫出Edit Hint對話盒，再依照步驟5到8的方式，新增一個名為edt_sex_hint的字串，字串內容為「(輸入性別)」，並將它套用到這個EditText元件的hint屬性。

補充說明

在Outline視窗中，也可以設定介面元件的id和屬性，我們同樣可以用滑鼠右鍵點選其中的元件再進行屬性的設定。

Step 12. 重複步驟4到11新增一個用來輸入年齡的欄位名稱（使用TextView元件）和實際輸入資料用的EditText元件，我們將此EditText取名為edtAge。由於這個年齡欄位只能夠接受數字型態的資料，我們可以使用Text Fields元件群組中，只能接受數字字元的EditText元件。另外除了利用TextSize屬性改變字體大小以外，還可以設定其它屬性像是文字的顏色、對齊方式…等。

Step 13. 接著還要加入一個按鈕，從Form Widgets元件群組中找到Button元件，再用滑鼠把它拖曳到程式畫面中。我們要把按鈕的id取名為btnOK，再把上面的文字改成「確定」，讀者可以仿照前面的操作方式完成設定。如果要讓按鈕水平置中，可以從設定屬性的快顯功能表中選擇Layout Gravity屬性，再將它設定為center_horizontal。

Step 14. 最後還要加入一個TextView元件，它用來顯示程式對於性別和年齡的判斷結果。我們同樣用滑鼠拖曳的方式加入這個新的TextView元件，然後叫出Edit Text對話盒。由於一開始我們不希望它顯示任何文字，因此我們在Edit Text對話盒中直接按下Clear按鈕，清除原來顯示的字串。

Step 15. 最後我們要設定這個TextView元件的id，讓程式可以找到它並顯示結果。設定id的方式如同前面的操作技巧，我們可以將此TextView元件取名為txtR。

Step 16. 開啟程式檔「src/(套件路徑名稱)/MainActivity.java」，在程式中建立一個如下的View.OnClickListener物件：

private View.OnClickListener btnOKOnClick = new View.OnClickListener() {

      @Override
      public void onClick(View v) {
          // TODO Auto-generated method stub
          String strSex = mEdtSex.getText().toString();
          int iAge = Integer.parseInt(mEdtAge.getText().toString());

          String strSug = getString(R.string.result);
          if (strSex.equals(getString(R.string.sex_male)))
              if (iAge < 28)
                  strSug += getString(R.string.sug_not_hurry);
              else if (iAge > 33)
                  strSug += getString(R.string.sug_get_married);
              else
                  strSug += getString(R.string.sug_find_couple);
          else
              if (iAge < 25)
                  strSug += getString(R.string.sug_not_hurry);
              else if (iAge > 30)
                  strSug += getString(R.string.sug_get_married);
              else
                strSug += getString(R.string.sug_find_couple);

          mTxtR.setText(strSug);
      }

};

Eclipse平台的程式碼編輯技巧

1. 在輸入程式碼的時候，每一次輸入「物件名稱.」之後稍停半秒鐘就會自動彈出一個方法清單，我們可以繼續輸入方法名稱的前幾個字母，清單中會自動過濾出符合的方法，如果點選清單中的某一個方法，還會出現另一個視窗說明該方法的功能。

2. 當輸入變數名稱、物件名稱或方法名稱時，輸入到一半同時按下鍵盤上的Alt和/按鍵，程式編輯器會立即提供適當的協助。善用這項輔助功能可以提高程式編寫的效率，也可以減少打錯字的機會。

3. 如果程式碼中出現紅色波浪底線表示有語法錯誤，把滑鼠游標移到該處就會彈出一個說明視窗和建議修正方式，有些錯誤可以利用這個方式進行快速修正。例如當在宣告EditText型態的物件時，在EditText型態下方會標示一個紅色波浪底線，這是因為我們必須先import相關套件（package）才能使用EditText。此時把滑鼠游標移到紅色波浪底線上，然後從彈出的視窗中點選Import ‘EditText’即可。

4. 程式碼中的黃色波浪底線是警告而不是錯誤，像是變數宣告後沒有使用。這些警告並不會影響程式執行的正確性，把滑鼠游標移到黃色波浪底線上同樣會彈出說明視窗。

Step 17. 為了在程式中使用前面步驟建立的「介面元件」，我們必須先在程式碼中建立對應到它們的「物件」，這些用來對應到「介面元件」的「物件」必須和它們所對應的「介面元件」具備相同的型態。然後程式再從介面佈局檔中取得edtSex、edtAge、btnOK和txtR四個介面元件。這個任務可以藉由呼叫findViewById()來達成，如以下範例：

public class MainActivity extends Activity {

private EditText mEdtSex, mEdtAge;
private Button mBtnOK;
private TextView mTxtR;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

      mEdtSex = (EditText) findViewById(R.id.edtSex);
      mEdtAge = (EditText) findViewById(R.id.edtAge);
      mBtnOK = (Button) findViewById(R.id.btnOK);
      mTxtR = (TextView) findViewById(R.id.txtR);

      mBtnOK.setOnClickListener(btnOKOnClick);

}

…(其它程式碼)

}

最後我們列出這個App專案的字串資源檔「res/values/strings.xml」：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">婚姻建議程式</string>
<string name="hello_world">Hello world!</string>
<string name="menu_settings">Settings</string>
<string name="sex">性別：</string>
<string name="age">年齡：</string>
<string name="btn_ok">確定</string>
<string name="result">建議：</string>
<string name="edt_sex_hint">(輸入性別)</string>
<string name="edt_age_hint">(輸入年齡)</string>
    <string name="sug_not_hurry">還不急。</string>
    <string name="sug_get_married">趕快結婚！</string>
    <string name="sug_find_couple">開始找對象。</string>
    <string name="sex_male">男</string>

</resources>