android学习SeekBar的使用和自定义样式

SeekBar的主要属性和方法

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

SeekBar的事件

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

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

android学习SeekBar的使用和自定义样式_第1张图片

   "@+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 的样式文件看一看

 我们可以看到他的滑块是这个样式@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


<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


<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:一级进度条的颜色,即进度条当前已经滑过面积的颜色。


<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>

使用

 "@+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" />

android学习SeekBar的使用和自定义样式_第2张图片

你可能感兴趣的