进度条是Android比较重要的控件,常用于数据加载中。进度条按表现形式可分为水平进度条和环形进度条,按功能又可分为有进度和无进度的进度条。

MaterialProgressBar

  • 演示效果

Progress - 图1

  • 使用案例
  1. <com.xuexiang.xui.widget.progress.materialprogressbar.MaterialProgressBar
  2. style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:progress="30"
  6. android:secondaryProgress="60"
  7. app:mpb_progressStyle="horizontal" />
  8. <com.xuexiang.xui.widget.progress.materialprogressbar.MaterialProgressBar
  9. style="@style/Widget.MaterialProgressBar.ProgressBar.Small"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:layout_gravity="right|bottom"
  13. android:indeterminate="true" />
  14. <com.xuexiang.xui.widget.progress.materialprogressbar.MaterialProgressBar
  15. android:id="@+id/normal_background_progress"
  16. style="@style/Widget.MaterialProgressBar.ProgressBar"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:layout_gravity="end|bottom"
  20. android:indeterminate="false"
  21. app:mpb_showProgressBackground="true" />
  • 属性表: (MaterialProgressBar)
属性名类型默认值备注
mpb_progressStyleenumcircular(horizontal)进度条的样式:环形或水平
mpb_setBothDrawablesbooleanfalse无论进度 determinate(确定)或 indeterminate(不确定)的drawables都可以设置在进度条上
mpb_useIntrinsicPaddingbooleantrue是否使用进度条内部的padding
mpb_showProgressBackgroundbooleanHorizontal(true)
Circular(false)进度条是否必须有背景
mpb_determinateCircularProgressStyleenumNormal(dynamic)进度确定的环形进度条样式:normal和dynamic
mpb_progressTintcolorreference/
mpb_progressTintModeenum/进度条色调的叠加模式
mpb_secondaryProgressTintcolorreference/
mpb_secondaryProgressTintModeenum/进度条次色调的叠加模式
mpb_progressBackgroundTintcolorreference/
mpb_progressBackgroundTintModeenum/进度条背景色调的叠加模式
mpb_indeterminateTintcolorreference/
mpb_indeterminateTintModeenum/不确定进度的进度条色调的叠加模式

LoadingView

环形Loading加载控件,可自定义loading的样式效果
。有圆弧旋转loading控件(ARCLoadingView),旋转加载动画控件(RotateLoadingView),自定义加载布局(LoadingViewLayout)。

  • 使用案例
  1. <com.xuexiang.xui.widget.progress.loading.ARCLoadingView
  2. android:id="@+id/arc_loading"
  3. android:layout_width="120dp"
  4. android:layout_height="120dp"
  5. android:layout_margin="20dp"
  6. app:lv_auto="false"
  7. app:lv_has_icon="false" />
  • 属性表: (LoadingView)【ARCLoadingView、RotateLoadingView】
属性名类型默认值备注
lv_widthdimension6dploading加载画笔的粗细
lv_colorcolor#299EE3loading加载画笔的颜色
lv_speedinteger5loading加载旋转的速度
lv_has_iconbooleantrue是否有loading中心的图标
lv_iconreference应用图标loading中心的图标
lv_icon_scalefloat0.5loading中心图标缩放的比例
lv_arc_degreeinteger315圆弧的角度
lv_autobooleantrue是否自动旋转,无需人工控制
lv_arc_singlebooleanfalse是否单弧旋转
  • 属性表: (LoadingViewLayout)
属性名类型默认值备注
lvl_iconreference应用图标loading中心的图标
lvl_messagestring“数据加载中…”loading提示信息

MiniLoadingView

极简的迷你loading组件。

  • 演示效果

Progress - 图2

  • 使用案例
  1. <com.xuexiang.xui.widget.progress.loading.MiniLoadingView
  2. android:layout_width="wrap_content"
  3. android:layout_height="wrap_content"
  4. android:layout_margin="40dp" />
  • 属性表: (MiniLoadingView)
属性名类型默认值备注
mlv_loading_view_sizedimension32dploading控件的大小
mlv_loading_view_colorcolorColor.WHITEloading控件的颜色

CircleProgressView

非常漂亮的环形进度条。

  • 演示效果

Progress - 图3

  • 使用案例
  1. <com.xuexiang.xui.widget.progress.CircleProgressView
  2. android:id="@+id/progressView_circle_small"
  3. android:layout_width="90dp"
  4. android:layout_height="90dp"
  5. android:layout_marginStart="12dp"
  6. android:layout_marginTop="12dp"
  7. app:cpv_animate_type="AccelerateDecelerateInterpolator"
  8. app:cpv_circle_broken="false"
  9. app:cpv_end_color="#00EEFA"
  10. app:cpv_end_progress="78"
  11. app:cpv_isFilled="false"
  12. app:cpv_isTracked="true"
  13. app:cpv_progress_duration="2000"
  14. app:cpv_progress_textColor="#28AAFB"
  15. app:cpv_progress_textSize="18sp"
  16. app:cpv_start_color="#0052a3"
  17. app:cpv_start_progress="0"
  18. app:cpv_track_color="#22FFF5"
  19. app:cpv_track_width="4dp"
  20. app:cpv_progress_width="8dp"/>
  • 属性表: (CircleProgressView)
