• 自定義SeekBar，
• 進度變化由視覺化氣泡樣式呈現，定製化程度較高
• 實現帶刻度的進度條實現顏色漸變效果
• Github太慢，所以只在碼雲上持續更新

整體效果如下：

主要程式碼

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通道