Android 进度控件

Android 圆形、半圆形进度效果、半圆SeekBar、刻度尺效果实现
代码下载：GitHub地址

效果图

progress.gif
touch.gif

控件的使用

• 布局中设置属性

    <!--  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>