Open in app

Sign in

Write

Sign in

2020 Android Develop 超新手文章系列 — “BMI Calculating APP”

外觀決定一個產品的第一印象，APP也不例外

welsen ho
37 min readDec 15, 2020

上一篇連結：https://welsen9595androidintern.medium.com/2020-android-develop-%E8%B6%85%E6%96%B0%E6%89%8B%E6%96%87%E7%AB%A0%E7%B3%BB%E5%88%97-hello-android-a469e26ff08b

如果你還在讀，恭喜你跨出了第二步。別擔心，我們還在蜜月期，所以你暫時不需要太擔心會不會碰到困難。

在開始之前，不要怕看不懂，如果有些段落看不懂，代表你很正常，你可以再看第二遍。

這篇文章將帶你製作一個可以計算BMI的APP，而文章編寫概念為單純介紹工具的使用方法以及工具的選擇。APP概念如下：

以下為我這次要教你的清單，Ready up

Section 1

  1. 元件（Component）的基礎使用
  2. XML是什麼？ 以及你為何應該喜歡它？
  3. BMI計算APP介面設計

Section 2

  1. Coding 跟交男女朋友一樣，你以為很好搞？no no no熟了就不一樣了
  2. Activity的那些事
  3. Let’s start develop

SECTION 1

1.1 元件（Component）的基礎使用

什麼是Component？最簡單的方式來說明就是用來給使用者看或有互動的東西。舉凡說，當你面前有個控制台，且上面有一顆紅色的大按鈕，你是不是會有種想按的感覺？在這裡的紅色大按鈕就是我們所說的元件。

蛤？你說我講的不是很清楚。沒事，我現在就拿Facebook Login的畫面來給你示範

這是一個Facebook的登入畫面

當我們在看這一個登入畫面時，我們首先會先點第一個Email輸入，再點第二個Password輸入，在Android Studio裡，我們稱這2個元件為EditText。＃使用者跟這2個元件有互動關係。

當輸入好該輸入的資訊時，這時我們就會點選那顆大大的Login按鈕來進行登入的動作。在Android Studio裡，我們稱這個元件為Button。＃使用者跟這個元件有互動關係。

有沒有看到畫面裡上面有一張有很多手愛Facebook的畫面，這個圖片也是元件之一，在Android Studio裡，我們稱為ImageView。＃使用者跟這個元件可以有或沒有互動關係。

以上大概就是簡單的範例介紹，當然Android Studio的元件絕對不只這3個而已，你剛剛看到的Facebook登入畫面實際有更多的元件，這些元件促成這個畫面的成立。

而這些元件的擺放位置則是經過Facebook專業的設計團隊決定。經由不斷的使用者測試慢慢的雕琢，把APP的美感呈現出來，讓使用者能有更好的使用體驗。我們稱這些人為UI(User Interface)/UX(User Experience)設計。

好啦，講了這麼多的話，接來來也該開始做一些示範介紹了，讓我們開啟剛剛的“Hello Android”專案開始實作一些例子吧。

1.2 XML是什麼？ 以及你為何應該喜歡它？

XML的全名為extensible markup language（可延伸標記式語言），還記得在前面說過元件的擺放位置嗎？沒錯，XML就是為了設計元件擺放位置而存在的語言。除了位置以外，他還可以決定元件的風格，例如這個按鈕你要紅色還是藍色、決定按鈕上的字體大小或字型等等。其實不管是位置還風格，我們都統一稱這些為元件的Attributes（屬性），而XML就是用調整或控制各個元件屬性的語言。

看起來很複雜對不對？沒事，我等等就用行動讓你感受。

首先先把activity_main.xml這個檔案開啟，畫面如下（如果你畫面跟我不同也沒關係，只要確定是同個檔案就行了，圖中左邊的檔案樹我也顯示給你看檔案位置）

activity_main.xml的檔案

接下來請幫我按右上角有一個Split的按紐

右上角一個Split的按鈕

按下去後畫面應該會像這樣

我先介紹一下這個畫面，最左邊的為你的檔案樹，中間就是讓你編寫XML語言的編輯器，右邊則是當你修改XMl之後會立即預覽的畫面。還記得你剛剛點了Split按鈕嗎？他左右2邊還有各一個按鈕分別為Code和Design，這些按鈕能讓你決定你設計畫面的方法。如果你點Code的話，Android Studio會把預覽畫面關閉並顯示純XML編Code方法。而如果你點Design的話，Android Studio則會把XML編輯器關閉，並只顯示預覽畫面而已。在這裡我就不示範了，你可以自己玩玩看。

