Day9-Android新手筆記-SeekBar與SeekBar樣式客製化

2022 iThome 鐵人賽

DAY 9

Mobile Development

Android studio 30天新手筆記系列第 9 篇

14th鐵人賽

tsanyi0119

團隊nutc imac 老扛寶

2022-09-20 13:12:27

2258 瀏覽

分享至

SeekBar

SeekBar給我的感覺很像YouTube播放器的進度條，SeekBar繼承至ProgressBar，所以ProgressBar提供的許多屬性、方法可以在SeekBar使用。SeekBar相較ProgressBar多了一個可拖曳的拖拉桿。本篇前半段將介紹SeekBar的基礎屬性及語法；後半段將針對客製化的部分介紹。

SeekBar基本屬性介紹

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
    
    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="80"
        android:thumb="@drawable/volume"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

我們針對SeekBar的屬性解說

    android:max="100"
    android:progress="50"
    android:secondaryProgress="80"
    android:thumb="@drawable/volume"

android:max="100" 用於設定整條SeekBar的最大值
android:progress="50" 用於設定初始化時SeekBar的值
android:secondaryProgress="80" 用於設定次級SeekBar的值
android:thumb="@drawable/volume" 用於對拖拉桿設定客製圖片

如果把SeekBar以YouTube播放器的型態來解釋，progress會對應紅色進度條，secondaryProgress會對應灰色緩衝條，而thumb則可想像成當前進度的那個紅點。

SeekBar Java程式碼

public class MainActivity extends AppCompatActivity {

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

        textView = findViewById(R.id.textView);
        seekBar = findViewById(R.id.seekBar);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                //當拖動SeekBar造成SeekBar位置改變時執行
                textView.setText(i+"/100");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                //按下SeekBar時執行
                Toast.makeText(MainActivity.this,"按下SeekBar提示",Toast.LENGTH_LONG).show();

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                //放開SeekBar時執行
                Toast.makeText(MainActivity.this,"放開SeekBar提示",Toast.LENGTH_LONG).show();
            }
        });
    }
}

接下來將解釋程式碼作用

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                //當拖動SeekBar造成SeekBar位置改變時執行
                textView.setText(i+"/100");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                //按下SeekBar時執行
                Toast.makeText(MainActivity.this,"按下SeekBar提示",Toast.LENGTH_LONG).show();

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                //放開SeekBar時執行
                Toast.makeText(MainActivity.this,"放開SeekBar提示",Toast.LENGTH_LONG).show();
            }
        });

SeekBar.setOnSeekBarChangeListener提供三個狀態的回傳，分別為onProgressChanged、onStartTrackingTouch、onStopTrackingTouch。

onProgressChanged，只要SeekBar的值有變動時就會觸發，並且會回傳SeekBar當前的值。
onStartTrackingTouch，會在按下SeekBar時觸發
onStopTrackingTouch，會在放開SeekBar時觸發

而這個範例程式碼會在SeekBar值有變動時，將SeekBar的值顯示於TextView上；於SeekBar被按下即放開時，分別顯示兩組Toast訊息。

SeekBar 客製化

SeekBar客製化可分為四個主要部分，一是背景(background)，二是主SeekBar(progress)，三是次級SeekBar(secondaryProgress)，四是拖拉桿的圖示。以上的設定方式都相當類似，主要透過XML的撰寫去實現客製化的不同風格。
先在Drawable建立一個XML檔，這邊為了方便解說將檔名設定為seekbar_style.xml，第一次使用的朋友也可以先這樣設定。接下來附上基本的XML檔:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    //SeekBar的背景
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#4F4F4F"/>
        </shape>
    </item>

    //主要進度條的背景
    <item android:id="@android:id/progress" >
        <clip>
            <shape>
                <gradient
                    android:angle="45"
                    android:centerX="35%"
                    android:centerColor="#47A891"
                    android:startColor="#E8E8E8"
                    android:endColor="#000000"
                    android:type="linear"
                />
            </shape>
        </clip>
    </item>

    //次要進度條的背景
    <item android:id="@android:id/secondaryProgress" >
        <clip>
            <shape>
                <gradient
                    android:angle="45"
                    android:centerX="35%"
                    android:centerColor="#47A891"
                    android:startColor="#E8E8E8"
                    android:endColor="#000000"
                    android:type="linear"
                    />
            </shape>
        </clip>

    </item>

</layer-list>

這邊主要用於設定背景(background)、主SeekBar(progress)、次級SeekBar(secondaryProgress)的客製化效果，需特別注意到item標籤後方接的android:id=""裡面所對應的ID原則上不做更動，避免發生錯誤。此外我們在設定客製化時有用到gradient標籤，關於這個標籤的詳細用法可以到我介紹Buotton樣式文章處，那邊會有許多資訊。

<SeekBar
        android:id="@+id/seekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/seekbar_style"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

seekbar_style.xml設定完成後，我們到View的XML檔找到SeekBar，並使用「android:progressDrawable="@drawable/seekbar_style"」將我們設定的客製化XML與SeekBar綁定。

接下來將介紹如何設定拖拉桿圖示
首先在Drawable下加入一張圖片，這邊我使用Android Studio內建的小圖示作範例，如果是第一次使用的朋友也可以跟我一樣做測試。只要在在SeekBar處加上「android:thumb="@drawable/你的圖片名稱"」，即可完成圖示設定。此外，還有一個極其重要的一點您可以留意，諾是您的圖片背景是透明的請在SeekBar處加上「android:splitTrack="false"」，這樣才會使您的圖示背景保持透明。完整的SeekBar XML設定如下：

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/seekbar_style"
        android:splitTrack="false"
        android:thumb="@drawable/test"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />