Hướng dẫn và ví dụ Android SeekBar

Xem thêm các chuyên mục:

Các hướng dẫn lập trình Android

SeekBar là gì?
Ví dụ SeekBar
Tùy biến SeekBar
Phụ lục: Thiết kế giao diện

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- SeekBar là gì?

Một SeekBar là một lớp mở rộng từ ProgressBar nó có thêm một cái cần gạt. Người dùng có thể chạm vào cần gạt và kéo sang trái hoặc phải để thiết lập giá trị của tiến trình (progress) hoặc sử dụng các phím mũi tên để di chuyển cần gạt. Bạn cũng có thể chạm vào thanh bên trái hoặc bên phải cần gạt để di chuyển nó, mặc dù không được khuyến khích.

Dưới đây là một số mẫu SeekBar:

2- Ví dụ SeekBar

Tạo mới một project có tên SeekBarDemo.

File > New > New Project > Empty Activity
- Name: SeekBarDemo
- Package name: org.o7planning.seekbardemo
- Language: Java

Giao diện của ứng dụng khá đơn giản, nó giống với hình minh họa dưới đây, nếu bạn quan tâm tới các bước thiết kế giao diện này hãy xem phần phụ lục phía cuối bài viết.

activity_main.xml


<?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="27dp"
        android:layout_marginStart="19dp"
        android:layout_marginLeft="19dp"
        android:layout_marginTop="43dp"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="24dp"
        android:layout_marginStart="22dp"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="34dp"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/seekBar" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="1dp"
        android:layout_marginRight="1dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView">

        <Button
            android:id="@+id/button_decrease"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="-" />

        <Button
            android:id="@+id/button_increase"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="+" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java


package org.o7planning.seekbardemo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private SeekBar seekBar;
    private TextView textView;
    private Button buttonDecrease;
    private Button buttonIncrease;

    private static int DELTA_VALUE = 5;

    private static final String LOGTAG = "SeekBarDemo";


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

        //
        this.seekBar = (SeekBar) findViewById(R.id.seekBar );
        this.textView = (TextView) findViewById(R.id.textView);


        this.buttonDecrease= (Button) findViewById(R.id.button_decrease);
        this.buttonIncrease= (Button) findViewById(R.id.button_increase);

        this.seekBar.setMax(100);
        this.seekBar.setProgress(15);

        this.textView.setText("Progress: " + seekBar.getProgress() + "/" + seekBar.getMax());
        //
        this.seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            int progress = 0;

            // When Progress value changed.
            @Override
            public void onProgressChanged(SeekBar seekBar, int progressValue, boolean fromUser) {
                progress = progressValue;
                textView.setText("Progress: " + progressValue + "/" + seekBar.getMax());
                Log.i(LOGTAG, "Changing seekbar's progress");
                Toast.makeText(getApplicationContext(), "Changing seekbar's progress", Toast.LENGTH_SHORT).show();
            }

            // Notification that the user has started a touch gesture.
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Log.i(LOGTAG, "Started tracking seekbar");
                Toast.makeText(getApplicationContext(), "Started tracking seekbar", Toast.LENGTH_SHORT).show();
            }

            // Notification that the user has finished a touch gesture
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                textView.setText("Progress: " + progress + "/" + seekBar.getMax());
                Log.i(LOGTAG, "Stopped tracking seekbar");
                Toast.makeText(getApplicationContext(), "Stopped tracking seekbar", Toast.LENGTH_SHORT).show();

            }
        });

        this.buttonDecrease.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                decreateProgress();
            }
        });

        this.buttonIncrease.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                increateProgress();
            }
        });
    }


    private void decreateProgress()  {
        int progress= this.seekBar.getProgress();
        if(progress - DELTA_VALUE < 0)  {
            this.seekBar.setProgress(0);
        } else  {
            this.seekBar.setProgress(progress - DELTA_VALUE);
        }
        textView.setText("Progress: " + seekBar.getProgress()+ "/" + seekBar.getMax());
    }

    private void increateProgress()  {
        int progress= this.seekBar.getProgress();
        if(progress + DELTA_VALUE > this.seekBar.getMax())  {
            this.seekBar.setProgress(0);
        }else {
            this.seekBar.setProgress(progress + DELTA_VALUE);
        }
        textView.setText("Progress: " + seekBar.getProgress()+ "/" + seekBar.getMax());
    }

}

Chạy ứng dụng của bạn: