在第三天，你已經學會了如何使用 LinearLayout 和 ConstraintLayout，將你的 App 介面排得整整齊齊。
今天，我們就要來學習 —— EditText。

什麼是 EditText？

• 簡單比喻： EditText 就像是 App 的 「留言本」。它是一個可以讓使用者「輸入文字」的元件，例如：帳號、密碼、或是任何你想讓使用者填寫的內容。
• 核心功能： 接收使用者輸入、設定提示文字 (Hint)、設定輸入類型 (數字、文字等)。

實作時間：打造一個「打招呼 App」

今天，我們要結合前兩天的知識，製作一個簡單又有趣的 App：當使用者輸入名字，按下按鈕後，App 就會向他打招呼！

1. 修改你的 activity_main.xml

   • 打開你的「設計圖」檔案 activity_main.xml。
   • 在 Palette 面板中，找到 Text 分類，將 EditText 元件拖曳到畫面中央。
   • 在 Attributes 面板中，給這個 EditText 一個獨特的 ID，例如：@+id/nameInput。
   • 我們不希望一開始就有文字，但可以給它一個提示。在 hint 屬性中輸入「請輸入你的名字」。
   • 接著，調整你原本的 Button 元件，將它的 ID 改為 greetButton，文字改成「向我打招呼」。
   • 最後，把你原本的 TextView 留著，它的 ID 設為 greetingText，內容先設為「哈囉！」。

   你的 XML 程式碼，大概會像這樣：

   <androidx.constraintlayout.widget.ConstraintLayout ...>
   
       <EditText
           android:id="@+id/nameInput"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:hint="請輸入你的名字"
            />
   
       <Button
           android:id="@+id/greetButton"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="向我打招呼"
            />
   
       <TextView
           android:id="@+id/greetingText"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="哈囉！"
            />
   
   </androidx.constraintlayout.widget.ConstraintLayout>
   

2. 修改你的 MainActivity.java

   • 打開你的「操作說明書」檔案 MainActivity.java。
   • 我們需要告訴 App，當使用者點擊按鈕時，要做以下幾件事：
     1. 找到「留言本」(EditText)。
     2. 從「留言本」裡讀取使用者輸入的文字。
     3. 將讀取到的文字，顯示在「文字標籤」(TextView) 上。

   以下是完整的程式碼範例:

   import androidx.appcompat.app.AppCompatActivity;
   import android.os.Bundle;
   import android.view.View;
   import android.widget.Button;
   import android.widget.EditText; // 新增匯入 EditText
   import android.widget.TextView; // 新增匯入 TextView
   
   public class MainActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           // 1. 找到所有元件，就像點名一樣
           EditText nameInput = findViewById(R.id.nameInput);
           Button greetButton = findViewById(R.id.greetButton);
           TextView greetingText = findViewById(R.id.greetingText);
   
           // 2. 告訴 greetButton，當有人點擊它時要做什麼事
           greetButton.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   // 3. 在這裡，我們從 nameInput 讀取文字
                   String name = nameInput.getText().toString();
   
                   // 4. 然後把這段文字設定到 greetingText 上
                   greetingText.setText("哈囉，" + name + "！");
               }
           });
       }
   }
   

3. 執行你的 App！

   • 再次點擊綠色的「▶」按鈕，執行你的 App。
   • 在輸入框中輸入你的名字，然後點擊「向我打招呼」按鈕。
   • 你會看到 TextView 上的文字，神奇地變成了「哈囉，[你的名字]！」。

今日總結

今天我們學會了：

• 如何使用 EditText 元件，讓使用者可以輸入文字。
• 如何從 EditText 中讀取文字內容。
• 如何將讀取到的文字，動態地顯示在 TextView 上。

明天，我們要回到介面設計的主題。我們會學習 ImageView 元件，讓你的 App 不只有文字，還能顯示圖片！

明天見！