Android筆記(10)：UI元件 EditText 文字編輯框

Photo by Lukenn Sabellano on Unsplash

本篇將繼續認識 UI 元件，可與使用者互動的文字輸入框 EditText，並以一個範例計算 BMI。說明 EditText 的使用方法。

[EditText]

EditText 編輯框在手機/平板的應用中很常見，舉凡密碼輸入、文字輸入都會用到這個元件，在 XML 佈局檔中添加 EditText 編輯框的基本語法格式如下：

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

由於 EditText 類別是 TextView 的子類，所以 TextView 元件所列的屬性都可以使用在 EditText 元件上，但與 TextView 不同的是 EditText 元件多了android:inputType 屬性，用來控制輸入框的顯示類型。例如，要設定一個密碼輸入框，可以將 inputType 屬性設定為 textPassword。除了 inputType 外，其他常用的屬性如下：

XML 屬性	描述
hint	設定顯示的提示文字串，如沒設定輸入處設為空白。
textColorHint	設定提示文字的顏色。
inputType	設定文字框顯示內容的類型，可選的值有 textPassword、textEmailAddress、phone 和 date 等， 可以同時指定多個，使用「|」分隔。
autoLink	設定文字為可按的超連結形式，其屬性值有 all、web、email、phone、map 和 all
drawableXxxx	設定在文字框內的某位置繪製圖像，該圖像可以是放在 res/mipmap 目錄下的圖片。 Xxxx可以是：Top、Bottom、Right、Left、Start、End，表示上下右左等位置。
drawablePaddling	設定圖片與輸入內容的距離。
minLines	設設置最小行的行數為。
maxLines	設置 EditText 最大的行數，當輸入內容超過 maxline,文字會自動向上捲動。
paddingXxxx	設定內容與邊框的間距。Xxxx可以是：Top、Bottom、Right、Left、Start、End，表示上下右左等位置。
singleLine	設定文字框是否單行顯示，可設定為 true 或 false，true 表示該文字框不會換行， 文字框中的字串超過一行時，超出的部分會被省略，同時在結尾處添加「…」。

[程式範例]

(1)新建一個模組 Module，進入 res/layout 目錄下點選佈局檔 activity_main.xml。將預設的內容刪除，建立 4 個 TextView，兩個顯示「體重」及「身高」，兩個要顯示 BMI 值及建議文字，以及兩個輸入框，命名為 height 及 weight 以及一個按鈕 calc，以下是整個 XML 的內容。

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50sp"
        android:textSize="24sp"
        android:text="身高(公分):" />

    <EditText
        android:id="@+id/height"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:hint="請輸入身高" 
        android:inputType="numberDecimal" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20sp"
        android:textSize="24sp"
        android:text="體重(公斤):" />

    <EditText
        android:id="@+id/weight"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:hint="請輸入體重"
        android:inputType="numberDecimal" />

    <TextView
        android:id="@+id/bmi"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20sp"
        android:textSize="24sp"
        android:text="" />

    <TextView android:id="@+id/bmi_desc"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp"
        android:textSize="24sp"
        android:text=""  />

    <Button
        android:id="@+id/calc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp"
        android:textSize="24sp"
        android:text=" 開始計算 " />

</LinearLayout>

(2)在 MainActivity.java 的 onCreate() 方法內，先建立與佈局檔的物件，用 findValueById 連結該元件，並為按鈕其添加事件監聽器，然後重寫的 onClick() 事件， 將計算的結果及建議內容放在 bmi 及 bmi_desc 兩個文字框。程式碼如下：

package com.example.myeditview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import java.text.DecimalFormat;

public class ev_MainActivity extends AppCompatActivity {
    Button calc;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ev_main);

        calc = (Button) findViewById(R.id.calc);   //從佈局取得按鈕
        calc.setOnClickListener(calcBMI);  //設定按鈕監聽事件
    }

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

        public void onClick(View v) {
            DecimalFormat nbmi = new DecimalFormat("0.00");
            EditText fieldheight = (EditText)findViewById(R.id.height);  //從佈局取得物件
            EditText fieldweight = (EditText)findViewById(R.id.weight);
            TextView bmi = (TextView)findViewById(R.id.bmi);
            TextView bmi_desc = (TextView)findViewById(R.id.bmi_desc);

            double height = Double.parseDouble(fieldheight.getText().toString())/100;
            double weight = Double.parseDouble(fieldweight.getText().toString());
            double BMI = weight / (height * height);
            bmi.setText("你的 BMI 是 "+ nbmi.format(BMI));  // 計算結果放在 bmi 文字框

            if (BMI<18.5) {
                bmi_desc.setText("您的體重太輕了...");
            } else if ((BMI>18.5) && (BMI≤24)){
                bmi_desc.setText("您的體重符合標準...");
            } else if ((BMI>24) && (BMI≤30)){
                bmi_desc.setText("您的體重有一點點超標...");
            } else if ((BMI>30) && (BMI≤35)){
                bmi_desc.setText("您的體重已經超標很多了...");
            } else if (BMI>35){
                bmi_desc.setText("您的體重已達重度肥胖...");
            }
        }
    };
}

執行的結果如下，左方圖是尚未輸入時的畫面，輸入框會有提示字串，右邊是輸入後，按下計算按鈕的結果。

[參考資料]

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