Android UI 元件整理 (一)

首先來強調一下本文的重點在於 UI 功能上實做練習的整理，所以較無理論陳述方面的內容，可以算是整理出來方便未來的查詢用。

在 Android 的應用程式中，使用者介面是由 View 以及 ViewGroup 兩類物件所構成，View類的物件是屬於基本的原件，像是按鈕、下拉式清單等，而 Viewgroup 是屬於佈局類型，預設提供了許多不一樣的畫面佈局，像是 linear 或是 tabular and relative 等。下圖為 View 和 ViewGroup 的簡易結構。



一般來說 UI 的設計除了版面的編排之外，就是元件的事件監聽以及功能編寫；使用 Eclipse 開發的其中一個好處，就是 Google 已經提供了一個非常方便的版面編輯器，開發者可以利用原件拖拉的方式進行版面排版，也可以直接填寫需要的參數，比起直接編寫 XML 檔案方便太多了。所以接下來的內容，除非必要，不然不會詳述如何編寫 UI 的描述檔，而重點將放於編寫 UI 的功能。

TextView、Button

TextView 和 Button 是元件裡面最常用到的，我們來設計一個簡單的小功能當作練習 : 按下 Button 後在 TextView 處顯示一行文字 "按下了按鈕"。

當我們使用 Eclipse 新增專案，預設會產生出一個 HelloWorld 的程式，而這程式裡就已經包含了最基本的 TextView 元件用來顯示 HelloWorld 字串，這邊我們直接使用這個 TextView 原件，另外再拖一個 Button 至畫面上，這時我們完成了版面配置。當拉元件至面板時，元件會自動的產生一個 id 值，用圖是創建物件時尋找資源用，而 id 值預設為"元件名稱 + 序號"，例如:button1。


版面元件排版整理完後，接下來就是功能上的編寫；因為我們的功能需要知道何時按下按鈕，所以必須在按鈕的地方設置一個監聽按鈕按下的監聽器，用來得知何時按下按鈕，透過按下按鈕的這個通知，我們得以接下去執行顯示 "按下了按鈕" 的功能。

原始碼:

package nchu.testButton; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; public class testButton extends Activity { /** Called when the activity is first created. */ TextView m_textview; Button m_button; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); m_textview = (TextView)this.findViewById(R.id.text); m_button = (Button)findViewById(R.id.button1); m_button.setOnClickListener(new Button.OnClickListener(){ public void onClick(View v) { String str = "按了Button"; m_textview.setText(str); } }); } }

使用元件前，我們必須先建立元件的物件，而物件資源是利用 findViewById() 函式從 R.java 中尋找，以下為建立 TextView物件 和 Button物件與取得資源的程式碼。

TextView m_textview; Button m_button; m_textview = (TextView)this.findViewById(R.id.text); m_button = (Button)findViewById(R.id.button1);

建立與取得物件資源後，接下來就是監聽 Button 按下的動作，為了之後顯示 "按下了Button" 文字，除了監聽之外我們必須改寫 onClick()，讓程式知道按下 button 後要做什麼。程式碼裡可以看到我們利用 m_textview 的 setText 功能，將字串設定給 m_textview，所以當我們按下 button 後 m_textview 就被設定了一個字串，而這字串就直接顯示在螢幕上，達到我們所需的功能。

>

m_button.setOnClickListener(new Button.OnClickListener(){ public void onClick(View v) { String str = "按了Button"; m_textview.setText(str); } });

Toast

這個提示元件，是由 Android 所提供的類別，並不需要在版面上配置，所以我們直接在主程式中直接使用，跟上面一樣，寫一個小程式當練習，功能的部分跟 TextView 一樣，只是將文字內容的顯示，由 TextView 改為 Toast。
原始碼:

package nchu.testButton; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.Toast; public class testButton extends Activity { /** Called when the activity is first created. */ Button m_button; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); m_button = (Button)findViewById(R.id.button1); m_button.setOnClickListener(new Button.OnClickListener(){ public void onClick(View v) { Display("這是按鈕測試"); } }); } public void Display(String str){ Toast.makeText(this, str, Toast.LENGTH_SHORT).show(); } }

要使用 Toast 顯示提示文字，我們可以另外寫一個 Display 的功能，接受字串的傳入。Toast 可以利用 makeText(content,text,duration) 來製成一串標準的文字，再利用 show()將其顯示；而 makeText的參數 content 一般為目前的 Activity 或是 Application，還有 duration 則是要顯示的長度，一般有 LENGTH_SHORT 或 LENGTH_LONG 兩個選擇。

EditText

在應用程式中我們經常需要須入帳號密碼等文字，這個輸入文字的功能可以利用 EditText 元件來達成；這裡的練習使用一個 TextView 和一個 EditText 元件，當我們在 EditText 中輸入文字後，隨即將輸入的文字顯示於 TextView 中。

原始碼:

