這篇文章要示範如何從無到有建立一個具有完整功能的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>

 

現在我們可以執行這個程式,並且看到它的執行畫面。

arrow
arrow
    全站熱搜

    androidstation 發表在 痞客邦 留言(4) 人氣()