前言

如果還沒安裝好Android模擬器可參考【Android Studio安裝教學】【Eclipse安裝教學】，雖然這邊提供兩個IDE安裝方法，但還是建議大家安裝Android Studio。

對於第一次開發Android的初學者來說，我覺得直接做一個簡單專案最有效果，以下教學不一定要全部都懂，只要知道畫面如何製作，程式要寫在哪邊這樣就夠了。　

1.設計BMI值手機介面

所有手機畫面都會放在 Android Project → res → layout底下，每個XML都代表一個介面。

首先到Android Project → res → layout 點選 activity_main.xml(名稱依據建立Project時命名為主)，找到Palette視窗裡面提供很多設計畫面所需要的原件，找到需求元件後拖拉到右方手機畫面即可。

PS.預設IDE介面是白色，如果想要修改IDE樣式可另外Google，網路上很多參考教學。

我們有兩種方法來設計介面

把元件拉到中間手機介面
把元件拉到下方Component Tree

如何設計手機畫面依照個人習慣沒有絕對，但以下教學請用方法2來做會比較簡單

刪除預設的TextView元件
拉一個LinearLayout(vertical) 到 Component Tree
再拉五個LinearLayout(horizontal) 到步驟2的LinearLayout(vertical) 裡面
選取步驟4的這五個LinearLayout(horizontal)，找到右方屬性(Properties)的android:layout_height把他改為wrap_content

使用TextView元件，負責顯示文字給使用者瀏覽

拉4個TextView分別放到1.2.4.5的LinearLayout(horizontal)裡面
修改這四個TextView屬性，由上到下分別為(ID／Text)：
- tv1／身高：
- tv2／體重：
- tv3／結果：
- tv4／診斷

接著再拉兩個EditText提供使用者輸入資料，裡面提供很多input的類型，因為身高、體重只會輸入字數所以就拉Number的EditText就好

拉兩個EditText(Number)到1.2的LinearLayout(horizontal)
修改這兩個EditText的屬性ID分別為et1、et2

如果有照上面步驟操作，你會發現第3個LinearLayout都沒有放入任何元件，別擔心馬上就會用到了。
接著拉一個按鈕(Button)到3的LinearLayout(horizontal)把它的Text改為「送出」

如果想查看activity_main.xml原始碼，可點選設計畫面的下方Text。上面步驟有地方不確定的話，把下面附的程式碼貼到你的原始碼裡面，先讓整個專案能正常執行再回看重新操作練習

100

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="test.com.demo.MainActivity">

<LinearLayout

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<TextView

android:text="身高："

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tv1"

android:layout_weight="1" />

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:inputType="number"

android:ems="10"

android:id="@+id/et1"

android:layout_weight="1" />

</LinearLayout>

<LinearLayout

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<TextView

android:text="體重："

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tv2"

android:layout_weight="1" />

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:inputType="number"

android:ems="10"

android:id="@+id/et2"

android:layout_weight="1" />

</LinearLayout>

<LinearLayout

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<Button

android:text="送出"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/button4"

android:layout_weight="1" />

</LinearLayout>

<LinearLayout

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<TextView

android:text="結果："

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tv3"

android:layout_weight="1" />

</LinearLayout>

<LinearLayout

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<TextView

android:text="診斷："

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tv4"

android:layout_weight="1" />

</LinearLayout>

</RelativeLayout>

2.撰寫BMI值功能

我們進入到Android Project→java 底下點選*.java檔開始撰寫程式

程式碼如下：

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.TextView;

import java.text.NumberFormat;

public class MainActivity extends AppCompatActivity {

EditText h; //宣告全域變數

EditText w; //宣告全域變數

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

h = (EditText)findViewById(R.id.et1); // 取得身高物件

w = (EditText)findViewById(R.id.et2); // 取得體重物件

Button submit = (Button)findViewById(R.id.button1); // 取得按鈕物件如果ID有誤請回到res->Layout查看預設Button是多少

// 按下按鈕觸發事件

submit.setOnClickListener(new Button.OnClickListener() {

public void onClick(View arg0) {

//判斷條件身高跟體重都有輸入值才執行

if ( !("".equals(h.getText().toString())

|| "".equals(w.getText().toString())) )

{

float fh = Float.parseFloat(h.getEditableText().toString()); // 取得身高輸入值

float fw = Float.parseFloat(w.getEditableText().toString()); // 取得體重輸入值

float fresult; // BMI值計算結果

TextView result = (TextView)findViewById(R.id.tv3);// 取得顯示結果物件

fh = fh/100; // 計算BMI

fh = fh*fh; // 計算BMI

NumberFormat nf = NumberFormat.getInstance(); // 數字格式

nf.setMaximumFractionDigits(2); // 限制小數第二位

fresult = fw/fh; // 計算BMI

result.setText(nf.format(fw/fh) +""); // 顯示BMI計算結果

TextView dia = (TextView)findViewById(R.id.tv4);// 取得顯示診斷物件

// 診斷結果顯示

if (fresult<18.5)

dia.setText("體重過輕");

else if (18.5 <= fresult && fresult< 24)

dia.setText("正常範圍");

else if (24 <=fresult && fresult < 27)

dia.setText("過重");

else if (27 <=fresult && fresult < 30)

dia.setText("輕度肥胖");

else if (30 <= fresult && fresult < 35)

dia.setText("中度肥胖");

else if (fresult >= 35)

dia.setText("重度肥胖 ");

}

});

}

3.基本錯誤排除

我們在寫程式時最常遇見的兩種錯誤

沒有匯入相關類別，可以試著把滑鼠移到錯誤程式碼(紅字)上，按下Alt+Enter如果有跳出Import clas選項的話，那就是沒有匯入相關類別，點選後就能解決。
程式語法有錯誤，需要自行檢查程式碼，例如沒有宣告

4.執行結果畫面

Exp Up
Intent + Bundle 切換Activity並傳值從2到3 – 介面換頁並傳值

21 thoughts on “【Android】撰寫第一支APP 計算BMI值從1到2 (Android Studio)”

Kottsuchi Izumi表示:

2019-08-1215:05:05

請問沒有componoent tree中的activity_main的話要如何處理

回覆
Ho Kam Tse表示:

2021-02-0316:06:17

import android.support.v7.app.AppCompatActivity
<< 你好. 我參考你做法出現出現以下問題.請問如何解決?
e: D:\01 in use\Android Studio\AndroidStudioProjects\Bmi 03-02-2021\app\src\main\java\com\example\bmi\MainActivity.kt: (4, 24): Unresolved reference: v7

回覆

前言

1.設計BMI值手機介面

2.撰寫BMI值功能

3.基本錯誤排除

4.執行結果畫面

分享此文：

相關

21 thoughts on “【Android】撰寫第一支APP 計算BMI值 從1到2 (Android Studio)”

發表迴響 取消回覆

21 thoughts on “【Android】撰寫第一支APP 計算BMI值從1到2 (Android Studio)”

發表迴響取消回覆