我的书签
添加书签
移除书签进度条是Android比较重要的控件，常用于数据加载中。进度条按表现形式可分为水平进度条和环形进度条，按功能又可分为有进度和无进度的进度条。
MaterialProgressBar
- 演示效果
- 使用案例
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" />
10. <com.xuexiang.xui.widget.progress.materialprogressbar.MaterialProgressBar
11. style="@style/Widget.MaterialProgressBar.ProgressBar.Small"
12. android:layout_width="wrap_content"
13. android:layout_height="wrap_content"
14. android:layout_gravity="right|bottom"
15. android:indeterminate="true" />
17. <com.xuexiang.xui.widget.progress.materialprogressbar.MaterialProgressBar
18. android:id="@+id/normal_background_progress"
19. style="@style/Widget.MaterialProgressBar.ProgressBar"
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content"
22. android:layout_gravity="end|bottom"
23. android:indeterminate="false"
24. app:mpb_showProgressBackground="true" />
- 属性表: (MaterialProgressBar)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| mpb_progressStyle | enum | circular（horizontal） | 进度条的样式：环形或水平 |
| mpb_setBothDrawables | boolean | false | 无论进度 determinate（确定）或 indeterminate（不确定）的drawables都可以设置在进度条上 |
| mpb_useIntrinsicPadding | boolean | true | 是否使用进度条内部的padding |
| mpb_showProgressBackground | boolean | Horizontal（true） | |
| Circular（false） | 进度条是否必须有背景 | ||
| mpb_determinateCircularProgressStyle | enum | Normal（dynamic） | 进度确定的环形进度条样式：normal和dynamic |
| mpb_progressTint | color | reference | / |
| mpb_progressTintMode | enum | / | 进度条色调的叠加模式 |
| mpb_secondaryProgressTint | color | reference | / |
| mpb_secondaryProgressTintMode | enum | / | 进度条次色调的叠加模式 |
| mpb_progressBackgroundTint | color | reference | / |
| mpb_progressBackgroundTintMode | enum | / | 进度条背景色调的叠加模式 |
| mpb_indeterminateTint | color | reference | / |
| mpb_indeterminateTintMode | enum | / | 不确定进度的进度条色调的叠加模式 |
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_width | dimension | 6dp | loading加载画笔的粗细 |
| lv_color | color | #299EE3 | loading加载画笔的颜色 |
| lv_speed | integer | 5 | loading加载旋转的速度 |
| lv_has_icon | boolean | true | 是否有loading中心的图标 |
| lv_icon | reference | 应用图标 | loading中心的图标 |
| lv_icon_scale | float | 0.5 | loading中心图标缩放的比例 |
| lv_arc_degree | integer | 315 | 圆弧的角度 |
| lv_auto | boolean | true | 是否自动旋转，无需人工控制 |
| lv_arc_single | boolean | false | 是否单弧旋转 |
- 属性表: (LoadingViewLayout)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| lvl_icon | reference | 应用图标 | loading中心的图标 |
| lvl_message | string | “数据加载中…” | loading提示信息 |
MiniLoadingView
极简的迷你loading组件。
- 演示效果
- 使用案例
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_size | dimension | 32dp | loading控件的大小 |
| mlv_loading_view_color | color | Color.WHITE | loading控件的颜色 |
CircleProgressView
非常漂亮的环形进度条。
- 演示效果
- 使用案例
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_progress | integer | 0 | 起始进度 |
| cpv_end_progress | integer | 60 | 终止进度 |
| cpv_start_color | color | #FFC288 | 渐变效果 的起始颜色 |
| cpv_end_color | integer | #FF8F5D | 渐变效果 的终止颜色 |
| cpv_isTracked | boolean | false | 是否显示轨迹背景 |
| cpv_track_width | dimension | 16dp | 轨迹宽度（边界宽度） |
| cpv_progress_width | dimension | 16dp | 进度条的宽度 |
| cpv_track_color | color | #F3E5DD | 轨迹背景的颜色 |
| cpv_progress_duration | integer | 1200ms | 动画时长 |
| cpv_progress_textVisibility | boolean | true | 是否显示进度值文本 |
| cpv_progress_textColor | color | R.attr.colorAccent | 进度值的颜色 |
| cpv_progress_textSize | dimension | 14sp | 进度值的文本字体大小 |
| cpv_animate_type | enum | AccelerateDecelerateInterpolator | 动画类型 |
| cpv_isFilled | boolean | false | 是否内部填充 |
| cpv_circle_broken | boolean | false | 是选择圆形还是弧形进度条【true: 弧形, false: 圆形】 |
| cpv_isGraduated | boolean | false | 圆弧是否是分层级的（不连续） |
| cpv_scaleZone_width | dimension | 6dp | 指示条的宽度 |
| cpv_scaleZone_length | dimension | 22dp | 指示条的长度 |
| cpv_scaleZone_corner_radius | dimension | 8dp | 指示条的圆角 |
| cpv_scaleZone_padding | dimension | 16dp | 指示条的padding |
HorizontalProgressView
非常漂亮的水平进度条。
- 演示效果
- 使用案例
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_progress | integer | 0 | 起始进度 |
| hpv_end_progress | integer | 60 | 终止进度 |
| hpv_start_color | color | #FFC288 | 渐变效果 的起始颜色 |
| hpv_end_color | integer | #FF8F5D | 渐变效果 的终止颜色 |
| hpv_isTracked | boolean | false | 是否显示轨迹背景 |
| hpv_track_width | dimension | 16dp | 进度条的宽度（边界宽度） |
| hpv_track_color | color | #F3E5DD | 轨迹背景的颜色 |
| hpv_progress_duration | integer | 1200ms | 动画时长 |
| hpv_progress_textVisibility | boolean | true | 是否显示进度值文本 |
| hpv_progress_textColor | color | R.attr.colorAccent | 进度值的颜色 |
| hpv_progress_textSize | dimension | 14sp | 进度值的文本字体大小 |
| hpv_animate_type | enum | AccelerateDecelerateInterpolator | 动画类型 |
| hpv_corner_radius | dimension | 5dp | 圆角半径 |
| hpv_text_padding_bottom | dimension | 5dp | 文字距离view的padding |
| hpv_text_movedEnable | boolean | true | 设置进度值是否跟随控件动画移动 |
RatingBar
星级评分控件，可自定义组件的样式，支持动画效果 。
- 演示效果
- 使用案例
2. <com.xuexiang.xui.widget.progress.ratingbar.RatingBar
3. android:id="@+id/rating_bar"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"
6. android:layout_marginLeft="8dp"
7. android:layout_marginTop="16dp"
8. android:layout_marginRight="8dp"
9. app:srb_numStars="7"
10. app:srb_rating="2.5"
11. app:srb_starHeight="35dp"
12. app:srb_starPadding="5dp"
13. app:srb_starWidth="35dp" />
15. <com.xuexiang.xui.widget.progress.ratingbar.RotationRatingBar
16. android:id="@+id/rrb_custom"
17. android:layout_width="wrap_content"
18. android:layout_height="wrap_content"
19. android:layout_marginLeft="8dp"
20. android:layout_marginTop="16dp"
21. android:layout_marginRight="8dp"
22. app:srb_drawableEmpty="@android:color/transparent"
23. app:srb_drawableFilled="@drawable/ic_star_green"
24. app:srb_isIndicator="true"
25. app:srb_starHeight="12dp"
26. app:srb_starPadding="3dp"
27. app:srb_starWidth="12dp"/>
- 属性表: (RatingBar)
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| srb_numStars | integer | 5 | 总共最大的星级数 |
| srb_minimumStars | float | 0 | 最小星级数 |
| srb_rating | float | 0 | 当前的星级 |
| srb_starPadding | dimension | 20px | 星星之间的间距 |
| srb_drawableEmpty | reference | R.drawable.srb_ic_empty | 星星为空时的图案 |
| srb_drawableFilled | reference | R.drawable.srb_ic_filled | 星星填充时的图案 |
| srb_isIndicator | boolean | false | 是否只是指示器，不可以评分 |
| srb_scrollable | boolean | true | 是否可以滑动设置评分 |
| srb_clickable | boolean | true | 是否可以点击设置评分 |
| srb_clearRatingEnabled | boolean | true | 重复点击是否可以清空评分 |
| srb_starWidth | dimension | WRAP_CONTENT | 星星的宽度 |
| srb_starHeight | dimension | WRAP_CONTENT | 星星的高度 |
| srb_stepSize | float | 1 | 星星的进度单位 |
