安卓Seekbar自定义样式的开发

安卓SeekBar自定义样式

好久没写博客了， 最近项目需要用到自定义滑动进度条，然后发现自己并不熟悉，在此记录一下吧，ok ，归入正题，如下效果图：

左右两侧的加减号是我添加的图标，绘制自定义进度条首先如下添加样式seekbar_style.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="10dp" />
            <solid android:color="@color/gray" />
        </shape>
    </item>
    <!-- 进度颜色 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <!-- 圆角程度 和 进度条颜色 -->
                <corners android:radius="10dp" />
                <solid android:color="@color/theme_color" />
            </shape>
        </clip>
    </item>

</layer-list>

背景颜色是指进度条没有滑到的背景色，进度颜色不用解释了，哈哈哈 ok，然后就是 我的布局如下：

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp">

        <!--        减号图标-->
        <ImageView
            android:id="@+id/iv_decrease"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_centerVertical="true"
            android:src="@mipmap/seekbar_decrease"></ImageView>

        <SeekBar
            android:id="@+id/seekbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_toLeftOf="@+id/iv_add"
            android:layout_toRightOf="@+id/iv_decrease"
            android:max="100"
            android:maxHeight="10dp"
            android:minHeight="10dp"
            android:progress="1"
            android:progressDrawable="@drawable/seekbar_style"
            android:splitTrack="false"
            android:thumb="@drawable/bg_shape_cicircle_20dp"></SeekBar>

        <!--        加号图标-->
        <ImageView
            android:id="@+id/iv_add"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@mipmap/seekbar_add"></ImageView>

    </RelativeLayout>

</LinearLayout>

这会给解释一下里面东西：
两个ImageView是加减进度的按钮，不用解释了， 然后就是 SeekBar的属性：
android:max=“100” 是进度条最大值，android:progress=“1” 是当前设置的进度值
android:maxHeight=“10dp” 和 android:minHeight=“10dp” 代表了进度条的粗细程度，
android:progressDrawable=“@drawable/seekbar_style” 代表了进度条的自身样式，备注：不包含滑动的那个圆形块，
android:thumb=“@drawable/bg_shape_cicircle_20dp” 代表的是滑动进度条时候 的圆形块，是写了一个style样式如下：

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

    <gradient
        android:endColor="@color/theme_color"
        android:startColor="@color/theme_color"></gradient>

    <size
        android:width="20dp"
        android:height="20dp"></size>
    
</shape>

差点忘了 还有这个属性：
android:splitTrack=“false” 代表是如下两图对比就能发现了：


仔细看会发现滑动圆块周围白色背景，对，当时我也是很苦恼，找不到原因，就是这个属性，添加这个属性 设置为false就行了

最后贴上代码：

public class ElevenActivity extends AppCompatActivity {
    
    

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

        SeekBar seekBar=findViewById(R.id.seekbar);
        ImageView iv_decrease=findViewById(R.id.iv_decrease);
        ImageView iv_add=findViewById(R.id.iv_add);

//        seekBar.getThumb().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_ATOP);//设置滑块颜色、样式
//
//        seekBar.getProgressDrawable().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_ATOP);//设置进度条颜色、样式


        iv_decrease.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                //减少
                seekBar.setProgress(seekBar.getProgress()-10);
            }
        });

        iv_add.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                //增加
                seekBar.setProgress(seekBar.getProgress()+10);

            }
        });

    }

}

ok 这是我的写法，大家还可以搜其他的方法，希望可以帮到大家。