Android 進度控件

Android 進度控件

Android 圓形、半圓形進度效果、半圓SeekBar、刻度尺效果實現
代碼下載：GitHub地址

效果圖

控件的使用

• 佈局中設置屬性

    <!--  CircleProgressView（圓形進度條） -->
    <com.renj.progress.CircleProgressView
        android:id="@+id/circle_pv_view"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        app:circle_pv_current="20"
        app:circle_pv_show_type="decimal"
        app:circle_pv_start_point="top_left"
        app:circle_pv_total="100" />
  
    <!--  SemicircleProgressView（半圓形進度條） -->
    <com.renj.progress.SemicircleProgressView
        android:id="@+id/semicircle_pv_view"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_marginTop="40dp"
        app:semicircle_pv_current="50"
        app:semicircle_pv_total="100" />
  
    <!-- ScaleView（刻度尺效果） -->
    <com.renj.progress.ScaleView
        android:id="@+id/scale_view"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:visibility="visible"
        app:scale_current_color="@color/colorAccent"
        app:scale_default_value="160"
        app:scale_end_value="250"
        app:scale_start_value="60"
        app:scale_step_length_value="10"
        app:scale_unit="cm" />
  
    <!--  SemicircleSeekBar（半圓拖動控件） -->
    <com.renj.progress.SemicircleSeekBar
        android:id="@+id/semicircle_sb_view"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_marginTop="40dp"
        app:semicircle_sb_color="@color/colorPrimary"
        app:semicircle_sb_current="50"
        app:semicircle_sb_thumb_bitmap="@mipmap/ic_launcher"
        app:semicircle_sb_thumb_color="@color/colorAccent"
        app:semicircle_sb_thumb_size="12dp"
        app:semicircle_sb_total="100"
        app:semicircle_sb_width="5dp" />
  

• 代碼中設置值

    // CircleProgressView（圓形進度條）
    circleProgressView.setValue(100, 60).takeEffect();
  
    // SemicircleProgressView（半圓形進度條）
    semicircleProgressView.setValue(100, 70).takeEffect();
  
    // ScaleView（刻度尺效果）
    scaleView.setValue(10, 180, 10, 45, "kg").takeEffect();
  
    // SemicircleSeekBar（半圓拖動控件）
    semicircleSeekBar.setValue(100, 60).takeEffect();
  

• 設置數據改變監聽

    // CircleProgressView（圓形進度條）
    circleProgressView.setOnProgressChangeListener((circleProgressView, currentValue) ->
            Log.i("ProgressActivity", "currentValue = [" + currentValue + "]"));
    
    // SemicircleProgressView（半圓形進度條）
    semicircleProgressView.setOnProgressChangeListener((semicircleProgressView, currentValue) ->
            Log.i("ProgressActivity", "currentValue = [" + currentValue + "]"));
    
    // ScaleView（刻度尺效果）
    scaleView.setOnScaleChangeListener((scaleView, currentValue, unit, startValue, endValue, stepLengthValue) ->
            Log.i("TouchActivity", "currentValue = [" + currentValue + "]," +
                    " unit = [" + unit + "], " + "startValue = [" + startValue + "], " +
                    "endValue = [" + endValue + "], " + "stepLengthValue = [" + stepLengthValue + "]"));
    
    // SemicircleSeekBar（半圓拖動控件）
    semicircleSeekBar.setOnProgressChangeListener((semicircleProgressView, currentValue) ->
            Log.i("TouchActivity", "currentValue = [" + currentValue + "]"));
  

各個控件屬性

• CircleProgressView（圓形進度條） 控件屬性

     <declare-styleable name="CircleProgressView">
        <!--背景圓圈顏色-->
        <attr name="circle_pv_bg_color" format="color" />
        <!--進度顏色-->
        <attr name="circle_pv_color" format="color" />
        <!--進度條寬度-->
        <attr name="circle_pv_width" format="dimension" />
        <!--文字顏色-->
        <attr name="circle_pv_text_color" format="color" />
        <!--文字大小-->
        <attr name="circle_pv_text_size" format="dimension" />
        <!--當前結果顯示樣式-->
        <attr name="circle_pv_show_type" format="enum">
            <!--不顯示當前值-->
            <enum name="none" value="0" />
            <!--小數點形式顯示-->
            <enum name="decimal" value="1" />
            <!--百分比形式顯示，默認-->
            <enum name="percentage" value="2" />
        </attr>
        <!--進度開始位置控制-->
        <attr name="circle_pv_start_point" format="enum">
            <!--上方-->
            <enum name="top" value="0" />
            <!--右上方-->
            <enum name="top_right" value="1" />
            <!--右方-->
            <enum name="right" value="2" />
            <!--右下方-->
            <enum name="bottom_right" value="3" />
            <!--下方-->
            <enum name="bottom" value="4" />
            <!--左下方-->
            <enum name="bottom_left" value="5" />
            <!--左方-->
            <enum name="left" value="6" />
            <!--左上方-->
            <enum name="top_left" value="7" />
        </attr>
  
        <!--進度總大小-->
        <attr name="circle_pv_total" format="integer" />
        <!--當前進度-->
        <attr name="circle_pv_current" format="integer" />
    </declare-styleable>
  

