进度条 - progressbar
# 进度条控件: progressbar
progressbar即进度条控件,显示某种操作的进度及百分比。通过修改进度条控件的参数可以修改进度条的呈现形式,默认为无限圆形进度条。
## indeterminate
{boolean}
是否为无限进度条,默认为==true==。可选的值为:
- ==true== 显示无限进度条
- ==false== 显示有限进度条
## progress
{number}
进度条的进度,为一个整数,默认范围是0~100。
## min
{number}
进度条的最小进度,默认为0。
## max
{number}
进度条的最大进度,默认为100。
## progressDrawable
{string}
定义用于在progress模式下绘制进度条的drawable。
## progressBackgroundTint
{string}
对progress的背景应用颜色。不修改当前的着色模式。
## progressBackgroundTintMode
"add" | "multiply" | "screen" | "src_atop" | "src_in" | "src_over"
将progressBackgroundTint指定的色调应用到进度背景的混合模式。
## progressTint
{string}
将颜色应用于整个可绘制的进度。不修改当前的着色模式。
## progressTintMode
"add" | "multiply" | "screen" | "src_atop" | "src_in" | "src_over"
将progressTint指定的色调应用到进度背景的混合模式。
## secondaryProgress
{number}
设置次要进度的值。如果进度条处于indeterminate(无限进度条)模式,则不执行任何操作。
## secondaryProgressTint
{string}
对secondaryProgress应用色调(如果存在)。不修改当前的着色模式。
## secondaryProgressTintMode
"add" | "multiply" | "screen" | "src_atop" | "src_in" | "src_over"
将secondaryProgressTint指定的色调应用到辅助进度指示器的混合模式。
## style
{string}
设置进度条的宽度、布局样式。可选的值有:
@style/Base.Widget.AppCompat.ProgressBar.Horizontal 水平直线进度条
@style/Base.Widget.AppCompat.ProgressBar 圆形进度条
例子
---
```
"ui";
ui.layout(
<vertical padding="16">
<text text="处理中..." textColor="black" textSize="16sp"/>
<progressbar />
<text text="直线无限进度条" textColor="black" textSize="16sp" marginTop="24"/>
<progressbar indeterminate="true" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
<text text="直线进度条" textColor="black" textSize="16sp" marginTop="24"/>
<progressbar progress="30" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
<text text="可调节进度条" textColor="black" textSize="16sp" marginTop="24"/>
<seekbar progress="20"/>
<horizontal gravity="center" marginTop="24">
<text id="progress_value" textColor="black" textSize="16sp" margin="8" text="0"/>
<progressbar id="progress" w="*" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
</horizontal>
<button id="download">开始下载</button>
</vertical>
);
var downloadId = null;
ui.download.click(()=>{
if(downloadId != null){
stopDownload();
}else{
startDownload();
}
});
function stopDownload(){
ui.download.text("开始下载");
clearInterval(downloadId);
downloadId = null;
}
function startDownload(){
if(ui.progress.getProgress() == 100){
ui.progress.setProgress(0);
}
ui.download.text("停止下载");
downloadId = setInterval(()=>{
var p = ui.progress.getProgress();
p++;
if(p > 100){
stopDownload();
return;
}
ui.progress.setProgress(p);
ui.progress_value.setText(p.toString());
}, 200);
}
```