Android自定义梯形,自定义View_自定义SeekBar实现梯形渐变效果

前几天，朋友找我帮忙实现一个这样的效果，如下：

当时我看到这个效果图，想了一下大概的思路如下：

1、自定义View继承SeekBar，这样方便使用SeekBar的一些自带功能，比如触摸事件及回调等；

2、蓝色和灰色的进度条，自己实现，用Path这个类来绘制；

3、圆形的滑块使用自带属性android:thumb=""添加一张图片即可。

按照这个思路最终还是实现了这样的一个效果，效果动图如下：

雏形

我们先使用SeekBar控件，滑块使用自定义的图片，进度条置空@null，待会进度条效果我们自己来实现，代码及预览图如下：

分析

OK，到目前为止就需要我们自己来完成进度条的绘制了，绘制之前我们先分析一下该如何绘制。因为滑块有一定的宽度，假设是30dp，那么当滑块位于起始位置的时候，它的中心位置距离左边界的距离就是15dp，那么我们在绘制进度条的时候就是从这个位置开始的，也就是说起始位置x坐标是在半个滑块宽度的位置。终点位置同理，为什么要这样呢？因为如果不考虑这个因素从0坐标开始绘制的话将是这样的效果，两边多出来的很丑有木有？

所以，我们需要考虑这个细节问题，让起始位置和终点位置都对齐滑块的中心位置。这样，假如SeekBar控件的宽度是width，那么进度条的宽度就是width-滑块宽度。

初始化

初始化画笔等对象：

setMax(MAX_VALUE);

//获取滑块宽度的一半

sliderHalf = (float) (mContext.getResources().getDimension(R.dimen.sliderWidth) / 2.0);

paintDefault = new Paint();

paintDefault.setAntiAlias(true);

paintDefault.setColor(ContextCompat.getColor(mContext, R.color.seekBarBackgroundColor));

paintDefault.setStyle(Paint.Style.FILL);

paintFore = new Paint();

paintFore.setAntiAlias(true);

paintFore.setColor(ContextCompat.getColor(mContext, R.color.seekBarForegroundColor));

paintFore.setStyle(Paint.Style.FILL);

初始化Path及相关坐标：

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

mViewWidth &