Hướng dẫn sử dụng Android SeekBar
Công ty Vĩnh Cửu tuyển dụng lập trình viên Java

1- SeekBar là gì?

Một SeekBar là một phần mở rộng của 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 mức độ tiến trình 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 để duy 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.
Thiết kế giao diện ứng dụng:
  • SLIDER:
Giao diện ứng dụng:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="org.o7planning.seekbardemo.MainActivity">

    <SeekBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:max="100"
        android:progress="15"
        android:indeterminate="false" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Medium Text"
        android:id="@+id/textView"
        android:layout_below="@+id/seekBar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="35dp"
        android:layout_alignRight="@+id/seekBar"
        android:layout_alignEnd="@+id/seekBar"
        android:gravity="center" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=">>"
        android:id="@+id/button_increase"
        android:layout_marginTop="69dp"
        android:layout_below="@+id/textView"
        android:layout_toRightOf="@+id/button_decrease"
        android:layout_toEndOf="@+id/button_decrease" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&lt;&lt;"
        android:id="@+id/button_decrease"
        android:layout_marginLeft="116dp"
        android:layout_marginStart="116dp"
        android:layout_alignTop="@+id/button_increase"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>
MainActivity.java
package org.o7planning.seekbardemo;

import android.support.v7.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.textView.setText("Progress: " + seekBar.getProgress() + "/" + seekBar.getMax());
      //
      this.seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
          int progress = 0;

          // Khi giá trị progress thay đổi.
          @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();
          }

          // Khi người dùng bắt đầu cử chỉ kéo thanh gạt.
          @Override
          public void onStartTrackingTouch(SeekBar seekBar) {
              Log.i(LOGTAG, "Started tracking seekbar");
              Toast.makeText(getApplicationContext(), "Started tracking seekbar", Toast.LENGTH_SHORT).show();
          }

          // Khi người dùng kết thúc cử chỉ kéo thanh gạt.
          @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);
       }
     
   }

   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);
       }
      
   }

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

3- Tùy biến SeekBar

  • TODO