在 Android 中创建自定义 SeekBar

SeekBar可以理解为Android中ProgressBar的扩展。您只需拖动 SeekBar 上的拇指并将其向后或向前拖动并存储更改的当前进度值。 SeekBar广泛用于不同的应用程序，例如音频播放器视频播放器等。您可以实现 Andriod 提供的传统SeekBar 。在本文中，我们将看到如何自定义 android SeekBar。为了首先创建自定义的 SeekBar，我们将为此设计我们的 SeekBar 和搜索栏的拇指，我们将在 drawable 中添加布局文件。我们也可以将图片用作拇指，而不是创建布局，我们只需将图片放在可绘制的其余部分上即可。

分步实施

第 1 步：创建一个新项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。请注意，选择Java作为编程语言。

第2步：

等待一段时间，构建完成后，您将看到一个MainActivity。 Java文件和 res ->布局中名为activity_main.xml 的 XML 文件。我们将创建我们的自定义 SeekBar 并在我们的activity_main.xml 上实现它。

第 3 步：

现在右键单击drawable -> new -> drawable resource file ，将文件命名为custom_seekbar.xml和指定 Root 元素为layer-list ->点击 OK。将创建一个新文件custom_seekbar.xml

第四步：

现在在custom_seekbar.xml中的layer-list添加一个项目并给它一个形状。指定 SeekBar 的颜色、高度和角。此外，添加另一个相同形状和大小的项目，但您可以更改颜色，SeekBar 拇指的左侧部分将是这种颜色。

第 5 步：

现在又点击drawable -> new -> drawable resource file，将文件命名为thumb.xml并指定Root 元素为shape ->点击OK。将创建一个新文件thumb.xml 。在这个文件中给出了拇指的高度、半径和颜色。这些事情是可以改变的。这完全取决于你想如何设计。

第 6 步：

现在转到activity_main.xml创建一个布局并在布局内添加一个SeekBar。指定 SeekBar 的高度宽度和要使用的最大进度设置进度为 0。

android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/thumb" 
android:max="50"
android:progress="0"

这将在activity_main.xml中创建一个自定义的 Seekbar。

第 7 步：

现在打开MainActivity。 Java类声明 SeekBar 和 TextView 的对象，在 onCreate 方法中使用 findViewById() 方法初始化这两个对象。执行将保存进度值的 SeekBar 更改侦听器的事件，并通过使用此事件在 TextView 中设置进度值。

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // increment or decrement on process changed
            // increase the textsize
            // with the value of progress
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                value.setText(progress+"/"+"50");

                
            }..

第 8 步

构建并运行应用程序。将拇指放在 Seekbar 上并向前或向后移动它会显示该过程。

上述实现的代码如下：

下面是MainActivity 的代码。 Java文件。代码中添加了注释以更详细地理解代码。

Java

package com.abhi.customseekbar;
  
import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
import android.view.View;
import android.widget.SeekBar;
import android.widget.TextView;
  
public class MainActivity extends AppCompatActivity {
     SeekBar seekBar;
     TextView value;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // initialize the seekBar object
        seekBar=findViewById(R.id.seekbar); 
        value=findViewById(R.id.progress);
        // calling the seekbar event change listener
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // increment or decrement on process changed
            // increase the textsize
            // with the value of progress
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                value.setText(progress+"/"+"50");             
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                // This method will automatically
                // called when the user touches the SeekBar
            }
  
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                // This method will automatically
                // called when the user
                // stops touching the SeekBar
            }
        });
    }
}

XML

下面是activity_main.xml文件的代码。

XML

下面是custom_seekbar.xml文件的代码。

XML

下面是thumb.xml文件的代码。

XML

输出：

项目链接：点我