Transcript 單元三Eclipse 開發介面

3.1 TextView 介面元件
 Android 的介面元件都是佈置在 <res/layout/main.xml>
的版面配置檔中，最主要的功能是顯示程式的版面。
TextView 可以說是最基礎的介面元件，它的功能是在
畫面上顯示訊息，但不允許輸入資料。
 3.1.1 新增範例專案
 請在 Eclipse 中選按功能表 File \ New \ Project \
Adroid Project 後進入 New Android Project 對話方
塊。
1.
2.
3.
輸入專案資訊，請在 Project name 欄位輸入「Example1」，再核選
Use default location，最後按 Next 鈕。
核選 Android SDK 版本為 Android 4.0，按 Next 鈕。
最後輸入專案名稱及最低版本：其中 Application name 及 Create
Activity 欄位值會自動產生。請在 Package name 欄位輸入
「Example1.com」，在Minimum SDK 欄位輸入「14」，按 Finish
鈕開始產生專案。
 3.1.2 TextView 的語法與常用屬性

TextView 的語法
 建構 TextView 介面元件的語法是 xml，它的標準語法如下：

TextView 常用屬性
 TextView 提供許多屬性來設定其特性。常用的屬性如下 :
 在 Graph ical Layout 編輯區新增 TextView
 新增介面元件的方法有兩種：第一種方法是在 Graphical
Layout 編輯區中使用介面元件區加入元件；第二種方法是
直接在 <main.xml> 的標籤頁中以 xml 的語法加入元件。

調整 Graphical Layout 編輯區
 在 < Example1> 專案開啟 <res/layout/main.xml>，選擇
Graphical Layout進入編輯區，請先調整一下編輯畫面。

由介面元件區拖曳元件
 由介面元件區選取 Form Widgets 的 TextView 元件，拖曳
至編輯區適當位置後放開即會產生一個 TextView 元件。

由 Properites 視窗設定屬性
 預設 Id 屬性為「@+id/textView1」，Text 的屬性為
「TextView」。
 修改屬性：Text 屬性為「Hello, Android」，Text size 屬
性為「24sp」，Text color 屬性為「#00FF00」( 綠色)，編
輯區的TextView 元件即以設定的文字、尺寸及顏色來顯
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content“
android:text="@string/string_1"
android:textColor="#FF0099"
android:textSize="20sp" />
 3.1.4 以 xml 語法新增 TextView
 您可以直接在 <main.xml> 的標籤頁中以 xml 的語法進
行新增。請接著剛才的操作，選按 <main.xml> 的標籤
頁顯示原始碼，我們準備在剛才新增的 textView1 元件
下方以 xml 語法新增一個名稱為「MyTextView」的
TextView 元件。並以下表格內容建立相關屬性設定：
<resources>
<string name="app_name">Ex1</string>
<string name="hello_world">這是我的第一個 Android 程式!</string>
<string name="string_1">歡迎來到 Android 程式世界!</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
</resources>
 儲存專案後，執行專案：
<string name="string_1">歡迎來到 Android 程式世界!</string>
3.2 EditText 介面元件
 EditText 介面元件的功能是提供使用者輸入資料，也可
以設定輸入資料的類型。
 3.2.1 EditText 的語法與常用屬性

EditText 的語法
 只要在 <res/layout/main.xml> 中輸入標準語法，即可以在程
式中加入 EditText 介面元件。EditText 介面元件的標準語法如
下：

也可以改用較省略的語法：

EditText 常用屬性
 3.2.2 新增 EditText 元件
 請依 3.1.1 的說明新增一個專案：「Example2」，接著
請開啟 <res/layout/main.xml> 版面配置檔，請選按
<main.xml> 標籤頁顯示原始碼。
 請刪除預設的 TextView 元件，接著要新增 8 個 EditText
元件，分別可供使用者輸入任何文字、數字、日期、時
間、電話、密碼、網址及電子郵件，請參考以下的原始
碼：
 儲存專案後，請按下 Ctrl + F11 執行專案，並試著在各
個 EditView 元件上輸入相關的資料：
3.3 Button 介面元件
 Button 介面元件的功能是提供按下按鈕，透過設定的監
聽事件，執行指定的動作。
 3.3.1 Button 的語法
 只要在 <res/layout/main.xml> 中輸入標準語法，即可以
在程式中加入 Button 介面元件。Button 介面元件的標
準語法如下：
 3.3.2 新增 Button 元件
 請依 3.1.1 的說明新增一個專案：「Example3」，接著
