Android筆記(9)：UI元件 TextView & Button 文字框及按鈕

Photo by Masakaze Kawakami on Unsplash

在 Android 中，要建立 UI 元件在螢幕畫面上有兩種方法，一種是在 XML 佈局檔中定義元件的屬性，另一 種是使用 Java 程式透過 new 指令來建立元件。Android 官方較推薦在XML 佈局檔中定義元件的呈現與屬性設定。之後的幾篇元件的讀書筆記，也以學習 XML 佈局檔的用法為主。

元件在 XML 檔內的標示是以 <元件名稱> 來表示，結束時以 </元件名稱>當作結尾，而屬性的設定是放在元件名稱之後和 >之間，以 TextView 為例，說明如何填寫這個 XML 的方法如下：

<TextView 
   android:屬性 = "值"> 
</TextView>

TextView 不是屬於容器類別的元件，其結束的標記可以在最後一個 > 前加上 / 完成結束標記。範例如下：

<TextView 
   android:屬性 = "值" /> 

[TextView]

TextView 是最常被用到的 View 了，功能就是顯示文字在方框中，TextView 文字框可設定文字大小、顏色、字型、位置等各種屬性。由於文字框類(如TextView、EditView）的屬性非常多，以下僅列出常用的當作參考。如需更詳細的說明，可參考 develiper 網站： android.widget。

XML 屬性	描述
id	為TextView 設置一個元件的ID。
text	設定文字框的要顯示的內容，可以是文字串或使用 strings.xml 檔中指定的字串變數。
width	設定文字框的寬度，其單位可以是dp、px、pt、sp 和in 等
height	設定文字框的高度，其單位可以是dp、px、pt、sp 和in 等
layout_width	設定文字框在整個佈局的寬度，選項有 wrap_content 和 match_parent 兩種。
layout_height	設定文字框在整個佈局的高度，選項有 wrap_content 和 match_parent 兩種。
textColor	設定文字框內文的顏色，其屬性值可以是#rgb、#argb、#rrggbb 或#aarrggbb 格式指定的顏色值。
textSize	設定文字框內文的字體大小，其屬性由代表大小的數值和單位，單位可以是dp、px、pt、sp 和 in 等。
textStyle	設定字體的風格, 有三個值可選 nomal(無效果), bold(粗體), italic(斜體)。
backgroun	設定背景顏色, 可以是填充整個元件的顏色, 可以是圖片。
gravity	設定文字框內容的對齊方式，可選的值有 top、bottom、left、right、center_ vertical、fill_vertical、 center_horizontal、fill_horizontal、center、fill、clip_vertical 和clip_horizontal 等。這些屬性值可以 同時設定多個，每個屬性值之間用分隔號「｜」隔開。例如，要指定元件靠右下角對齊， 可以使用屬性值right|bottom。

除了直接在 XML 檔中編輯外，也可以透過圖形介面進行編輯，簡易的編輯說明，可參考：Android筆記(4)：第一個APP程式顯示Hello World。

[Button]

Button 按鈕也是在 APP 經常被使用的元件，當需要用戶確認某些動作時，或進行畫面切換，都可透過 Button 進行。在 XML 佈局檔中添加 Button 按鈕的基本語法格式如下：

<Button
   android:屬性 = "值" > 
</Button>   

由於 Button 是 TextView 的子類，所以在 TextView 所列的屬性都可使用在 Button，當作是 Button 元件的屬性。設定好 Button 的元件屬性後，再為這個按鈕設定按下後的事件監聽，才能讓按鈕在按下時產生作用。而監聽器的功能，就是隨時在監聽按鈕是否有事件發生，可以參考先前的文章 Android筆記(7)：事件Event觸發與處理 說明事件監控與觸發處理。

[程式範例]

使用按鈕的事件監聽來觸發程序，在 Android筆記(7)：事件Event觸發與處理 一篇中描述兩個方法來接收按鍵的結果，透過監聽按鍵的方法，啟動一段程式，以下就用兩個 TextView，一個是文字提示說明，一個是數字累加，再添加一個按鈕，每按一次，數字就會加 1，呈現在第二個 TextView 內。

(1)新建一個模組 Module，進入 res/ layout 目錄下點選佈局檔 activity_main.xml。將預設的內容刪除，建立兩個 TextView，命名為 tv1 及 tv2，以及一個按鈕 btn，以下是整個 XML 的內容。

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100sp"
        android:textSize="26sp"
        android:text="您按按鈕的次數:   " />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100sp"
        android:layout_alignRight="@id/tv1"
        android:textSize="26sp"
        android:text="0" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20sp"
        android:text=" 請按我! "
        android:textSize="26sp"
        android:layout_below="@id/tv1" />

</RelativeLayout>

(2)在 MainActivity.java 的 onCreate() 方法內，先建立一個按鈕及一個 TextView 物件，用 findValueById 連結該元件，並為其添加事件監聽器，然後重寫的 onClick() 事件， 將 tv2的文字框轉成字串再轉成數字，然後加 1，再轉成字串指定給 tv2 這個文字框。程式碼如下：

public class tv_MainActivity extends AppCompatActivity {

    Button btn;
    TextView tv2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tv_main);

        btn = (Button) findViewById(R.id.btn);
        tv2 = (TextView) findViewById(R.id.tv2);

        btn.setOnClickListener(btnCount);
    }

    private Button.OnClickListener btnCount = new Button.OnClickListener() {

      public void onClick(View v) {
        int count = Integer.parseInt(tv2.getText().toString()) +1;  // 文字轉數字 +1
        tv2.setText(Integer.toString(count));     // 轉成文字顯示
      }
    };
}

執行結果如下：

[參考資料]

• Developer : TextView
• Developer : Button
• 明日科技:Android 從入門到精通