【DAY 04】簡單介紹怎麼拉物件

15th鐵人賽

max_264h

團隊nutc_imac_function

2023-09-14 08:36:46

557 瀏覽

分享至

前言

在上一篇的時候提到後面要做一個簡單的實作「 BMI計算機 」，功能是用來計算BMI，而這個實作會使用到以下元件 :

TextView (文本視圖)
EditText (編輯文字框)
Button (按鈕)

那這一篇我會先簡單的介紹如何拉物件跟做一個簡單的互動，下一篇會針對這些元件做更詳細的講解。

製作專屬於自己的介面

首先點擊左側選單的res資料夾，點開後可以看到Layout再點開，然後選取activity_main，這樣就會開啟主介面的介面檔，就像這個樣子
再來我們將點開來後的畫面畫分成三個區塊

首先綠色框的部分，這裡是可以新增的元件，左邊分類預設是選取常用。
再來紅色框的部分，這裡是畫面呈現的樣子，到時候物件就是要從左側拉到中間新增及擺放，或者也可以將物件拉到綠色框下方的Component Tree新增，再從紅色框的部分進行細微的調整。
最後黃色框的部分，這裡是調整物件屬性的地方，往上看可以看到「Code、Spilt、Design」，這三個的功能分別是「使用程式碼建立元件以及控制元件屬性、將畫面分割成兩半一半是Code一半是設計畫面、只有設計元件的畫面」，而現在的畫面是Design。

畫面放大後可以看到大家最熟悉的「Hello World!」，那這次的實作中也有用到這個元件(TextView)，但這邊我們還是先將它刪掉，再來我們就先將TextView從左邊拉一個到畫面上

有一點忘記說了！記得物件一定要像這樣綁定四邊，或是綁定在另一個物件上，而這個動作就相當在綁定物件在介面上的位置，

TextView在BMI計算機中會成為顯示結果的那個物件，今天我就先不深入介紹他有什麼屬性可以使用，下一篇開始會結合其他元件更詳細的說明
再來我們來拉一個Button，這個Button在BMI計算機中會設計成代表「計算」功能的按鍵

最後我們來拉EditText，EditText最常會擔任輸入框的工作，因此這個物件就會當作BMI計算機輸入身高和體重的地方

先在左側的選單選取Text，然後選擇第二個Plain Text，這個就是EditText，以後有物件真的找不到的時候，也可以記住它的名字，點選上面的放大鏡(Search)，就可以開啟搜尋功能直接搜尋物件囉～

撰寫物件的互動程式碼

現在基本的拉物件你已經知道怎麼做了，那我們就將鏡頭給轉到java檔上，開使撰寫「綁定物件、物件互動」的程式碼吧!
可以點選上方的MainActivity.java進入撰寫主畫面的java檔，我先將我的程式碼貼上再來一一講解

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {
    TextView textView;
    EditText editText;
    Button button;
    String str;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = (TextView) findViewById(R.id.textView);
        button = (Button) findViewById(R.id.button);
        editText = (EditText) findViewById(R.id.editTextText);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                str = editText.getText().toString();
                textView.setText(str);
            }
        });
    }
}

本次做的簡單互動就是EditText當作輸入，按下Button後就將EditText輸入的東西傳給TextView顯示

在此有個寫android studio的小技巧，凡是看到程式碼出現紅色的底線時，可以對那個地方點一下左鍵，然後按Alt+Enter，這樣就會為你推薦解決方案，有的時候看不出問題在哪時，就可以這樣做試試看。

程式碼講解

首先看到這裡:

    public class MainActivity extends AppCompatActivity {
    TextView textView;
    EditText editText;
    Button button;
    String str;

這個部分就是「宣告」，這裡宣告了TextView、EditText、Button這幾個物件，並且又再宣告了一個String，接下來再往下看

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

這個部分則是在綁定這個java檔的介面，setContentView(R.layout.activity_main);從這裡就能看出來他綁定的方法是讀取layout裡面的activity_main

        textView = (TextView) findViewById(R.id.textView);
        button = (Button) findViewById(R.id.button);
        editText = (EditText) findViewById(R.id.editTextText);

再來這裡做的是將上面宣告的變數綁定到介面上的物件id，變數是可以自己隨便取的，不是一定要取範例的名字

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                str = editText.getText().toString();
                textView.setText(str);
            }

最後這裡就是在撰寫我們要的互動，先將變數名稱寫出來加個點後，就會冒出很多這個物件能使用的方法，這次我使用的方法是點擊事件，這個方法會在點擊該物件時觸發

再往裡面看str = editText.getText().toString();這裡將EditText輸入的內容用getText()的方法取出，再用toString的方法將內容轉換成String給str

最後textView.setText(str);這裡將str的內容丟給TextView讓它將內容更改成str，到此程式講解完畢，確認介面設置完成以及java檔寫好後，按下
按下綠色的箭頭就會開始編譯程式碼並啟動模擬器囉～最終執行成果就是這樣