iT邦幫忙

2025 iThome 鐵人賽

DAY 12
0

今天來介紹SeekBar,那我們開始吧.w.

什麼是 SeekBar?

SeekBar 是一個在 Android 開發中相當常見的 UI 元件,它是一個可拖曳的進度條,允許使用者透過滑動來選擇一個範圍內的數值。最常見的應用場景就是調整系統音量或螢幕亮度

https://ithelp.ithome.com.tw/upload/images/20250926/20176154fNXxgqZuI8.png

在XML中定義SeekBar

屬性 說明 範例
android:max 設定SeekBar可選擇的最大數值 android:max="100"
android:progress 設定SeekBar的初始預設數值 android:progress="20"
android:secondaryProgress 設定次要進度的初始值 android:secondaryProgress="50"
android:thumb 設定拖曳鈕的外觀 android:thumb="@drawable/……"

在Java中監聽SeekBar的變化

為了讓 SeekBar 能夠與應用程式互動,需要設定一個監聽器 (OnSeekBarChangeListener) 來捕捉使用者的操作,下面是它的三個實作:

  1. onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
    • 觸發時機:當進度條的數值發生任何改變時
    • 功能:在這裡更新 UI,例如顯示目前的數值
    • 說明:
      • seekBar:觸發事件的SeekBar物件
      • progress:目前的進度值(0到你設定的max 之間)
      • fromUser:如果是使用者操作造成的改變,此值為true;如果是透過程式碼改變,則為false
  2. onStartTrackingTouch(SeekBar seekBar)
    • 觸發時機:當使用者手指開始接觸並按住滑塊時
    • 功能:給予使用者一些視覺或震動回饋,例如顯示一個提示訊息
  3. onStopTrackingTouch(SeekBar seekBar)
    • 觸發時機:當使用者的手指離開滑塊時
    • 功能:這是執行最終操作的最佳時機。例如在使用者確定音量後,才去設定系統音量,可以避免在拖曳過程頻繁地變更設定

範例:

activity_main.xml

<SeekBar
        android:id="@+id/seekBar"
        android:layout_width="0dp"
        android:layout_height="75dp"
        android:max="100"
        android:progress="0"
        android:secondaryProgress="50"
        android:thumb="@drawable/你設定的外觀檔名" />
        
<TextView
        android:id="@+id/value_main_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="目前數值:0/100"
        android:textSize="30sp"/>
        
<TextView
        android:id="@+id/secvalue_main_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="次條數值:"
        android:textSize="20sp"/>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private TextView valueTextView, secValueTextView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SeekBar valueSeekBar = findViewById(R.id.seekbar_main_skb);
        valueTextView = findViewById(R.id.value_main_tv);
        secValueTextView = findViewById(R.id.secvalue_main_tv);

        valueSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @SuppressLint("SetTextI18n")
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                valueTextView.setText("目前數值:" + progress + " /100 ");
                secValueTextView.setText("次條數值:" + seekBar.getSecondaryProgress() + " /100 ");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });
    }
}

今天先到這,明天會來介紹用來轉換頁面的Intent,明天見d('∀')

https://ithelp.ithome.com.tw/upload/images/20250926/20176154WBiQzNra4H.png


上一篇
Day11 自訂UI 元件外觀
系列文
Android 菜鳥30天從0到1的學習紀錄12
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言