Android笔记之SeekBar自定义样式与监听

最新推荐文章于 2024-06-24 02:14:38 发布

原创最新推荐文章于 2024-06-24 02:14:38 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#SeekBar

android 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何在Android中自定义SeekBar的样式，包括控制进度条和指示点的样式，以及实现SeekBar的拖动监听功能。通过设置android:progressDrawable和android:thumb属性来自定义样式，并提供了一个完整的OnSeekBarChangeListener接口实现示例。

android中，在播放音乐或视频时，有一条进度条在显示，使用的就是SeekBar控件，我们先来看看效果：
这里写图片描述
第一个是原生的，第2，3个是自定义样式，很显然，原生的并不能实现很好看的效果，那么下面先来讲讲如何自定义SeekBar的样式：
1. 原生布局

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

很简单，与一般控件的使用没咋区别。
要自定义它的样式，那么我们首先得看系统定义的样式：
seekBar使用 android:progressDrawable属性控制进度条的样式，看系统是怎么定义的：
progress_horizontal.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>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
            />
        </shape>
    </item>
     <--这是第二进度条背景->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    <--这是第1进度条背景-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
</layer-list>

我们再来看看指示点的样式：
android:thumb这个属性就是制定指示点的样式：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/frame_gallery_thumb_selected" />
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/frame_gallery_thumb_pressed" />
    <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/frame_gallery_thumb_pressed" />
    <item android:drawable="@drawable/frame_gallery_thumb" />
</selector>

知道了系统是如何定义样式的，那么我们自定义样式，就简单了，只需要依照系统的样式，改掉其中的背景图片等即可。
2. 自定义样式

<SeekBar
        android:id="@+id/mySeekBar1"
        android:layout_marginTop="20dp"
        android:progress="50"
        android:max="100"
        android:maxHeight="2dp"
        android:progressDrawable="@drawable/my_seekbar"
        android:thumb="@drawable/seekbar_thumb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

控制进度条样式：
my_seekbar.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="#ff51495e" />
        </shape>
    </item>
    <!--第二进度颜色-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#ff51495e" />
            </shape>
        </clip>
    </item>
    <!--第1进度颜色-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#ffF80D0D" />
            </shape>
        </clip>
    </item>
</layer-list>

seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_pressed="false" android:drawable="@mipmap/seekbar_thumb_normal" />
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@mipmap/seekbar_thumb_pressed" />
    <item android:state_focused="false" android:state_pressed="true" android:drawable="@mipmap/seekbar_thumb_pressed" />
    <item android:drawable="@mipmap/seekbar_thumb_normal" />
</selector>

定义好了之后，引用即可。
如果我们的进度条是.9图片的话，可以这样定义：

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <--这里放的是.9图片-->
    <item android:id="@android:id/background" android:drawable="@mipmap/volumn_bg" />
    <item android:id="@android:id/secondaryProgress">
        <scale android:drawable="@mipmap/volumn_front" android:scaleWidth="100%" />
    </item>
    <item android:id="@android:id/progress">
        <scale android:drawable="@mipmap/volumn_primary" android:scaleWidth="100%" />
    </item>
</layer-list>

上面就是自定义SeekBar的样式了，具体颜色，图片啊，需要自己去制定。
3.SeekBar的监听处理
SeekBar支持拖动，我们只需实现OnSeekBarChangeListener接口即可，实现里面三个方法：
onProgressChanged() :当前进度发生变化的时候调用
onStartTrackingTouch():开始拖动的时候回调
onStopTrackingTouch():停止拖动的时候回调
下面附上一个完整demo：
布局：seekbar_test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

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

    <SeekBar
        android:id="@+id/mySeekBar1"
        android:layout_marginTop="20dp"
        android:progress="50"
        android:max="100"
        android:maxHeight="2dp"
        android:progressDrawable="@drawable/my_seekbar"
        android:thumb="@drawable/seekbar_thumb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <SeekBar
        android:id="@+id/mySeekBar2"
        android:layout_marginTop="20dp"
        android:progress="50"
        android:max="100"
        android:progressDrawable="@drawable/my_seekbar_drawable1"
        android:thumb="@drawable/seekbar_thumb1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         />


    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

SeekBarActivity.java

public class SeekBarActivity extends Activity implements SeekBar.OnSeekBarChangeListener {
    private SeekBar seekBar;
    private SeekBar mySeekBar1;
    private SeekBar mySeekBar2;
    private TextView tv1;
    private TextView tv2;
    private TextView tv3;

    private int currentProgress = 0;

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

        seekBar = (SeekBar)findViewById(R.id.seekBar);
        seekBar.setProgress(0);
        seekBar.setMax(100);
        seekBar.setOnSeekBarChangeListener(this);

        mySeekBar1 = (SeekBar)findViewById(R.id.mySeekBar1);
        mySeekBar1.setProgress(0);
        mySeekBar1.setMax(100);
        mySeekBar1.setOnSeekBarChangeListener(this);

        mySeekBar2 = (SeekBar)findViewById(R.id.mySeekBar2);
        mySeekBar2.setProgress(0);
        mySeekBar2.setMax(100);
        mySeekBar2.setOnSeekBarChangeListener(this);

        tv1 = (TextView)findViewById(R.id.tv1);
        tv2 = (TextView)findViewById(R.id.tv2);
        tv3 = (TextView)findViewById(R.id.tv3);
        //模拟播放
        new Thread(){
            @Override
            public void run() {
                for (; ; ) {
                    currentProgress++;
                    if (currentProgress > 100)
                        break;
                    SystemClock.sleep(500);
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            seekBar.setProgress(currentProgress);
                            mySeekBar1.setProgress(currentProgress);
                            mySeekBar2.setProgress(currentProgress);
                        }
                    });
                }
            }
        }.start();
    }



    @Override
    //当前进度发生变化的时候调用
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        tv1.setText("正在拖动");
        tv2.setText("当前进度：" + progress);
        if (100 == progress)
            tv3.setText("完成！");
    }

    @Override
    //开始拖动的时候调用
    public void onStartTrackingTouch(SeekBar seekBar) {
        tv1.setText("开始拖动");
    }

    @Override
    //停止拖动的时候调用
    public void onStopTrackingTouch(SeekBar seekBar) {
        tv1.setText("停止拖动");
    }
}