Tip：順便說一下，上方的畫面如果你覺得像左邊的檔案樹很礙眼的話，你可以點選檔案數上面的減號，它會把檔案樹隱藏起來，如果你還要再開啟的話，再點選一次Project就可以開啟，其他的視窗也有一樣的方便性。

好啦，接下來我們要實際寫寫看XML語言。我們現在看這個畫面上只有一個元件，他叫做TextView元件，在XML編輯視窗裡你會看到TextView的Code如下（我用粗體字標示）

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

注意看一下這個TextView的寫法，上面第一行為

<TextView

而最後則是用下面個包起來

/>

這代表一個元件最基本的寫法，簡單來說就是元件要有始有終，因為這中間裡的Code就是Attributes的控制。假設現在畫面上有2個元件，如果沒有包起來的話，Android會無法辨識哪些屬性是控制哪個元件。當然，如果你沒有包起來的話，Android Studio會直接給你紅線（紅線沒解決之前，你是無法Play測試的），你可以試試看把/>刪掉，他會有紅線標出來，你在把滑鼠移到紅線上，它會顯示

Tag start is not close

你看到這段字，應該就會知道他在說什麼了吧。現在請按ctrl + z (mac電腦為 cmd + z)復原，跟Word一樣，你做了什麼不該做的，回復可以解決。

現在我們再回去TextView看一次，我們把text在改掉一次，改成”Hello XML”如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello XML!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

這個Text的屬性就是可以改變他顯示的內容

有沒有感覺字體有點小？沒事，我們現在就來放大。請在text的下一行增加一個textSize的屬性，並把字體改變為24sp的大小，Code如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello XML!"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

現在再看一次隔壁預覽畫面字體是不是放大了，很好玩，對不對？

我們覺得這個畫面很無聊，想要新增一個Button按鈕元件，使用方式如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello XML!"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnCLick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Subscribe to medium/welsen ho"
        android:textAllCaps="false"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.62"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.587" />


</androidx.constraintlayout.widget.ConstraintLayout>

把Button這段屬性複製貼上之後，你的預覽畫面就會多一個Button的按紐，現在你可以Play一次看看，用模擬機跑跑看這個APP，當然，你就算點選Button也不會有任何動作，那是因為我們還沒為這個Button增加程式邏輯。

現在到目前為止你可以知道如：textSize、text或textColor等等比較直覺性的名詞，其他如：

layout_width、layout_height或app:layout_constraintEnd_toEndOf等等比較抽象的物件屬性你可能還很模糊。沒關係，之後我會在寫一篇完整介紹這些屬性的文章。你目前只需要知道你可以用這些屬性(Properties)來控制一項物件(Object)

3 BMI計算APP介面設計

到目前為止，在讀過所有的東西之後，有沒有覺得更懂他的使用方式與意義了。如果有，那還真是太好了，接下來請你幫我把一下的XML複製到你的activity_main.xml裡吧。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnCalculate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="計算重量"
        android:textAllCaps="false"
        android:textSize="18sp"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtResult"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"/>

    <EditText
        android:id="@+id/editWeight"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:hint="重量"
        app:layout_constraintBottom_toTopOf="@+id/txtResult"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <EditText
        android:id="@+id/editHeight"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:hint="身高"
        app:layout_constraintBottom_toTopOf="@+id/editWeight"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/txtResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="結果"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

在上面理我新增了2個新的物件，各為EditText的物件，這個物件主要是可以讓使用者輸入各自的體重與身高。你可以現在Play看看，等模擬器開好之後點EditText的框框，你就會知道我在說什麼了。

複製好之後你的預覽畫面應該會長這樣

你也許會想，我為什麼都不解釋並只讓你複製而已，那是因為這篇文章的目的並不是跟你細講各個Properties的運用，而是要讓你知道，控制這些物件的方法與意義。至於運用的方式會在之後的文章完整解釋。

