android SeekBar和ProgressBar的使用

原创已于 2025-08-26 11:03:25 修改 · 2.2w 阅读

24 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android SeekBar #SeekBar

于 2018-08-16 16:17:50 首次发布

android 专栏收录该内容

37 篇文章

订阅专栏

本文深入讲解了SeekBar控件的使用，包括主要属性如setMax、setProgress和setSecondProgress的设置，以及OnSeekBarChangeListener接口的三个关键事件：onProgressChanged、onStartTrackingTouch和onStopTrackingTouch。此外，还详细介绍了SeekBar的进度条和滑块样式的自定义方法。

SeekBar的基本使用

SeekBar的主要属性和方法

（1）setMax — 设置SeekBar的最大数值
（2）setProgress — 设置SeekBar的当前数值
（3）setSecondProgress—设置SeekBar的第二数值

SeekBar的事件

由于拖动条可以诶用户控制。所以需要对其事件监听，这就需要实现SeekBar.OnSeekBarChangeListner接口，此接口共需监听。

三个事件分别是：
数值改变----onProgressChanged
开始拖动----onStartTrackingTouch
停止拖动----onStopTrackingTouch

这里写图片描述

   <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:max="100"
        android:progress="50" />

   mSeekBar = (SeekBar) findViewById(R.id.seekbar);

        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Log.e("xyh", "onProgressChanged: " + progress + "");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Log.e("xyh", "onStartTrackingTouch: " + "开始拖动");
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Log.e("xyh", "onStartTrackingTouch: " + "结束拖动");
            }
        });

自定义SeekBar的进度条样式

改变进度条的样式

android：ProgressDrawable = “@drawable/seekBar_img”

改变滑块的样式

android：thumb = @drawable/selector_thumb_bar

进入SeekBar 的样式文件看一看

<style name="Widget.SeekBar">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">20dip</item>
        <item name="android:thumb">@android:drawable/seek_thumb</item>
        <item name="android:thumbOffset">8dip</item>
        <item name="android:focusable">true</item>
        <item name="android:mirrorForRtl">true</item>
    </style>

我们可以看到他的滑块是这个样式@android:drawable/seek_thumb，继续我们可以在\data\res\drawable下找到seek_thumb.xml这个文件，他就是滑块的样式

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_pressed" />

    <item android:state_focused="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_selected" />

    <item android:state_selected="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_selected" />

    <item android:drawable="@drawable/seek_thumb_normal" />

</selector>

可以看到他是一个选择器，这样，我们想要改变滑块的样式，只需要修改这个选择器即可。

滑块样式选择器：selector_thumb_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下状态 -->
    <item android:drawable="@drawable/shape_seekbar_btn" android:state_pressed="true" />

    <!-- 焦点状态 -->
    <item android:drawable="@drawable/shape_seekbar_btn" android:state_focused="true" />

    <!-- 选择状态 -->
    <item android:drawable="@drawable/shape_seekbar_btn" android:state_selected="true" />

    <!-- 默认状态 -->
    <item android:drawable="@drawable/shape_seekbar_btn" />
</selector>

滑块:shape_seekbar_btn

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

    <solid android:color="#ffffff" />

    <size
        android:width="26dp"
        android:height="26dp" />

    <stroke
        android:width="1dp"
        android:color="#33000000" />

</shape>

进度条样式

进度条总共需要设置三个属性的颜色：

@android:id/background：进度条的整体背景颜色。
@android:id/secondaryProgress：二级进度条的颜色
@android:id/progress：一级进度条的颜色，即进度条当前已经滑过面积的颜色。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dp" />
            <solid android:color="#C9C7C7" />  
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dp" />
                <solid android:color="@color/colorAccent" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dp" />
                <solid android:color="#11ce33" />
            </shape>
        </clip>
    </item>
</layer-list>

使用

 <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:max="100"
        android:maxHeight="3dp"
        android:minHeight="3dp"
        android:progress="30"
        android:progressDrawable="@drawable/seekbar_shape"
        android:secondaryProgress="70"
        android:thumb="@drawable/selector_thumb_bar" />

这里写图片描述

ProgressBar

ProgressBar横向进度条

style=“?android:attr/progressBarStyleHorizontal”
@style/Widget.AppCompat.ProgressBar.Horizontal 推荐

在这里插入图片描述

<!-- 在 XML 中直接使用 -->
<ProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:max="100"
    android:progress="50" />

在这里插入图片描述

设置ProgressBar颜色


    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_marginTop="100dp"
        android:progress="50"
        android:progressDrawable="@drawable/custom_progress_bar" />

custom_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#CCCCCC" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#A764FE" />
            </shape>
        </clip>
    </item>
</layer-list>

AppCompat 样式的自定义

<!-- 可以继承并自定义 -->
<style name="MyCustomProgressBar" parent="Widget.AppCompat.ProgressBar.Horizontal">
    <item name="android:progressDrawable">@drawable/custom_progress</item>
    <item name="android:minHeight">12dp</item>
    <item name="android:maxHeight">12dp</item>
</style>

<!-- 使用自定义样式 -->
<ProgressBar
    style="@style/MyCustomProgressBar"
    android:layout_width="match_parent"
    android:layout_height="12dp" />

在这里插入图片描述

自定义进度条示例

自定义进度条 Drawable

<!-- res/drawable/custom_progress_horizontal.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="4dp" />
            <solid android:color="#E0E0E0" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="4dp" />
                <solid android:color="?attr/colorPrimary" />
            </shape>
        </clip>
    </item>
</layer-list>

完整自定义示例

<style name="MyAppTheme" parent="Theme.AppCompat">
    <!-- 自定义进度条样式 -->
    <item name="android:progressBarStyleHorizontal">@style/MyProgressBarStyle</item>
</style>

<style name="MyProgressBarStyle" parent="android:Widget.ProgressBar.Horizontal">
    <item name="android:progressDrawable">@drawable/custom_progress</item>
    <item name="android:minHeight">8dp</item>
    <item name="android:maxHeight">8dp</item>
</style>