自定義SeekBar,實現帶刻度的進度條實現顏色漸變效果
阿新 • • 發佈:2018-12-13
- 自定義
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通道