到目前為止，我們都在設計的部分講了這麼多，但是你在實際執行App的時候，這些物件都不會有什麼反應，那是因為這些物件缺少了實際執行的邏輯，簡單來說就是你沒有跟它們說要做什麼。因此，在下一章節，我將介紹背後控制這些物件靈魂，也就是程式碼Code。

SECTION 2

2.1 Coding 跟交男女朋友一樣，你以為很好搞？no no no熟了就不一樣了

好啦，在剛剛講解完XML使用方式與意義之後，接下來要到我們Code的部分了。基本上，Code這個部分是要用來計算User輸入進來的資料，控制Component，並把資料顯示在頁面上。我會用以下這個清單來介紹等下我們會Code出哪些功能(Function)出來。

  1. 連接前端Component
  2. 按下按鈕時，讀取User輸入的資料
  3. 使用User給的資料計算相對應的BMI
  4. 控制Component把資料顯示出來

打Code要打的有意義，要知道你打出來的這一段Code目的是要幹什麼用，雖然不會跟你完全說明每一行的意義，但是會讓你知道你到底在幹三小。

好了，廢話不多說，開始寫Code吧。

等等，我開玩笑的，在寫Code之前要先讓你知道Activity這個東西的存在。

2.2 Activity的那些事

基本上下面這個就是Activity的檔案（我有開檔案樹，你可以看到它在哪裡），注意他的檔名是

MainActivity.java，點後面的Java代表這個Activity檔案是用Java語言寫的

MainActivity.java

那到底Activity是什麼呢？

我們可以看一下官方文件的定義

如果你看懂，那你很棒。但是我知道，可以看懂的，你大概就不用繼續看這篇文章了😂，看不懂的，繼續下拉看

簡單來說你可以把Activity想像成是一個頁面單位，你現在去打開Instagram的App看看，你會發現當你點了朋友的頭像，你會被轉到至你朋友的頁面，又或者你點設定，你會被轉到設定的頁面。所以，基本上，一個頁面就會有一個Activity，因為在Activity裡面，你會寫所有有關Component控制或資料顯示的邏輯並串接到對應的XML檔。對於剛碰Android的人來說，你需要知道一個Activity基本上就會連接到一個XML檔，

你可以想像一個頁面就會對應的一個Activity。就好像開車的時候，車上一定會有一個人控制車輛。那我們寫的Code就像在開發這個開車的人的腦袋一樣，但你總不能用寫開飛機的邏輯來對應開車的頁面吧。

在這個例子就是你在前面有寫的activity_main.xml，會連接到MainActivity.java。

在這邊同時說明一下，xml以及Activity的命名方式最好是要對應的（對應方式如MainActivity與activity_main一樣）。why ? 因為這是好習慣💁。寫到後面，你會發現會有越來越多的Activity與其對應的XML檔，要尋找的時候比較方便。

結論：總之，你要寫的Code都會打在Activity上面。

2.3 Let’s start develop

好了，在你知道Activity是什麼之後，我們可以開始寫Code了。

不過，再繼續實際示範之前，要先跟大家說目前Android在開發上主要以2大語言做開發。Java & Kotlin，因為這篇文章主要是給新手讀的，所以在這邊就不跟大家多做解釋這2個語言到底差異在哪了（相信我，講了你也不會懂😊）。但你只需要知道一件事，目前Android官方主推Kotlin First，但是Java也同樣支援就是了。不論你要選哪種語言開發都可以，我在介紹的同時也會示範各別的寫法，好讓你們知道實際的差別。

讓我們在回顧一下要做的清單

  1. 連接前端Component
  2. 按下按鈕時，讀取User輸入的資料
  3. 使用User給的資料計算相對應的BMI
  4. 控制Component把資料顯示出來

好，那第一步連接Component要怎麼寫呢？

第一步是要先創造相對應的物件出來，還記得在前面XML檔有2個EditText分別對應身高和體重的輸入嗎？在Coding的寫法就會像這樣，新增上去的Code我用粗體字標示出來。

寫法：

public class MainActivity extends AppCompatActivity {

    private EditText editHeight; //創造身高物件
    private EditText editWeight; //創造體重物件
    private Button button; //創造按鈕
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
}

接下來，我們要把創造的物件連起來

private EditText editHeight;
private EditText editWeight;
private Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    editHeight = findViewById(R.id.editHeight); //連接Component
    editWeight = findViewById(R.id.editWeight); //連接Component
    button = findViewById(R.id.btnCalculate); //連接Component}

