Android控件與佈局——基礎控件SeekBar

        最近在用原生的控件和佈局繪製一些界面並使用，雖然這些都是Android基本知識，但是有的時候真的感覺力不從心，感覺有必要對Android常用的控件和佈局做一個系統的瞭解。後續一個月甚至更多的時間都會圍繞這個主題展開，畢竟這裏面還是有不少高級控件的，我也會盡量結合應用深入的進行了解。

上一篇：ProgressBar    下一篇：RatingBar

今天，我們的主題是SeekBar，下面看一下官方文檔的部分介紹：它是帶有可拖拽圖標的ProgressBar，用戶可以通過這個圖標的滑動來說設置當前的進度；不建議在它的兩側放置可以獲取焦點的控件。

* A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch
* the thumb and drag left or right to set the current progress level or use the arrow keys.
* Placing focusable widgets to the left or right of a SeekBar is discouraged.
* <p>
* Clients of the SeekBar can attach a {@link SeekBar.OnSeekBarChangeListener} to
* be notified of the user's actions.

下面就看一下它最原始的樣子：

 <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

這裏爲了展示效果，我特意把寬度設置成和父佈局同寬，在上面的官方API介紹中，我們還忘了翻譯一句，就是客戶端可以通過對其添加監聽事件來獲取進度，下面我們就來嘗試一下：

 progressSetting.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
               if(progress==0){
                   progressResult.setText("");
               }
               else {
                   progressResult.setText(progress+"%");
               }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

由上圖可知，我們通過對其添加監聽是可以通過回調實時獲取進度數據的，我們可以結合這個功能做一些參數設置的場景需求

在上面的介紹中我們知道，它是繼承至ProgressBar的，所以ProgressBar的屬性和功能它都是具備的，關於ProgressBar的詳細介紹可以參照上一篇博客。說到這裏，其實SeekBar我們常用的主要就是通過監聽實時獲取用戶可控的進度值是多少。下面我們就結合上一篇中說到的展示樣式簡單再延伸一下，在上一篇中，我們用到了：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <corners android:radius="12dp" />
            <solid android:color="#1E90DD" />
            <stroke android:width="5dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="12dp" />
                <solid android:color="#00CCEA" />
                <stroke android:width="5dp" />
            </shape>
        </clip>
    </item>
</layer-list>

這裏我們同樣通過屬性android:progressDrawable對其進行設置

 android:progressDrawable="@drawable/progress_bar_back"

樣式看起來稍微好一點點，當然你還可以設計出更好的效果出來。我們還可以通過其android:thumb屬性設置移動圖標的樣式：

 android:thumb="@drawable/seek_bar_thumb"

說實話，我這裏的圖標以及背景都沒有精心的繪製，所以較醜，在實際的使用過程中我們可以結合需求設計出各種好看的背景以及圖標來使用。下面給出邏輯和佈局代碼（很簡單），這個控件就算結束了。

佈局代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="aoto.com.commonwidgetandlayout.basic_widget.seekBar.SeekBarActivity">

    <TextView
        android:layout_marginTop="20dp"
        android:text="請調節溫度控制閥調節溫度："
        android:textColor="#000000"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <SeekBar
        android:progressDrawable="@drawable/progress_bar_back"
        android:thumb="@drawable/seek_bar_thumb"
        android:id="@+id/progress_setting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" />

    <TextView
        android:layout_marginTop="10dp"
        android:textColor="@color/colorPrimary"
        android:id="@+id/progress"
        android:textSize="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" />

</LinearLayout>

邏輯代碼：

package aoto.com.commonwidgetandlayout.basic_widget.seekBar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

import aoto.com.commonwidgetandlayout.R;

/**
 * @author why
 * @date 2019-5-24 18:21:07
 */
public class SeekBarActivity extends AppCompatActivity {

    TextView progressResult;
    SeekBar progressSetting;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_seek_bar);
        progressSetting=findViewById(R.id.progress_setting);
        progressResult=findViewById(R.id.progress);

        progressSetting.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
               if(progress==0){
                   progressResult.setText("");
               }
               else {
                   progressResult.setText("已調至"+progress+"℃");
               }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

在SeekBar的style屬性中，我們可以設置爲如下：

 <SeekBar
        android:layout_marginTop="15dp"
        android:id="@+id/seek_bar_discrete"
        style="@style/Widget.AppCompat.SeekBar.Discrete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10"
        android:progress="3" />

這是一種離散效果的SeekBar，演示效果如下：

這個之所以單獨拿出來說一下是因爲，在我們的佈局Design界面中有這樣一個單獨的選項SeekBar(Discrete)，同樣的，我們也可以對其進行進度數據回調監聽，這裏就不在演示了。

關於這個控件，還有一個用得較多的開源項目DiscreteSeekBar，效果圖如下：

關於使用方式就不多介紹了，git上介紹的已經很詳細了。

注：歡迎掃碼關注