請開啟 <res/layout/main.xml> 版面配置檔，請選按
<main.xml> 標籤頁顯示原始碼。
 請刪除預設的 TextView 元件，接著新增一個 TextView
元件來顯示訊息，以及一個 Button 介面元件準備來設定
動作，請參考以下的原始碼：
 儲存專案後，請按下 Ctrl + F11 執行專案：
3.4 使用 Button 元件執行程式運作
 3.4.1 元件的身份證：資源類別檔

認識 android:id
 還記得在新增元件時，有一個 android：id 屬性，這個屬性即
是為元件設定一個特有的識別碼，這個識別碼不能與版面上其
他元件的識別碼重複，等於是身份證一般，未來即可以直接使
用這個識別碼在版面上找到所指定的元件。


資源類別檔：R.java
 android:id 屬性的設定格式為：「android:id=“@+id/ 元件名
稱 ”」，其中「元件名稱」即是元件識別碼。在 Android 中當
我們為元件設定識別碼之後，系統會自動在 <gen/[Package
name]/R.java> 檔案中進行註冊的動作。
在版面上找到元件的方法
 系統提供「findViewByID()」方法可由元件的 id 找到指定的元
件，這有點像是依據身分證字號查出姓名一樣。
findViewByID() 的語法如下：
 3.4.2 Button 元件觸發事件的程序
程式檔的位置
 程式執行的流程
 一般來說程式的執行流程大致如下：
在程式中藉由 id 編號取得需要使用的介面元件。
在該元件設定要偵聽動作以及觸發時要執行的方法名稱。
設定執行方法的程式內容。

1.
2.
3.
 3.4.3 加入 Button 執行程式碼

建立全域變數

利用 id 編號取得介面元件

為按鈕元件設定要偵聽動作以及觸發時要執行的方法名稱

加入觸發時要執行自訂方法

範例完整程式碼及作品預覽
 儲存專案後，請按下 Ctrl + F11 執行專案：
3.5 綜合演練：計算美國職棒大聯盟投手的球速
 台灣之光陳偉殷在美國職棒大聯盟表現值得賀釆，大聯
盟投手的球速很快，但因為是以英哩計算，總是無法像
公里計算上這麼親切。在這個範例中，將以這
TextView、EditText、Button 介面元件，完成英哩和公
里的轉換。
綜合演練：參考答案
 package com.example.miletokm;
 import android.os.Bundle;
 import android.app.Activity;
 import android.view.Menu;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.widget.Button;
 import android.widget.EditText;
 import android.widget.TextView;
 public class MainActivity extends Activity {
 private EditText edtMile;
 private TextView txtKm;
 private Button btnTran;














@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
edtMile = (EditText)findViewById(R.id.editText1);
txtKm = (TextView)findViewById(R.id.textView3);
btnTran = (Button)findViewById(R.id.button1);
btnTran.setOnClickListener(btnTranListener);
}
private Button.OnClickListener btnTranListener = new OnClickListener(){


//@override
public void onClick(View v) {



int miles=Integer.parseInt(edtMile.getText().toString());
double km = 1.61*(double)miles;
txtKm.setText(km+"公里");
}
};
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}










}
3.6 多按鈕共用事件
 3.6.1 建立共用的 listener 事件
 這裡所謂的 listener 就是在物件上加入偵聽動作觸發時
所執行的方法，我們可以分別為每一個按鈕建立個別的
listener 來偵聽按下的動作，並再各別定義執行的方法內
容。例如分別為 btnPrev 和 btnNext 定義不同的
listener ：
 如此一來就要分別再定義 btnPrevListener 及
btnNextListener 的執行內容。對於相同型別的按鈕元
件，是否可以將所有的執行整合在同一個 listener 當
中，只要判別按的是哪個按鈕，就進行 listener 裡不同
的動作即可？例如在原來的程式碼當中我們對於相同類
別的元件可以只建立一個名為 myListener 的 listener：
 接下來我們只要針對共同的 listener 設定程式內容即
可。但是問題來了，在這個共用的 listener 中我們如何
分辨是由哪個按鈕觸發的呢？以剛才的範例為例，我們
可以在 myListener 的 onClick() 方法中，透過 View 參
數 v 取得觸發物件的 id，再以此 id 來辨別不同的觸發
按鈕，並進行不同的處理，程式結構如下：
 3.6.2 範例：多按鈕共用事件
 利用按鈕可以撥打電話，按下 0、1、2 的按鈕，會在
TextView 元件上顯示電話號碼，所有的按鈕都共用一個
相同的 myListener 事件。