整体效果如下:
主要代码
1.attr中新增属性:
<!--渐变色号,用_分割-->
<attr name="bsb_colors" format="string"/>
<!--是否显示刻度,默认:true-->
<attr name="bsb_marks" format="boolean"/>
2.布局示例
<cos.mos.sb.widget.KBubbleSeekBar
android:id="@+id/sb2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
kosmos:bsb_bubble_text_color="#24d1b4"
kosmos:bsb_colors="#ffffffff_#ff24d1b4_#ff000000"
kosmos:bsb_marks="false"
kosmos:bsb_max="100"
kosmos:bsb_min="0"
kosmos:bsb_progress="20"
kosmos:bsb_second_track_color="#15398e"
kosmos:bsb_section_count="5"
kosmos:bsb_section_text_position="below_section_mark"
kosmos:bsb_show_progress_in_float="true"
kosmos:bsb_show_section_mark="false"
kosmos:bsb_show_section_text="true"
kosmos:bsb_show_thumb_text="true"
kosmos:bsb_thumb_color="#ffffff"
kosmos:bsb_thumb_text_color="#cabf18"
kosmos:bsb_touch_to_seek="true"
kosmos:bsb_track_color="#d1cccc"
kosmos:bsb_track_size="14dp"/>
3.KBubbleSeekBar 关键代码
public void sweepGradientInit() {
//渐变颜色.colors和pos的个数一定要相等
float[] pos = {0f, 0.5f, 1.0f};
linearGradient = new LinearGradient(0, 0, lySpace / 2, lySpace / 2, colors, pos, Shader.TileMode.REPEAT);
Matrix matrix = new Matrix();
linearGradient.setLocalMatrix(matrix);
}
说明:
-
控件的绘制顺序为:
onMeasure
–>onLayout
–>onDraw
-
这里用到
android
api
提供的线性渐变工具:LinearGradient
-
- 这里,LinearGradient的构造函数内传入的几个参数
(x0,y0)
: 起始渐变点坐标(x1,y1)
: 结束渐变点坐标colors[]
: 用于指定渐变的颜色值数组positions[]
: 与渐变的颜色相对应,取值是0-1的float类型TileMode tile
:指定控件区域大于指定的渐变区域时,空白区域颜色填充方法
关于渐变色的注意事项:
- 1.
colors[]
与positions[]
的长度要一一对应 - 2.
bsb_colors="#ffffffff_#ff24d1b4_#ff000000"
内的色值必须带alpha通道