拖動(dòng)條 SeekBar

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

1. SeekBar 的特性

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

2. SeekBar 的基本用法

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

2.1 SeekBar 常用屬性

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

• android:max：
  拖拽進(jìn)度條的最大值。
• android:progress：
  拖拽進(jìn)度條的當(dāng)前進(jìn)度值。
• android:secondaryProgress：
  二級(jí)滑動(dòng)條的進(jìn)度值。
• android:thumb：
  拖拽滑塊的樣式資源，默認(rèn)通常是一個(gè)小圓點(diǎn)，大多數(shù)時(shí)候我們會(huì)自定義一個(gè)更好看的樣式。
• android:progressDrawable：
  自定義 SeekBar 的進(jìn)度顯示樣式，可以設(shè)置已走進(jìn)度和未走進(jìn)度的不同樣式。示例如下，編寫(xiě) 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”文件，編寫(xiě)圖像資源：

<?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 增加一個(gè)漸變的樣式，效果如下：

2.2 SeekBar 的常用 API

• getMax：
  獲取當(dāng)前 SeekBar 的最大進(jìn)度值
• getProgress：
  獲取當(dāng)前 SeekBar 的進(jìn)度值

2.3 SeekBar 回調(diào)接口

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

SeekBar.OnSeekBarChangeListener

接口中聲明了 3 個(gè)方法：

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

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

   參數(shù)解析：

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

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

   public void onStartTrackingTouch(SeekBar seekBar) 
   

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

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

   public void onStopTrackingTouch(SeekBar seekBar)
   

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

3. SeekBar 完整示例

以上就是 SeekBar 常用的屬性和 API 及回調(diào)的用法，接下來(lái)我們一起通過(guò)剛剛學(xué)習(xí)的知識(shí)實(shí)現(xiàn)一個(gè)簡(jiǎn)單功能。首先添加一個(gè) SeekBar 并為其添加回調(diào)接口實(shí)時(shí)監(jiān)聽(tīng)進(jìn)度變化，然后通過(guò)將進(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>

在以上布局中我們?cè)谄聊恢醒胩砑恿艘粋€(gè) SeekBar 并在其下方添加了一個(gè) TextView 用來(lái)展示 SeekBar 當(dāng)前的進(jìn)度。接著編寫(xiě) Java 代碼，主要完成兩個(gè)任務(wù)：

1. 獲取 SeekBar 的實(shí)例
2. 注冊(cè) SeekBar 的狀態(tài)監(jiān)聽(tīng)器，實(shí)時(shí)監(jiān)控 SeekBar 的進(jìn)度變化并通過(guò) 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) {

            }
        });
    }
}

通過(guò) Toast 觀察，我們?cè)谕献У耐瑫r(shí)，可以實(shí)時(shí)監(jiān)聽(tīng)到 SeekBar 的狀態(tài)，效果圖如下：

4. 小結(jié)

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