Seekbar

SeekBarをカスタマイズして、スケール付きのプログレスバーで色のグラデーションを実装します



Customize Seekbar Implement Color Gradient With Progress Bar With Scale



  • カスタマイズSeekBar、
  • 進捗状況の変更は、高度にカスタマイズされた視覚的なバブルスタイルによって表示されます
  • スケーリングされたプログレスバーを実装して、色のグラデーションを実現します
  • ソースコードのダウンロード： Github 、 コードクラウド
  • Githubは遅すぎるため、コードクラウドでのみ更新を続けます

全体的な効果は次のとおりです。

画像

に基づく WoxingxiaoのBubbleSeekBar 変更する

メインコード

1.属性に新しい属性を追加します。

<attr name='bsb_colors' format='string'/> <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() { / / Gradient color .colors and pos must be equal 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のフロートタイプです。
    • TileMode tile：指定された制御領域が指定されたグラデーション領域よりも大きい場合の空白領域の塗りつぶし方法
グラデーションカラーに関する注意：

画像



  • 1. colors[]対positions[] 1対1の対応の長さ
  • 2. bsb_colors='#ffffffff_#ff24d1b4_#ff000000'内部の色の値にはアルファチャネルが必要です