属性名类型默认值备注
cpv_start_progressinteger0起始进度
cpv_end_progressinteger60终止进度
cpv_start_colorcolor#FFC288渐变效果
的起始颜色
cpv_end_colorinteger#FF8F5D渐变效果
的终止颜色
cpv_isTrackedbooleanfalse是否显示轨迹背景
cpv_track_widthdimension16dp轨迹宽度(边界宽度)
cpv_progress_widthdimension16dp进度条的宽度
cpv_track_colorcolor#F3E5DD轨迹背景的颜色
cpv_progress_durationinteger1200ms动画时长
cpv_progress_textVisibilitybooleantrue是否显示进度值文本
cpv_progress_textColorcolorR.attr.colorAccent进度值的颜色
cpv_progress_textSizedimension14sp进度值的文本字体大小
cpv_animate_typeenumAccelerateDecelerateInterpolator动画类型
cpv_isFilledbooleanfalse是否内部填充
cpv_circle_brokenbooleanfalse是选择圆形还是弧形进度条【true: 弧形, false: 圆形】
cpv_isGraduatedbooleanfalse圆弧是否是分层级的(不连续)
cpv_scaleZone_widthdimension6dp指示条的宽度
cpv_scaleZone_lengthdimension22dp指示条的长度
cpv_scaleZone_corner_radiusdimension8dp指示条的圆角
cpv_scaleZone_paddingdimension16dp指示条的padding

HorizontalProgressView

非常漂亮的水平进度条。

  • 演示效果

Progress - 图4

  • 使用案例
  1. <com.xuexiang.xui.widget.progress.HorizontalProgressView
  2. android:id="@+id/hpv_language"
  3. android:layout_width="120dp"
  4. android:layout_height="30dp"
  5. app:hpv_end_color="@color/purple_start"
  6. app:hpv_end_progress="92"
  7. app:hpv_isTracked="true"
  8. app:hpv_progress_duration="2600"
  9. app:hpv_progress_textColor="#696969"
  10. app:hpv_progress_textVisibility="false"
  11. app:hpv_start_color="@color/purple_light"
  12. app:hpv_track_color="#f4f4f4"
  13. app:hpv_track_width="8dp" />
  • 属性表: (HorizontalProgressView)
属性名类型默认值备注
hpv_start_progressinteger0起始进度
hpv_end_progressinteger60终止进度
hpv_start_colorcolor#FFC288渐变效果
的起始颜色
hpv_end_colorinteger#FF8F5D渐变效果
的终止颜色
hpv_isTrackedbooleanfalse是否显示轨迹背景
hpv_track_widthdimension16dp进度条的宽度(边界宽度)
hpv_track_colorcolor#F3E5DD轨迹背景的颜色
hpv_progress_durationinteger1200ms动画时长
hpv_progress_textVisibilitybooleantrue是否显示进度值文本
hpv_progress_textColorcolorR.attr.colorAccent进度值的颜色
hpv_progress_textSizedimension14sp进度值的文本字体大小
hpv_animate_typeenumAccelerateDecelerateInterpolator动画类型
hpv_corner_radiusdimension5dp圆角半径
hpv_text_padding_bottomdimension5dp文字距离view的padding
hpv_text_movedEnablebooleantrue设置进度值是否跟随控件动画移动

RatingBar

星级评分控件,可自定义组件的样式,支持动画效果

  • 演示效果

Progress - 图5

  • 使用案例
  1. <com.xuexiang.xui.widget.progress.ratingbar.RatingBar
  2. android:id="@+id/rating_bar"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:layout_marginLeft="8dp"
  6. android:layout_marginTop="16dp"
  7. android:layout_marginRight="8dp"
  8. app:srb_numStars="7"
  9. app:srb_rating="2.5"
  10. app:srb_starHeight="35dp"
  11. app:srb_starPadding="5dp"
  12. app:srb_starWidth="35dp" />
  13. <com.xuexiang.xui.widget.progress.ratingbar.RotationRatingBar
  14. android:id="@+id/rrb_custom"
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:layout_marginLeft="8dp"
  18. android:layout_marginTop="16dp"
  19. android:layout_marginRight="8dp"
  20. app:srb_drawableEmpty="@android:color/transparent"
  21. app:srb_drawableFilled="@drawable/ic_star_green"
  22. app:srb_isIndicator="true"
  23. app:srb_starHeight="12dp"
  24. app:srb_starPadding="3dp"
  25. app:srb_starWidth="12dp"/>
  • 属性表: (RatingBar)
属性名类型默认值备注
srb_numStarsinteger5总共最大的星级数
srb_minimumStarsfloat0最小星级数
srb_ratingfloat0当前的星级
srb_starPaddingdimension20px星星之间的间距
srb_drawableEmptyreferenceR.drawable.srb_ic_empty星星为空时的图案
srb_drawableFilledreferenceR.drawable.srb_ic_filled星星填充时的图案
srb_isIndicatorbooleanfalse是否只是指示器,不可以评分
srb_scrollablebooleantrue是否可以滑动设置评分
srb_clickablebooleantrue是否可以点击设置评分
srb_clearRatingEnabledbooleantrue重复点击是否可以清空评分
srb_starWidthdimensionWRAP_CONTENT星星的宽度
srb_starHeightdimensionWRAP_CONTENT星星的高度
srb_stepSizefloat1星星的进度单位