自定义seekbar

---

前言

自定义seekbar样式

---

学习参考-感谢各位前辈！！

一个简单的自定义SeekBar样式

怎么在xml中自定义seekbar

seekbar设置thumb后在真机出现黑边（不透明区域）

该文章解决以下黑色背景情况

thumb 在进度条两端时不是中心停在端点

解决方法可行

Android中shape属性详解

画thumb参考

seekbar去掉thumb（小圆球）

android:thumb="@null"

解决SeekBar拖动过程中thumb周围产生的圆形阴影/白色圆圈

android shape绘制常用的形状

一、自定义seekbar

1、seekbar

res–>drawable–>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>
            <corners android:radius="15dp"/>
            <!--  描边颜色  -->
            <stroke android:color="@color/appThemeYellow"
                android:width="1dp"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="15dp"/>
                <!-- 进度条滑动时填充颜色 -->
                <solid android:color="@color/appThemeYellow"/>
            </shape>
        </clip>
    </item>

</layer-list>

2、thumb

res–>drawable–>thumb.xml(滑动条上的圆球)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="#EBC521"/>
    <!-- 球的宽高 -->
    <size android:width="18dp"
        android:height="18dp"/>
    <!-- 描边 -->
    <stroke android:color="@color/white"
        android:width="1dp"
        />
</shape>

二、使用显示自定义seekbar

在显示view的方法initView()中

		//创建滑动条
        SeekBar mSeekBar = new SeekBar(getContext());
        mSeekBar.setId(generateViewId());         // 设置id
        int mSeekBarId = mSeekBar.getId();        // 获取设置的id
        mSeekBar.setMax(getMaxSeekBarValue());    // 设置最大值-自定义大小-可直接写1000
        mSeekBar.setOnSeekBarChangeListener(createPositionSeekBarListener());// 创建监听         			  
		//显示自定义的滑动条
        mSeekBar.setProgressDrawable(getResources().getDrawable(R.drawable.seekbar));  
        //设置高度
        mSeekBar.setMaxHeight((int)(15*mDensity));	
        //去除-点击滑动时thumb的一圈阴影
        mSeekBar.setBackground(null);  
        //android:splitTrack="false"去除thumb的黑色背景
        mSeekBar.setSplitTrack(false); 
        //显示自定义的圆球
        mSeekBar.setThumb(getResources().getDrawable(R.drawable.thumb));
        //圆球的偏移量，不写的话圆球一半在seekbar最左边外，设置为0的话，起初滑动左边会有黑色背景--猜测是因为左边设置了圆角，于是这里设置为5便可以解决以上所说问题
        mSeekBar.setThumbOffset(5);//android:thumbOffset="0dp"
        //显示在布局中哪里以及显示的大小
        ConstraintLayout.LayoutParams startSeekBarLayout = new ConstraintLayout.LayoutParams(0,0);
        startSeekBarLayout.leftToLeft = contentBgViewId;
        startSeekBarLayout.rightToRight = contentBgViewId;
        startSeekBarLayout.topToBottom = whiteningImgId;
        startSeekBarLayout.matchConstraintPercentHeight = 0.1f;
        startSeekBarLayout.matchConstraintPercentWidth = 0.8f;
        startSeekBarLayout.topMargin = (int) (12 * mDensity);
        contentBgView.addView(mSeekBar,startSeekBarLayout);

---

总结

自定义seekbar需要注意的地方

		//显示自定义的滑动条
        mSeekBar.setProgressDrawable(getResources().getDrawable(R.drawable.seekbar));  
        //设置高度
        mSeekBar.setMaxHeight((int)(15*mDensity));	
        //去除-点击滑动时thumb的一圈阴影
        mSeekBar.setBackground(null);  
        //android:splitTrack="false"去除thumb的黑色背景
        mSeekBar.setSplitTrack(false); 
        //显示自定义的圆球
        mSeekBar.setThumb(getResources().getDrawable(R.drawable.thumb));
        //圆球的偏移量，不写的话圆球一半在seekbar最左边外，设置为0的话，起初滑动左边会有黑色背景--猜测是因为左边设置了圆角，于是这里设置为5便可以解决以上所说问题
        mSeekBar.setThumbOffset(5);//android:thumbOffset="0dp"