在第四天，你已經學會了如何使用 EditText，讓 App 具備接收使用者輸入的能力。
接下來可以嘗試加上豐富的圖片和視覺設計，讓 App 更具吸引力。

今天，我們要學習—— ImageView。

什麼是 ImageView？

• 簡單比喻： ImageView 就是 App 的 「相框」 或 「照片牆」。它是一個用來顯示圖片的元件，可以讓你的 App 充滿色彩和視覺效果。
• 核心用途： App 中的圖示、照片、產品圖、背景圖，都是由 ImageView 來實現的。

實作時間：打造一個「圖片切換 App」

今天，我們要製作一個 App：點擊按鈕後，App 畫面上的圖片就會從一張換成另一張！

1. 準備圖片

   • 在開始之前，需要準備兩張圖片檔案（例如 PNG 或 JPG）。
   • 在 Android Studio 中，找到左側的專案目錄，依序點擊 app -> res。
   • 在 res 下方，你會看到一個 drawable 的資料夾。
   • 將你準備好的兩張圖片，直接拖曳到這個 drawable 資料夾中。
   • 注意： 檔案名稱必須是小寫字母、數字或底線，不能有大寫或特殊符號。例如 image1.png、image2.png。

2. **修改你的 activity_main.xml**XML

   • 打開你的「設計圖」檔案 activity_main.xml。
   • 在 Palette 面板中，找到 Common 或 Images 分類，將 ImageView 元件拖曳到畫面中央。
   • 在 Attributes 面板中，給這個 ImageView 一個獨特的 ID，例如：@+id/imageView。
   • 在 src 屬性中，選擇你剛剛匯入的其中一張圖片，這會是 App 一開始顯示的圖片。
   • 調整你的 Button 元件，將它的 ID 設為 changeImageButton，文字改成「換一張圖」。

   你的 XML 程式碼，可能會像這樣：

   <androidx.constraintlayout.widget.ConstraintLayout ...>
   
       <ImageView
           android:id="@+id/imageView"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/image1"  ... />
   
       <Button
           android:id="@+id/changeImageButton"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="換一張圖"
           ... />
   
   </androidx.constraintlayout.widget.ConstraintLayout>
   

3. 修改 MainActivity.java

   • 打開你的「操作說明書」檔案 MainActivity.java。
   • 我們需要告訴 App，當使用者點擊按鈕時，要做以下幾件事：
     1. 找到「相框」(ImageView)。
     2. 準備好兩張圖片的「身分證字號」（也就是圖片在 drawable 資料夾中的名稱）。
     3. 判斷現在相框裡顯示的是哪一張圖片。
     4. 切換成另一張圖片。

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

   import androidx.appcompat.app.AppCompatActivity;
   import android.os.Bundle;
   import android.widget.Button;
   import android.widget.ImageView; // 新增匯入 ImageView
   
   public class MainActivity extends AppCompatActivity {
   
       // 宣告一個變數來記錄目前顯示的是哪一張圖片
       private boolean isImage1 = true;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           // 1. 找到元件
           ImageView imageView = findViewById(R.id.imageView);
           Button changeImageButton = findViewById(R.id.changeImageButton);
   
           // 2. 告訴按鈕，當有人點擊它時要做什麼事
           changeImageButton.setOnClickListener(v -> {
               // 3. 判斷目前顯示的圖片
               if (isImage1) {
                   // 如果是第一張，就換成第二張
                   imageView.setImageResource(R.drawable.img2);
                   isImage1 = false; // 紀錄狀態變更
               } else {
                   // 如果是第二張，就換回第一張
                   imageView.setImageResource(R.drawable.img1);
                   isImage1 = true; // 紀錄狀態變更
               }
           });
       }
   }
   

   程式碼解釋：

   • isImage1 是一個變數，用來記錄目前顯示的是否為第一張圖片。
   • imageView.setImageResource(R.drawable.image2)：這是更換 ImageView 圖片的關鍵指令。R.drawable.image2 就是 App 用來找到圖片的「身分證字號」。

4. 執行你的 App！

   • 再次點擊綠色的「▶」按鈕，執行你的 App。
   • 你會看到畫面顯示第一張圖片，當你點擊按鈕後，圖片就會切換到第二張。

已經成功讓 App 變得更加生動了！

今日總結

今天我們學會了：

• 如何使用 ImageView 元件，讓 App 顯示圖片。
• 如何將圖片檔案匯入到 res/drawable 資料夾。
• 如何使用 setImageResource() 方法，在程式中動態地切換圖片。

明天，我們要讓 App 的互動功能更進階。會學習 SeekBar 和 CheckBox，讓使用者可以用滑桿和打勾來控制 App 的功能！

明天見！