进度条是Android比较重要的控件,常用于数据加载中。进度条按表现形式可分为水平进度条和环形进度条,按功能又可分为有进度和无进度的进度条。
MaterialProgressBar
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.progress.materialprogressbar.MaterialProgressBar
style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="30"
android:secondaryProgress="60"
app:mpb_progressStyle="horizontal" />
<com.xuexiang.xui.widget.progress.materialprogressbar.MaterialProgressBar
style="@style/Widget.MaterialProgressBar.ProgressBar.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:indeterminate="true" />
<com.xuexiang.xui.widget.progress.materialprogressbar.MaterialProgressBar
android:id="@+id/normal_background_progress"
style="@style/Widget.MaterialProgressBar.ProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:indeterminate="false"
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)。
- 使用案例
<com.xuexiang.xui.widget.progress.loading.ARCLoadingView
android:id="@+id/arc_loading"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="20dp"
app:lv_auto="false"
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组件。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.progress.loading.MiniLoadingView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="40dp" />
- 属性表: (MiniLoadingView)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
mlv_loading_view_size | dimension | 32dp | loading控件的大小 |
mlv_loading_view_color | color | Color.WHITE | loading控件的颜色 |
CircleProgressView
非常漂亮的环形进度条。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.progress.CircleProgressView
android:id="@+id/progressView_circle_small"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
app:cpv_animate_type="AccelerateDecelerateInterpolator"
app:cpv_circle_broken="false"
app:cpv_end_color="#00EEFA"
app:cpv_end_progress="78"
app:cpv_isFilled="false"
app:cpv_isTracked="true"
app:cpv_progress_duration="2000"
app:cpv_progress_textColor="#28AAFB"
app:cpv_progress_textSize="18sp"
app:cpv_start_color="#0052a3"
app:cpv_start_progress="0"
app:cpv_track_color="#22FFF5"
app:cpv_track_width="4dp"
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
非常漂亮的水平进度条。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.progress.HorizontalProgressView
android:id="@+id/hpv_language"
android:layout_width="120dp"
android:layout_height="30dp"
app:hpv_end_color="@color/purple_start"
app:hpv_end_progress="92"
app:hpv_isTracked="true"
app:hpv_progress_duration="2600"
app:hpv_progress_textColor="#696969"
app:hpv_progress_textVisibility="false"
app:hpv_start_color="@color/purple_light"
app:hpv_track_color="#f4f4f4"
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
星级评分控件,可自定义组件的样式,支持动画效果
。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.progress.ratingbar.RatingBar
android:id="@+id/rating_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_marginRight="8dp"
app:srb_numStars="7"
app:srb_rating="2.5"
app:srb_starHeight="35dp"
app:srb_starPadding="5dp"
app:srb_starWidth="35dp" />
<com.xuexiang.xui.widget.progress.ratingbar.RotationRatingBar
android:id="@+id/rrb_custom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_marginRight="8dp"
app:srb_drawableEmpty="@android:color/transparent"
app:srb_drawableFilled="@drawable/ic_star_green"
app:srb_isIndicator="true"
app:srb_starHeight="12dp"
app:srb_starPadding="3dp"
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 | 星星的进度单位 |