package nchu.test; import android.app.Activity; import android.os.Bundle; import android.view.KeyEvent; import android.view.View; import android.widget.EditText; import android.widget.TextView; public class test extends Activity { TextView m_textview; EditText m_edittext; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); m_textview = (TextView)findViewById(R.id.textView1); m_edittext = (EditText)findViewById(R.id.editText1); m_edittext.setHint("請輸入文字"); m_edittext.setOnKeyListener(new EditText.OnKeyListener(){ @Override public boolean onKey(View v, int keyCode, KeyEvent event) { m_textview.setText(m_edittext.getText().toString()); return false; } }); } }

在 EditText 元件設定 OnKeyListener，用以監聽是否有按下按鍵，並且覆寫 onKey 功能，當按下按鍵時，可以從 m_edittext 物件的 getText方法取得，並且利用 toString() 將其轉為字串，最後將此字串設定給 TextView 顯示。

RadioGroup, RadioButton

RadioButton 可以提供選擇讓我們直接選取，並且可以使用 RadioGroup 將多個 RadioButton 整合成一個群組，下面這個範例簡單的使用一個 RadioGroup 群組，群組裡有四個選項，每個選項有一個名字，當我們選擇其中一個項，選取的名字會顯示在上方的 TextView 中。

在拖拉元件中，RadioGroup 預設是三個 RadioButton ，如果要新增一個 RadioButton，可以將 RadioButton 拉進 RadioGroup 並且更改其 id 值，這樣就可以使 RadioGroup 新增一個 RadioButton。

原始碼 :

package nchu.test; import android.app.Activity; import android.os.Bundle; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.TextView; public class test extends Activity { TextView m_textview; RadioGroup m_radiogroup; RadioButton m_radio0,m_radio1,m_radio2,m_radio3; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); m_textview = (TextView)findViewById(R.id.textView1); m_radiogroup = (RadioGroup)findViewById(R.id.radioGroup1); m_radio0 = (RadioButton)findViewById(R.id.radio0); m_radio1 = (RadioButton)findViewById(R.id.radio1); m_radio2 = (RadioButton)findViewById(R.id.radio2); m_radio3 = (RadioButton)findViewById(R.id.radio3); m_radiogroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId){ case R.id.radio0 : m_textview.setText(m_radio0.getText()); break; case R.id.radio1 : m_textview.setText(m_radio1.getText()); break; case R.id.radio2 : m_textview.setText(m_radio2.getText()); break; case R.id.radio3 : m_textview.setText(m_radio3.getText()); break; }}});}}

同樣設立一個 OnCheckedChangeListener()，只要有改變就會進入 switch case 找到適合的片段執行，而每個 case 直接搜尋 R.java 裡的 RadioButton id值。

CheckBox

CheckBox 和 RadioButton 很類似，不同點在於 CheckBox 為複選，用法與其他元件相同，建立物件取得資源，並針對每個元件設定所需的監聽器，下面練習的功能為:點選每個選項後，即會獲得點選了哪一項的通知，並且在按下確定後統計總共選了幾項。因為在物件的操作上都與之前所講的大同小異，接下來就不再細述。

原始碼:

package nchu.test; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.CheckBox; import android.widget.CompoundButton; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.TextView; import android.widget.Toast; public class test extends Activity { TextView m_textview; CheckBox m_checkbox0,m_checkbox1,m_checkbox2,m_checkbox3; Button m_button; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); m_textview = (TextView)findViewById(R.id.textView1); m_checkbox0 = (CheckBox)findViewById(R.id.checkBox0); m_checkbox1 = (CheckBox)findViewById(R.id.checkBox1); m_checkbox2 = (CheckBox)findViewById(R.id.checkBox2); m_checkbox3 = (CheckBox)findViewById(R.id.checkBox3); m_button = (Button)findViewById(R.id.button1); m_checkbox0.setOnCheckedChangeListener(new OnCheckedChangeListener(){ @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if(m_checkbox0.isChecked()) { display("選擇"+m_checkbox0.getText()); } }}); m_checkbox1.setOnCheckedChangeListener(new OnCheckedChangeListener(){ @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if(m_checkbox1.isChecked()) { display("選擇"+m_checkbox1.getText()); } }}); m_checkbox2.setOnCheckedChangeListener(new OnCheckedChangeListener(){ @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if(m_checkbox2.isChecked()) { display("選擇"+m_checkbox2.getText()); } }}); m_checkbox3.setOnCheckedChangeListener(new OnCheckedChangeListener(){ @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if(m_checkbox3.isChecked()) { display("選擇"+m_checkbox3.getText()); } }}); m_button.setOnClickListener(new OnClickListener(){ @Override public void onClick(View v) { int num = 0; if(m_checkbox0.isChecked()) num++; if(m_checkbox1.isChecked()) num++; if(m_checkbox2.isChecked()) num++; if(m_checkbox3.isChecked()) num++; display("共選了" + num + "項"); } }); } public void display(String str){ Toast.makeText(this, str, Toast.LENGTH_SHORT).show(); } }

待續~~