注意到那個id，剛好就是對應到XML上面Component上面的id

<EditText
        android:id="@+id/editWeight"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:hint="重量"
        app:layout_constraintBottom_toTopOf="@+id/txtResult"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <EditText
        android:id="@+id/editHeight"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:hint="身高"
        app:layout_constraintBottom_toTopOf="@+id/editWeight"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

目前做到這裏，你就算是做完第一步的東西了。

接下來第二步：按下按鈕時，讀取User輸入的資料

現在我們有一個按鈕的物件了，我們要寫出可以偵測Listen當User按下按鈕時的反應了，具體寫法如下。

public class MainActivity extends AppCompatActivity {

    private EditText editHeight;
    private EditText editWeight;
    private Button button;

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

        editHeight = findViewById(R.id.editHeight);
        editWeight = findViewById(R.id.editWeight);
        button = findViewById(R.id.btnCalculate);

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

                //這邊可以寫User按下按鈕時的要做的事情

            }
        });

    }
}

有沒有注意到其實語言這個東西是要設計給人看的，setOnClickListener是不是有很好讀懂，它表示當按下按鈕時就要做什麼的意思。至於其他的我就不做解釋了，你可以是當它要召喚setOnClickListener功能必須要額外打出來的Code，但是他還是有被打出來的意義的。

好，我們把按鈕問題處理好了，那接下來要處裡讀取User打進EditText的資料了，具體Code如下。

private EditText editHeight;
private EditText editWeight;
private Button button;

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

    editHeight = findViewById(R.id.editHeight);
    editWeight = findViewById(R.id.editWeight);
    button = findViewById(R.id.btnCalculate);

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

            //這邊可以寫User按下按鈕時的要做的事情

            editHeight.getText().toString(); //get身高資料並轉換成String
            editWeight.getText().toString(); //get體重資料並轉換成String

        }
    });
}
  • String表示字串物件的意思
  • double表示數字含小數點物件的意思

可以看得出來要拿取資料也是非常直覺的打法，就是GetText就對了。雖然，在這邊我們確實是getText並轉換成String了，但是，可以發現我們Get的text並沒有可以先放的地方，他就只是拿而已，但並沒有要指定給誰，因此我們要指定一個新的double物件幫它拿如下。

public class MainActivity extends AppCompatActivity {

    private EditText editHeight;
    private EditText editWeight;
    private Button button;

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

        editHeight = findViewById(R.id.editHeight);
        editWeight = findViewById(R.id.editWeight);
        button = findViewById(R.id.btnCalculate);

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

                //這邊可以寫User按下按鈕時的要做的事情

                double Weight = editHeight.getText().toString();
                double Height = editWeight.getText().toString();

            }
        });
    }
}

喔，不，你有沒有發現你有2個紅線了？前面有說過你只要有紅線你是無法run出來的，你必須把紅線問題解決掉。不信，你可以跑一次看看，你會得到以下訊息。

注意它紅色的錯誤訊息 error: incompatible types: String cannot be converted to double

從它訊息你也可以明顯的判斷出來問題出在哪？原來是String不能轉換成double物件，所以我們要先把String轉換成double才能給double物件，這應該是一個滿簡單的道理，就像水要先轉換成冰塊才能加進啤酒喝一樣的道理。

那要怎麼轉換呢？首先，再給你答案之前，你可以把這個問題丟給Google看看，Google搜尋：“Java how to convert String to double”，如果你可以獨立處理這道問題，那恭喜你，你很棒。如果不行，那恭喜你，你也很棒🤔。

以下是問題的答案

public class MainActivity extends AppCompatActivity {

    private EditText editHeight;
    private EditText editWeight;
    private Button button;

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

        editHeight = findViewById(R.id.editHeight);
        editWeight = findViewById(R.id.editWeight);
        button = findViewById(R.id.btnCalculate);

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

                //這邊可以寫User按下按鈕時的要做的事情double Weight = Double.parseDouble(editWeight.getText().toString());
double Height = Double.parseDouble(editHeight.getText().toString());

            }
        });
    }
}

如果做到這邊沒問題，那我們就可以開始處理第三步驟了

使用User給的資料計算相對應的BMI

首先，請你先Google BMI的計算公式出來。給你30秒時間找

