這次的主題主要是教大家如何取的EditText中的字。EditText算是一個很常用到的物件,例如登入畫面、搜尋…,只要需要使用者輸入資訊的時候,通常都會使用到!!




設計畫面

在畫面上拉出2個TextView、2個EditText和1個Button

可以參考畫面:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:orientation="vertical"
    tools:context="com.example.yr.edittextdemo.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:textSize="20dp"
            android:text="請輸入身高 : " />

        <EditText
            android:id="@+id/etH"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:textSize="20dp"
            android:hint="(公尺)" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:textSize="20dp"
            android:text="請輸入體重 : " />

        <EditText
            android:id="@+id/etW"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:textSize="20dp"
            android:hint="(公斤)" />
    </LinearLayout>

    <Button
        android:id="@+id/btnStart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginHorizontal="20dp"
        android:layout_weight="1"
        android:textSize="20dp"
        android:text="開始計算" />

</LinearLayout>

講解

android:layout_margin="8dp"
可以用這張圖理解:

藍色框框是主要內容,padding是指內容與邊框間的距離,margin是指距離外面的框框多少距離,上下左右都可以調整

android:layout_weight="1"
當使用LinearLayout排版時,可以調整每個物件在畫面上顯示的比重

比重越小,所分配到的範圍就越大

android:textSize="20dp"
設定字型大小

android:hint="(公斤)"
設定提示訊息


撰寫程式碼

宣告物件

EditText etH,etW;
Button btnStart;

取得 View 物件

etH = findViewById(R.id.etH);
etW = findViewById(R.id.etW);
btnStart = findViewById(R.id.btnStart);

設置監聽器

btnStart.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

    }
});

取得EditText中資料

double h = Double.parseDouble(etH.getText().toString());
double w = Double.parseDouble(etW.getText().toString());

計算BMI

BMI的公式是 體重/身高^2 $(\frac{kg}{m^2})$

double bmi = w/(Math.pow(h,2));

顯示出BMI

Toast.makeText(getApplicationContext(),String.valueOf(bmi),Toast.LENGTH_LONG).show();

Toast可以顯示提示訊息

參考程式碼

package com.example.yr.edittextdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    //宣告物件
    EditText etH,etW;
    Button btnStart;

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

        // 取得 View 物件
        etH = findViewById(R.id.etH);
        etW = findViewById(R.id.etW);
        btnStart = findViewById(R.id.btnStart);

        // 設置監聽器
        btnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // 取得EditText中資料
                double h = Double.parseDouble(etH.getText().toString());
                double w = Double.parseDouble(etW.getText().toString());

                // 計算BMI
                double bmi = w/(Math.pow(h,2));

                // 顯示出BMI
                Toast.makeText(MainActivity.this,String.valueOf(bmi),Toast.LENGTH_LONG).show();

            }
        });

    }
}

執行畫面


延伸練習

這次只有教到如何取得使用者輸入的資訊,並且經過計算後顯示,但是你可以想想要如何利用計算後的BMI,幫使用者判斷自己身體狀況(過輕、正常、過重)呢?

By yr