• SemicircleProgressView（半圓形進度條） 控件屬性

    <declare-styleable name="SemicircleProgressView">
        <!--背景圓圈顏色-->
        <attr name="semicircle_pv_bg_color" format="color" />
        <!--進度顏色-->
        <attr name="semicircle_pv_color" format="color" />
        <!--進度條寬度-->
        <attr name="semicircle_pv_width" format="dimension" />
        <!--文字顏色-->
        <attr name="semicircle_pv_text_color" format="color" />
        <!--文字大小-->
        <attr name="semicircle_pv_text_size" format="dimension" />
        <!--當前進度文字顏色-->
        <attr name="semicircle_pv_current_text_color" format="color" />
        <!--當前進度文字顏色-->
        <attr name="semicircle_pv_current_text_size" format="dimension" />
        <!--當前結果顯示樣式-->
        <attr name="semicircle_pv_show_type" format="enum">
            <!--不顯示當前值-->
            <enum name="none" value="0" />
            <!--小數點形式顯示-->
            <enum name="decimal" value="1" />
            <!--百分比形式顯示，默認-->
            <enum name="percentage" value="2" />
        </attr>
  
        <!--進度總大小-->
        <attr name="semicircle_pv_total" format="integer" />
        <!--當前進度-->
        <attr name="semicircle_pv_current" format="integer" />
  
    </declare-styleable>
  

• ScaleView（刻度尺效果） 控件屬性

    <declare-styleable name="ScaleView">
        <!--線顏色-->
        <attr name="scale_line_color" format="color" />
        <!--主線寬度-->
        <attr name="scale_main_line_width" format="dimension" />
        <!--默認當前位置刻度線寬度-->
        <attr name="scale_current_line_width" format="dimension" />
        <!--刻度線寬度-->
        <attr name="scale_line_width" format="dimension" />
        <!--長刻度線高度-->
        <attr name="scale_line_height_long" format="dimension" />
        <!--短刻度線高度-->
        <attr name="scale_line_height_short" format="dimension" />
        <!--每一個刻度單元格寬度(兩個長刻度之間的寬度)-->
        <attr name="scale_cell_width" format="dimension" />
        <!--文字和刻度線之間的距離-->
        <attr name="scale_text_space" format="dimension" />
        <!--刻度文字顏色-->
        <attr name="scale_text_color" format="color" />
        <!--刻度文字大小-->
        <attr name="scale_text_size" format="dimension" />
        <!--是否顯示/繪製當前值信息-->
        <attr name="scale_is_show_current_info" format="boolean" />
        <!--顯示當前刻度文字大小-->
        <attr name="scale_current_text_size" format="dimension" />
        <!--當前刻度和文字顏色-->
        <attr name="scale_current_color" format="color" />
  
        <!--單位/顯示當前值時的單位-->
        <attr name="scale_unit" format="string" />
        <!--開始值-->
        <attr name="scale_start_value" format="integer" />
        <!--結束值-->
        <attr name="scale_end_value" format="integer" />
        <!--步長(每兩個刻度之間的差值)，注意：步長(stepLengthValue)必須爲大於0的整數.-->
        <attr name="scale_step_length_value" format="integer" />
        <!--默認值，注意：範圍應該在 startValue 和 endValue 之間-->
        <attr name="scale_default_value" format="integer" />
    </declare-styleable>
  

• SemicircleSeekBar（半圓拖動控件） 控件屬性

    <declare-styleable name="SemicircleSeekBar">
        <!--背景圓圈顏色-->
        <attr name="semicircle_sb_bg_color" format="color" />
        <!--進度顏色-->
        <attr name="semicircle_sb_color" format="color" />
        <!--進度條寬度-->
        <attr name="semicircle_sb_width" format="dimension" />
        <!--滑動圖標半徑-->
        <attr name="semicircle_sb_thumb_radius" format="dimension" />
        <!--滑動圖標顏色-->
        <attr name="semicircle_sb_thumb_color" format="color" />
        <!--滑動圖標-->
        <attr name="semicircle_sb_thumb_bitmap" format="reference" />
        <!--滑動圖標大小-->
        <attr name="semicircle_sb_thumb_size" format="dimension" />
        <!--環形四周間距,有文字時修改文字與環形的對齊方式-->
        <attr name="semicircle_sb_innerMargin" format="dimension" />
        <!--最大值/最小值文字與環形的距離值-->
        <attr name="semicircle_sb_textPadding" format="dimension" />
        <!--文字顏色-->
        <attr name="semicircle_sb_text_color" format="color" />
        <!--文字大小-->
        <attr name="semicircle_sb_text_size" format="dimension" />
        <!--當前進度文字顏色-->
        <attr name="semicircle_sb_current_text_color" format="color" />
        <!--當前進度文字顏色-->
        <attr name="semicircle_sb_current_text_size" format="dimension" />
        <!--當前結果顯示樣式-->
        <attr name="semicircle_sb_show_type" format="enum">
            <!--不顯示當前值-->
            <enum name="none" value="0" />
            <!--小數點形式顯示-->
            <enum name="decimal" value="1" />
            <!--百分比形式顯示，默認-->
            <enum name="percentage" value="2" />
        </attr>
  
        <!--進度總大小-->
        <attr name="semicircle_sb_total" format="integer" />
        <!--當前進度-->
        <attr name="semicircle_sb_current" format="integer" />
  
    </declare-styleable>