Transcript 單元09

單元9 完成第一個 App專案
1
App的執行畫面
我們要利用這三種介面元件，完成如圖9-1的操作畫面，我
們必須在主程式的介面佈局檔中建立3個TextView元件、2個
EditText元件和1個Button元件
2
TextView介面元件
TextView介面元件的功能是顯示訊息，使用者無法編輯其中
的文字，我們可以依照如下的語法格式在介面佈局檔中加入
TextView元件
<TextView android:id="@+id/自訂元件名稱"
android:屬性="屬性值"
․․․
/>
這是xml的語法，TextView是標籤名稱，後面則是它的屬性。
第一個屬性android:id是設定這個TextView元件的名稱，它的
值「@+id /自訂元件名稱」其中的「@+id /」是一個指令，
指示要將後面的元件名稱加入程式資源R中的id類別
3
TextView介面元件
<TextView android:id="@+id/txtResult"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="程式執行結果"
/>
增加一個名為txtResult的TextView元件，它的寬度是填滿它
所在的外框。它的高度則由文字的高度來決定，元件中會顯
示「程式執行結果」這個字串。
4
程式設計技巧
在決定介面元件的id名稱時，為了在程式碼中
能夠清楚的知道該介面元件的種類，我們可
以在元件名稱的前面加上小寫的元件型態的
縮寫，例如我們把上述TextView元件取名為
txtResult，前面的3個小寫英文字母txt表示這
是一個TextView介面元件。
5
EditText介面元件
EditText元件可以讓使用者在上面編輯文字，再讓程式讀取
該字串，我們可以依照如下的語法格式在介面佈局檔中加入
EditText元件
<EditText android:id="@+id/自訂元件名稱"
android:屬性="屬性值"
․․․
/>
和前面的TextView元件的語法比較，二者除了標籤名稱不同
以外其餘的格式都一樣
6
EditText介面元件
<EditText android:id="@+id/edtSex"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:text=""
/>
上面的範例中新出現了一個android:inputType屬性，它是用
來限制這個元件中可以輸入的字元類型，text表示任何字元
都可以接受，如果設定成number則只能輸入0~9的數字字元。
7
Button介面元件
Button元件是讓使用者按下以啟動程式的某一項功能，我們
可以依照如下的語法格式在介面佈局檔中加入EditText元件
<Button android:id="@+id/自訂元件名稱"
android:屬性="屬性值"
․․․
/>
8
Button介面元件
<Button android:id="@+id/btnDoSug"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="執行"
/>
會在手機螢幕上建立一個按鈕，按鈕上面顯示「執行」。
9
介面佈局檔範例
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height=“match_parent” >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sex"
android:textSize="25sp" />
<EditText
android:id="@+id/edtSex"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/edt_sex_hint" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/age"
android:textSize="25sp" />
<EditText
android:id="@+id/edtAge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
android:hint="@string/edt_age_hint" />
<Button
android:id="@+id/btnOK"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/btn_ok"
android:textSize="25sp" />
<TextView
android:id="@+id/txtR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp" />
</LinearLayout>
10
Eclipse和Android Studio開發工具的操作方式
1.
使用Eclipse開發 App請參考9-5的說明。
2.
使用Android Studio開發 App請參考9-6的說明。
11
連結介面元件和程式碼
介面元件和程式碼之間必須能夠互動以完成下列3件事：
1.從edtSex和edtAge元件中取得使用者輸入的性別和年齡；
2.當使用者按下「確定」按鈕時，開始執行判斷的程式碼；
3.把判斷的結果顯示在txtR元件中。
12
連結介面元件和程式碼
我們將建立在介面佈局檔中的標籤像是<TextView>、
<EditText>、<Button>和<LinearLayout>稱為「介
面元件」，為了在程式中使用這些「介面元件」，
我們必須在程式碼中建立對應到它們的「物件」，
這些用來對應到「介面元件」的「物件」必須和它
們所對應的「介面元件」具備相同的型態。
EditText mEdtSex, mEdtAge;
TextView mTxtR;
Button mBtnOK;
mEdtSex = (EditText) findViewById(R.id.edtSex);
mEdtAge = (EditText) findViewById(R.id.edtAge);
mTxtR = (TextView) findViewById(R.id.txtR);
mBtnOK = (Button) findViewById(R.id.btnOK);
13
設定Button元件的click事件listener
Android這種圖形介面的程式架構就是利用各式各樣的事件
處理程序來執行使用者的操作，而事件處理程序在Android
程式中就稱為事件listener。要設定Button元件的事件listener
需要完成下列3個步驟：
Step 1. 建立一個Button的OnClickListener物件
View.OnClickListener btnOKOnClick = new
View.OnClickListener() {
public void onClick(View v) {
// 按下按鈕後要執行的程式碼
…
}
}
14
設定Button元件的click事件listener
Step 2.把以上建立的OnClickListener物件設定給Button物件，
這樣按下該按鈕後就會執行其中的程式碼。
mBtnOK.setOnClickListener(btnOKOnClick);
15
程式檔的架構
public class MainActovotu extends Activity {
private Button mBtnOK;
private EditText mEdtSex, mEdtAge;
private TextView mTxtR;
mTxtR =
(TextView)findViewById(R.id.txtR);
// 設定button元件的事件listener
mBtnOK.setOnClickListener(
btnOKOnClick);
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 從資源類別R中取得介面元件
mBtnOK =
(Button)findViewById(R.id.btnOK);
mEdtSex =
(EditText)findViewById(R.id.edtSex);
mEdtAge =
(EditText)findViewById(R.id.edtAge);
}
private View.OnClickListener
btnOKOnClick = new
View.OnClickListener() {
public void onClick(View v) {
// 按下按鈕後要執行的程式碼
…
}
};
}
16
取得edtSex和edtAge介面元件中的字串
可以利用EditText物件本身提供的getText()方法來取得字串，
然後把字串資料轉成String型態存入一個String物件中。我們
也可以利用同樣的方法取得edtAge中的字串，不過因為年齡
應該是數值型態，所以我們再將得到的String物件轉成int型
態的資料
String strSex = mEdtSex.getText().toString();
int iAge = Integer.parseInt(mEdtAge.getText().toString());
17
將結果顯示在txtResult介面元件
將程式要顯示的訊息存入一個String物件，再把該物件利用
mTxtR物件的setText()方法設定給它即可。
String strSug = “程式的執行結果”;
mTxtR.setText(strSug);
18
完整的Button元件的OnClickListener程式碼
private View.OnClickListener btnOKOnClick
= new View.OnClickListener () {
public void onClick(View v) {
// 按下按鈕後要執行的程式碼
String strSex =
mEdtSex.getText().toString();
int iAge =
Integer.parseInt(mEdtAge.getText().toString());
else
if (iAge < 25)
strSug += "不急";
else if (iAge > 30)
strSug += "趕快結婚";
else
strSug += "開始找對象";
mTxtR.setText(strSug);
String strSug = "結果：";
if (strSex.equals("男"))
if (iAge < 28)
strSug += "不急";
else if (iAge > 33)
strSug += "趕快結婚";
else
strSug += "開始找對象";
}
};
19
在模擬器中輸入中文
如果是在Android 2.X的手機模擬器上操作，用滑鼠點選任何
一個EditText元件準備輸入資料時，螢幕下方就會自動出現
一個虛擬鍵盤。
20
在模擬器中輸入中文
如果是Android 4.X的手機模擬器，當用滑鼠點選任何一個
EditText元件準備輸入資料時，螢幕左下方會出現一個鍵盤
圖示，我們可以用滑鼠點選它按住不放再往下拉就會出現如
下圖的畫面，點選Select input method便可進入輸入法選單。
21
在模擬器中輸入中文
如果是Android 3.X/4.X
的平板電腦模擬器，用
滑鼠點選任何一個
EditText元件準備輸入資
料時，螢幕右下方會出
現一個鍵盤圖示，當我
們用滑鼠點選它時就會
彈出輸入法選擇視窗，
我們可以點選「谷歌拼
音輸入法」來輸入中文，
並且把最上面的Use
physical keyboard項目
右邊的ON按下（變成只
看到OFF）。
22
手機輸入中文的方法
點選該鍵盤左下方的「中文（英文）」按鈕切換中英文輸入
模式，或是利用該按鈕右邊的「符號數字」按鈕切換到符號
數字鍵盤。Android手機的中文輸入是使用「谷歌拼音」，
也就是所謂的「漢語拼音」，它是利用26個英文字母代替注
音符號，詳細的對照表可以到下列網址查詢。
http://www.cccla-us.org/pinyin.htm
23