拖動條 SeekBar

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

1. SeekBar 的特性

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

2. SeekBar 的基本用法

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

2.1 SeekBar 常用屬性

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

• android:max：
  拖拽進(jìn)度條的最大值。
• android:progress：
  拖拽進(jìn)度條的當(dāng)前進(jìn)度值。
• android:secondaryProgress：
  二級滑動條的進(jìn)度值。
• android:thumb：
  拖拽滑塊的樣式資源，默認(rèn)通常是一個小圓點(diǎn)，大多數(shù)時候我們會自定義一個更好看的樣式。
• android:progressDrawable：
  自定義 SeekBar 的進(jìn)度顯示樣式，可以設(shè)置已走進(jìn)度和未走進(jìn)度的不同樣式。示例如下，編寫 xml 代碼，設(shè)置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 資源目錄了下創(chuàng)建“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：
  獲取當(dāng)前 SeekBar 的最大進(jìn)度值
• getProgress：
  獲取當(dāng)前 SeekBar 的進(jìn)度值

2.3 SeekBar 回調(diào)接口

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

SeekBar.OnSeekBarChangeListener

接口中聲明了 3 個方法：

1. 當(dāng) SeekBar 的進(jìn)度發(fā)送變化時回調(diào)，用來實(shí)時監(jiān)聽進(jìn)度的變化。

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

   參數(shù)解析：

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

2. 當(dāng)進(jìn)度條開始被拖拽的時候回調(diào)，監(jiān)聽拖拽的起始事件。

   public void onStartTrackingTouch(SeekBar seekBar) 
   

   參數(shù)解析：
   seekbar： 被拖拽的 SeekBar 對象

3. 當(dāng)進(jìn)度條拖拽結(jié)束的時候回調(diào)，用來監(jiān)聽拖拽結(jié)束事件。

   public void onStopTrackingTouch(SeekBar seekBar)
   

   參數(shù)解析：
   seekBar： 被拖拽的 SeekBar 對象

3. SeekBar 完整示例

以上就是 SeekBar 常用的屬性和 API 及回調(diào)的用法，接下來我們一起通過剛剛學(xué)習(xí)的知識實(shí)現(xiàn)一個簡單功能。首先添加一個 SeekBar 并為其添加回調(diào)接口實(shí)時監(jiān)聽進(jìn)度變化，然后通過將進(jìn)度展示到 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 當(dāng)前的進(jìn)度。接著編寫 Java 代碼，主要完成兩個任務(wù)：

1. 獲取 SeekBar 的實(shí)例
2. 注冊 SeekBar 的狀態(tài)監(jiān)聽器，實(shí)時監(jiān)控 SeekBar 的進(jìn)度變化并通過 Toast 打印當(dāng)前進(jìn)度

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, "當(dāng)前進(jìn)度為 ： " + progress, Toast.LENGTH_LONG).show();
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

通過 Toast 觀察，我們在拖拽的同時，可以實(shí)時監(jiān)聽到 SeekBar 的狀態(tài)，效果圖如下：

4. 小結(jié)

本節(jié)學(xué)習(xí)了一個進(jìn)度條控件，可以 xml 設(shè)置其初始態(tài)、樣式等屬性，而在使用中通過 Java Api 結(jié)合業(yè)務(wù)需求修改各個屬性值，達(dá)到一個類似視頻進(jìn)度條的 UI 樣式。