1

2

3

30

好，30秒到了，可以看到計算方式如下

現在我們知道公式是什麼了(注意身高是Meter)，具體Code如下

public class MainActivity extends AppCompatActivity {

    private EditText editHeight;
    private EditText editWeight;
    private Button button;

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

        editHeight = findViewById(R.id.editHeight);
        editWeight = findViewById(R.id.editWeight);
        button = findViewById(R.id.btnCalculate);

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

                //這邊可以寫User按下按鈕時的要做的事情

                double Weight = Double.parseDouble(editWeight.getText().toString());
                double Height = Double.parseDouble(editHeight.getText().toString());

                double BMI = Weight / (Height * Height); //計算答案
            }
        });
    }
}

現在這BMI已經有你計算的結果了。現在只差最後一步了

控制TextView Component把資料顯示出來

我想把這部分交給你來做看看，所以請先暫時不要繼續往下翻

還偷看啊你？

好啦，給你提示

答案Code如下

public class MainActivity extends AppCompatActivity {

    private EditText editHeight;
    private EditText editWeight;
    private Button button;
    private TextView txtResult;

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

        editHeight = findViewById(R.id.editHeight);
        editWeight = findViewById(R.id.editWeight);
        button = findViewById(R.id.btnCalculate);
        txtResult = findViewById(R.id.txtResult);

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

                //這邊可以寫User按下按鈕時的要做的事情

                double Weight = Double.parseDouble(editWeight.getText().toString());
                double Height = Double.parseDouble(editHeight.getText().toString());

                double BMI = Weight / (Height * Height);

                txtResult.setText(String.valueOf(BMI));

            }
        });
    }
}

粗體字表示新增的Code，現在你可以開始嘗試Run你的App了。請記得身高體重的資料都一定要輸入進去，不然App會無法運作

如果你的App有成功顯示，那恭喜你解鎖人生開發第一隻App成就了，你現在可以拿給你身邊的人炫耀了。

題外話：如果你發現你的答案是0.幾開頭，代表你忘記你的身高單位是公尺了，記得身高166公分要轉換乘1.66🤦🏽‍♂️公尺。

對了，以下為Kotlin的寫法

你要記得在開一個新專案，然後語言那邊記得改Kotlin

在開新專案

XML檔案的寫法是一樣，但以下是Kotlin的寫法

class MainActivity : AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //這邊可以寫User按下按鈕時的要做的事情
        val btnCalculate: Button? = findViewById(R.id.btnCalculate)
        val editHeight: EditText = findViewById(R.id.editHeight)
        val editWeight: EditText = findViewById(R.id.editWeight)
        val txtResult: TextView = findViewById(R.id.txtResult)
        
        
        btnCalculate?.setOnClickListener {
            val weight = editWeight.text.toString().toDouble()
            val height = editHeight.text.toString().toDouble()

            val BMI = weight / (height * height)
            txtResult.text = BMI.toString()
        }
    }
}

幹，我終於打完基本教學了，我現在感想如下

幹爆累……但是我等等還要繼續寫公司的Code以及天殺的實習報告😀👍

SECTION 3

如果你順利的看到這邊的話，恭喜你成功撐下去了。這大概就是Android基礎開發大概的樣子了。 但是，說實話，這個App實際上還有非常多的缺點例如：

  • 如果使用者輸入的東西不是數字的問題
  • 使用者數字無限制輸入
  • APP長的太醜（我的問題）
  • 使用者只輸入身高，體重留空
  • 更多潛在問題….

以上的問題，你可以自己實驗看看，你會發現APP會直接Crash掉，這時身為開發者的你，必須預先找出問題並排除掉潛在的風險。

至於，如何做？

就是看你本身的願不願意花時間解決，如果碰到難題，你還願意花時間、精力繼續Google問題的答案。那恭喜你，你可能會慢慢的往這個坑陷下去，越陷越深。

加油吧~

以下是推薦在Android開發常用的資源

我覺得目前來說，以後文章可能分2種模式，一種為技術分享，另一種則是新手教學。但我現在累了，有機會會在繼續寫，如果我還活著的話。

Android
Android Development
Android App Developers
AndroidDev
Android Apps

--

--

welsen ho

Written by welsen ho

18 Followers

#noSleepOrOneDream

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams