iT邦幫忙

2023 iThome 鐵人賽

DAY 17
1

前言
在本篇文章中,我們將深入探討Android中的SeekBar元件的使用方法。SeekBar是一個常見的UI元件,它通常用於控制應用程序中的數值範圍,例如音量調整、亮度調整等。我們將學習如何在Android Studio中使用SeekBar。SeekBar的運作方式和操作方法將在接下來的內容中進行詳細說明,讓你能夠輕鬆將它集成到你的Android應用程序中,以提供更好的用戶體驗。不論你是新手還是有一些Android開發經驗,這篇文章都將對你有所幫助。現在,讓我們開始探索SeekBar的奧秘吧!

功能
在這裡我們會做出有Dialog對話框彈出的小畫面,它在拉動時會跟著seekBar的拉動改變Dialog裡的值,另外我還有在用一個TextView來觀看SeekBar值的變動。

---activity_main---

<?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=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp">

        <TextView
            android:id="@+id/textView2"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:textSize="24sp"
            android:text="SeekBarDemo" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView"
                android:textSize="20sp"
                android:gravity="center"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:text="音量" />

            <SeekBar
                android:id="@+id/seekBar"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="8" />
        </LinearLayout>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:textSize="20sp"
            android:gravity="center"
            android:text="顯示數值:" />

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="7" />

    </LinearLayout>
</LinearLayout>

---MainActivity Class---

package com.example.seekbardemo;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ProgressDialog;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private SeekBar seekBar;
    private TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ById();//綁定元建
        SeekBarListener();//當進度條被拉動時的監聽狀況
    }
    //綁定元建
    private void ById(){
        seekBar = (SeekBar) findViewById(R.id.seekBar);
        textView = findViewById(R.id.textView3);
    }
    private void SeekBarListener() {
        //當進度條被拉動時的監聽狀況
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            ProgressDialog dialog = new ProgressDialog( MainActivity.this);

            //進度發生改變時會觸發
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //取值
                dialog.setProgress(progress);
                textView.setText("顯示數值:" + Integer.toString(progress));
            }

            //按住時會觸發
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                dialog.setMessage("目前音量");
                //關閉
                dialog.setCancelable(false);
                //設置進度條樣式 - 水平
                dialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
                dialog.setMax(100); // 設定進度條最大值

                // 顯示進度條
                dialog.show();
            }

            //停止拖曳時觸發事件
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                dialog.dismiss();

            }
        });
    }
}

MainActivity解說

  • ById():用來綁定元使用的
    //綁定元建
    private void ById(){
        seekBar = (SeekBar) findViewById(R.id.seekBar);
        textView = findViewById(R.id.textView3);
    }
  • SeekBarListener():用來監聽SeekBar拉動時的動作變化,可以用它來設定拉到的整數數值。
    • SeekBar的setOnSeekBarChangeListener方法用於設定一個監聽器,以便在SeekBar的狀態發生變化時觸發相應的事件。這個監聽器是一個介面,包含了三個回調方法,分別是onProgressChanged、onStartTrackingTouch和onStopTrackingTouch,這些方法用於處理不同的SeekBar操作情境。
      1. onProgressChanged方法:
      • 這個方法在SeekBar的進度發生改變時被觸發,例如當用戶拖動SeekBar時。它包含三個參數:
        • SeekBar seekBar:觸發事件的SeekBar對象。
        • int progress:當前SeekBar的進度值。
        • boolean fromUser:指示這個進度變化是否來自用戶的操作。如果是用戶操作引起的變化,則為true;否則為false。
        1. onStartTrackingTouch方法:
      • 這個方法在用戶開始拖動SeekBar時觸發。它包含一個參數:
        • SeekBar seekBar:觸發事件的SeekBar對象。
        • 通常,你可以在這個方法中執行一些初始化操作,或者顯示一個提示,以指示用戶正在進行拖動操作。
        1. onStopTrackingTouch方法:
      • 這個方法在用戶停止拖動SeekBar時觸發。它也包含一個參數:
        • SeekBar seekBar:觸發事件的SeekBar對象。
      • 你可以在這個方法中處理停止拖動後的操作,例如提交用戶的選擇或更新應用程序的狀態。
 seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            ProgressDialog dialog = new ProgressDialog( MainActivity.this);
            //進度發生改變時會觸發
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            }

            //按住時會觸發
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            //停止拖曳時觸發事件
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });

總結
總之,setOnSeekBarChangeListener方法允許你監聽並響應SeekBar的各種操作,從而使你的應用程序可以根據用戶的互動進行動態調整。這對於需要讓用戶調整數值範圍的應用場景非常有用,例如音量調整、亮度調整或其他類似的功能。


上一篇
Day16 - ViewPager2 + TabLayout
下一篇
Day18 - ProgressBar用法
系列文
Android studio使用過程與開發說明30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言