• 自定義SeekBar，
• 進度變化由可視化氣泡樣式呈現(xiàn)，定制化程度較高
• 實現(xiàn)帶刻度的進度條實現(xiàn)顏色漸變效果
• 源碼下載：Github ，碼云
• Github太慢，所以只在碼云上持續(xù)更新

整體效果如下：

在這里插入圖片描述

基于woxingxiao的BubbleSeekBar修改

主要代碼

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 關(guān)鍵代碼

public void sweepGradientInit() {
        //漸變顏色.colors和pos的個數(shù)一定要相等
        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的構(gòu)造函數(shù)內(nèi)傳入的幾個參數(shù)
  • (x0,y0): 起始漸變點坐標
  • (x1,y1): 結(jié)束漸變點坐標
  • colors[]: 用于指定漸變的顏色值數(shù)組
  • positions[]: 與漸變的顏色相對應(yīng)，取值是0-1的float類型
  • TileMode tile：指定控件區(qū)域大于指定的漸變區(qū)域時，空白區(qū)域顏色填充方法

關(guān)于漸變色的注意事項：

在這里插入圖片描述

• 1.colors[]與positions[]的長度要一一對應(yīng)
• 2.bsb_colors="#ffffffff_#ff24d1b4_#ff000000"內(nèi)的色值必須帶alpha通道