Android 自定义 SeekBar

转载请注明出处：http://blog.youkuaiyun.com/htwhtw123/article/details/78005899
自定义颜色大小形状的SeekBar和使用图片的SeekBar。其中，自定义颜色大小形状的SeekBar，自定义滑块颜色形状，滑轨滑过过后的颜色，滑过之前的颜色；使用图片的SeekBar之前三项都是直接使用图片。Demo放在github上：点击跳转

1.自定义颜色大小形状的SeekBar

新建在drawable下，新建seek_bar_progress1.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"
        android:height="15dp"
        android:gravity="center">
        <shape>

            <solid android:color="#999"/>
        </shape>
    </item>

    <!--滑过部分滑轨颜色-->
    <item
        android:id="@android:id/progress"
        android:height="15dp"
        android:gravity="center">

        <clip>
            <shape>

                <solid android:color="#600f"/>
            </shape>
        </clip>
    </item>
</layer-list>

在drawable文件夹下，新建seek_bar_thumb.xml，定义滑块颜色，这里没有去定义形状，而默认为方形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--设置滑块大小和颜色-->
    <size
        android:width="20dp"
        android:height="30dp"/>
    <solid android:color="#60f0" />
</shape>

在布局文件在中加入SeekBar控件，并在其中添加以下代码，progressDrawable和thumb属性可以在java代码中设置，在写在后面MainActivity注释中。progressDrawable定义滑轨，thumb定义滑块，用到刚刚创建的两个文件。

<SeekBar
        android:id="@+id/seekBar1"
        android:progressDrawable="@drawable/seek_bar_progress1"
        android:thumb="@drawable/seek_bar_thumb"
        ......
        />

在MainActivity的onCreate方法，中添加如下代码：

SeekBar seekBar1= (SeekBar) findViewById(R.id.seekBar1);
        TextView textView= (TextView) findViewById(R.id.textView);
        seekBar1.setMax(99);//设置最大进度(默认100)，这里的进度为0~10，可以在布局文件中设置
        seekBar1.setProgress(22);//设置开始时的进度，默认为0，可以在布局文件中设置
        textView.setText(seekBar1.getProgress()+"");//获取进度
       // seekBar1.setThumb(getDrawable(R.drawable.seek_bar_thumb));//设置滑块，可在布局文件中设置
       // seekBar1.setProgressDrawable(getDrawable(R.drawable.seek_bar_progess));//设置滑轨，可在布局文件中设置

        seekBar1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                //当滑块位置改变i的值时调用
                textView.setText(i+"");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                //点击滑块，并且开始滑动时调用
                Toast.makeText(MainActivity.this, "start slide", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                //松开滑块时调用
                Toast.makeText(MainActivity.this, "stop slide", Toast.LENGTH_SHORT).show();
            }
        });

效果如下：

2.使用图片定义SeekBar

跟上面讲的自定义颜色大小形状的SeekBar差别不大，主要是要修改seek_bar_progress 和SeekBar的thumb属性。图片材料：

1.在布局文件中改SeekBar的属性为目标图片，即可将seekBar的滑块设置成目标图片,seek_bar_progress 依旧定义滑轨，之后讲怎么改。

<SeekBar
android:progressDrawable="@drawable/seek_bar_progress2"
        android:thumb="@drawable/seek_bar_thumb2"
        ....../>

2.在drawable文件加下，新建seek_bar_progress2.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">
        <bitmap
            android:gravity="center"
            android:src="@drawable/seek_bar_progress_img_1"/>
    </item>
    <!--滑过部分滑轨图片-->
    <item
        android:id="@android:id/progress">
        <clip>
            <bitmap
                android:width="500dp"
                android:src="@drawable/seek_bar_progress_img_2">
            </bitmap>
        </clip>
    </item>
</layer-list>

效果：