在第五天，你已經學會了如何使用 ImageView，讓 App 不只可以顯示文字，還能擁有豐富的圖片！這讓 App 變得更具視覺吸引力。

接下來應該要讓使用者有更多樣的互動方式，而不僅僅是按按鈕、打字或看圖。今天就要來學習兩種更進階的互動元件：

• SeekBar：可以讓使用者透過滑動來調整數值，就像是調整音量或亮度。
• CheckBox：可以讓使用者進行「是」或「否」的選擇，就像是打勾選單。

什麼是 SeekBar 與 CheckBox？

• SeekBar 的簡單比喻： 它就是 App 的 「音量調節器」。使用者可以拖動上面的小圓點，來改變一個數值的大小。
• CheckBox 的簡單比喻： 它就是 App 的 「打勾選單」。使用者可以點擊它來開啟或關閉一個功能。

實作時間：打造一個「文字效果 App」

今天，我們要製作一個 App：使用者可以透過滑動滑桿來改變文字大小，並透過勾選方塊來決定文字是否要顯示！

1. 修改你的 activity_main.xml

   • 打開你的「設計圖」檔案 activity_main.xml。
   • 在 Palette 面板中，找到 Common 分類。
   • 放入一個 TextView，ID 設為 myText，text 內容設為「Hello World」。
   • 放入一個 SeekBar，ID 設為 sizeSeekBar。
   • 放入一個 CheckBox，ID 設為 showCheckBox，text 內容設為「顯示文字」。
   • 你可以運用第三天學到的 ConstraintLayout，把這三個元件排得整齊一點。

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

   <androidx.constraintlayout.widget.ConstraintLayout ...>
   
       <TextView
           android:id="@+id/myText"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Hello World"
           android:textSize="20sp"
           ... />
   
       <SeekBar
           android:id="@+id/sizeSeekBar"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:max="100"  android:progress="20" ... />
   
       <CheckBox
           android:id="@+id/showCheckBox"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="顯示文字"
           android:checked="true" ... />
   
   </androidx.constraintlayout.widget.ConstraintLayout>
   

2. 修改你的 MainActivity.java

   • 打開你的「操作說明書」檔案 MainActivity.java。
   • 我們需要告訴 App，當滑桿被拖動、或打勾方塊被點選時，要做什麼事。

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

   import androidx.appcompat.app.AppCompatActivity;
   import android.os.Bundle;
   import android.widget.CheckBox; // 新增匯入 CheckBox
   import android.widget.SeekBar;  // 新增匯入 SeekBar
   import android.widget.TextView; // 新增匯入 TextView
   import android.view.View;
   
   public class MainActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           // 1. 找到所有元件
           TextView myText = findViewById(R.id.myText);
           SeekBar sizeSeekBar = findViewById(R.id.sizeSeekBar);
           CheckBox showCheckBox = findViewById(R.id.showCheckBox);
   
           // 2. 告訴 sizeSeekBar，當滑動時要做什麼事
           sizeSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
               @Override
               public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                   // progress 是滑桿的數值 (0-100)，我們用它來設定文字大小
                   myText.setTextSize(progress);
               }
   
               @Override
               public void onStartTrackingTouch(SeekBar seekBar) {
                   // 當使用者開始拖動滑桿時觸發
               }
   
               @Override
               public void onStopTrackingTouch(SeekBar seekBar) {
                   // 當使用者停止拖動滑桿時觸發
               }
           });
   
           // 3. 告訴 showCheckBox，當被勾選或取消時要做什麼事
           showCheckBox.setOnCheckedChangeListener((buttonView, isChecked) -> {
               if (isChecked) {
                   // 如果被勾選，就讓文字顯示出來
                   myText.setVisibility(View.VISIBLE);
               } else {
                   // 如果沒被勾選，就讓文字隱藏
                   myText.setVisibility(View.INVISIBLE);
               }
           });
       }
   }
   

   程式碼解釋：

   • sizeSeekBar.setOnSeekBarChangeListener(...)：這就是告訴 SeekBar，當它的數值改變時，要執行 onProgressChanged 裡面的程式碼。
   • myText.setTextSize(progress)：這行程式碼讓 TextView 的文字大小，隨著 SeekBar 的數值 (progress) 而改變。
   • showCheckBox.setOnCheckedChangeListener(...)：這是告訴 CheckBox，當它的勾選狀態改變時，要執行裡面的程式碼。
   • myText.setVisibility(View.VISIBLE) 和 myText.setVisibility(View.INVISIBLE)：這兩行程式碼分別用來控制元件的「可見性」，一個是顯示，一個是隱藏。

3. 執行你的 App！

   • 再次點擊綠色的「▶」按鈕，執行你的 App。
   • 試著拖動滑桿，你會看到「Hello World」的文字大小跟著改變！
   • 試著取消勾選「顯示文字」，文字就會消失！

今日總結

今天我們學會了：

• 如何使用 SeekBar 元件，讓使用者可以滑動來調整數值。
• 如何使用 CheckBox 元件，讓使用者可以進行「是」或「否」的選擇。
• 如何使用 setOnSeekBarChangeListener 和 setOnCheckedChangeListener 監聽這些元件的狀態改變。
• 如何使用 setVisibility 方法來顯示或隱藏元件。

明天是第一階段的總結！我們會將前面學到的所有知識，結合 CPE 考試的簡單題目，製作出一個可以比較數字大小的 App！

明天見！