拖動條 SeekBar

這一節要學的控件是 ProgressBar 的升級版，對于 ProgressBar 而言只能展示進度，而不能與用戶互動，也就是沒有接收用戶輸入的能力。而本節要學習的 SeekBar 是一種可以“Seek”的 ProgressBar，用戶不但可以通過 SeekBar 觀察到進度，還可以隨時手動修改進度，相信對此場景你一定不會陌生。沒錯，在視頻播放的場景用 SeekBar 實現在合適不過。

1. SeekBar 的特性

前面提到從功能上講 SeekBar 是 ProgressBar 的升級版，而通過觀察 SeekBar 的繼承關系，可以發現從代碼上來講它是繼承自 ProgressBar 的，所以 ProgressBar 所有的功能 SeekBar 都可以直接使用，另外 SeekBar 在 ProgressBar 的基礎之上增加了一個可拖拽的小滑塊，用戶可以通過拖拽隨時改變當前的進度值。適用于各種帶互動性質的進度相關場景，比如音頻、視頻等。

2. SeekBar 的基本用法

SeekBar 的用法比較簡單，也比較直觀。屬性和API基本都和 ProgressBar 類似，而由于需要接收用戶的輸入，所以在 ProgressBar 的基礎之上需要增加一個回調接口，用來監聽用戶的操作。

2.1 SeekBar 常用屬性

SeekBar 的屬性都非常好理解，當然也包含了上一節 ProgressBar 的所有屬性，這里挑幾個常用的做一下講解：

• android:max：
  拖拽進度條的最大值。
• android:progress：
  拖拽進度條的當前進度值。
• android:secondaryProgress：
  二級滑動條的進度值。
• android:thumb：
  拖拽滑塊的樣式資源，默認通常是一個小圓點，大多數時候我們會自定義一個更好看的樣式。
• android:progressDrawable：
  自定義 SeekBar 的進度顯示樣式，可以設置已走進度和未走進度的不同樣式。示例如下，編寫 xml 代碼，設置android:progressDrawable：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:max="100"
        android:progress="60"
        android:progressDrawable="@drawable/seekbar_progress" />

</FrameLayout>

在 drawable 資源目錄了下創建“seekbar_progress.xml”文件，編寫圖像資源：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:endColor="#055CEB"
                android:startColor="#f00"
                android:useLevel="true" />
        </shape>
    </item>

</layer-list>

這樣就可以為 SeekBar 增加一個漸變的樣式，效果如下：

2.2 SeekBar 的常用 API

• getMax：
  獲取當前 SeekBar 的最大進度值
• getProgress：
  獲取當前 SeekBar 的進度值

2.3 SeekBar 回調接口

SeekBar 提供了一個回調接口專門用于處理用戶的操作：

SeekBar.OnSeekBarChangeListener

接口中聲明了 3 個方法：

1. 當 SeekBar 的進度發送變化時回調，用來實時監聽進度的變化。

   public void onProgressChanged (SeekBar seekBar, int progresValue, boolean fromUser)
   

   參數解析：

   • seekBar： 進度變化的 SeekBar 對象
   • progressValue： 進度變化之后的進度值
   • fromUser： 是否是用戶操作，可用來區分進度是通過 API 變化的還是用戶拖拽變化的

2. 當進度條開始被拖拽的時候回調，監聽拖拽的起始事件。

   public void onStartTrackingTouch(SeekBar seekBar) 
   

   參數解析：
   seekbar： 被拖拽的 SeekBar 對象

3. 當進度條拖拽結束的時候回調，用來監聽拖拽結束事件。

   public void onStopTrackingTouch(SeekBar seekBar)
   

   參數解析：
   seekBar： 被拖拽的 SeekBar 對象

3. SeekBar 完整示例

以上就是 SeekBar 常用的屬性和 API 及回調的用法，接下來我們一起通過剛剛學習的知識實現一個簡單功能。首先添加一個 SeekBar 并為其添加回調接口實時監聽進度變化，然后通過將進度展示到 TextView 上，完整的布局代碼如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:max="100"
        android:progress="60"
        android:progressDrawable="@drawable/seekbar_progress" />
</RelativeLayout>

在以上布局中我們在屏幕中央添加了一個 SeekBar 并在其下方添加了一個 TextView 用來展示 SeekBar 當前的進度。接著編寫 Java 代碼，主要完成兩個任務：

1. 獲取 SeekBar 的實例
2. 注冊 SeekBar 的狀態監聽器，實時監控 SeekBar 的進度變化并通過 Toast 打印當前進度

package com.emercy.myapplication;

import android.app.Activity;

import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.Toast;

public class MainActivity extends Activity {

    private SeekBar seekBar;

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

        seekBar = findViewById(R.id.seekBar);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Toast.makeText(MainActivity.this, "當前進度為 ： " + progress, Toast.LENGTH_LONG).show();
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

通過 Toast 觀察，我們在拖拽的同時，可以實時監聽到 SeekBar 的狀態，效果圖如下：

4. 小結

本節學習了一個進度條控件，可以 xml 設置其初始態、樣式等屬性，而在使用中通過 Java Api 結合業務需求修改各個屬性值，達到一個類似視頻進度條的 UI 樣式。