Feathers:progress-bar

原文地址：http://wiki.starling-framework.org/feathers/progress-bar

如何使用Feathers的进度条组件

进度条 类显示了一个关于任务完成进度的可视化指示器。

基础用法 =

让我们从创建一个进度条开始，给它一些值，并且把它添加到显示列表。

var progress:ProgressBar = new ProgressBar();
progress.minimum = 0;
progress.maximum = 100;
progress.value = 10;
this.addChild( progress );

最小值(minimum) 和 最大值(maximum) 属性设置了进度条的范围. 值(value) 属性的值必须是最小值和最大值之间的一个值。

定义进度条皮肤

默认情况下，进度条的方向是水平的，你可以改变方向(direction)属性来是进度条变成垂直的。

progress.direction = ProgressBar.DIRECTION_VERTICAL;

backgroundSkin和fillSkin 属性是用来定义进度条外观的。

var backgroundSkin:Scale9Image = new Scale9Image( backgroundTextures );
backgroundSkin.width = 150;
progress.backgroundSkin = backgroundSkin;
 
var fillSkin:Scale9Image = new Scale9Image( fillTextures );
fillSkin.width = 20;
progress.fillSkin = fillSkin;

注意要在给进度条赋值前设置皮肤的宽度。对与背景来说，我们这样做以便初始进度条的宽度至少150像素宽。如果我们需要的话，我们仍然可以把进度条的 宽度(width)设置成一个更小或更大的值。不过，如果我们没有给进度条设置一个明确的宽度，进度条将会自动根据背景皮肤的尺寸来进行计算。

对于填充皮肤来说，我们要确保填充不小于20像素。也许填充是一个圆角矩形，因此在填充开始重叠或扭曲之前，边缘至少需要10像素的宽度。我们想避免这种情况，所以我们设置”填充皮肤(fillSkin)”的宽度通知进度条,这是宽度相对应的值的最小(minimum)属性。换句话说,如果值（value）属性等于最小（minimum）属性(在本例中,如果他们是“0”),那么填充皮肤将是20像素宽。值（value）属性增加到100,填充皮肤的宽度就会增加到150像素。

此外,其他两个皮肤性质,“背景不可用皮肤(backgroundDisabledSkin)”和“填充不可用皮肤fillDisabledSkin”,当进度条不可用的时候，他们可以用来给一个进度条不同的外观。这些皮肤是可选的。例如,如果没有设置“backgroundDisabledSkin“,常规的“backgroundSkin”在被用于“isEnabled”时候会出错。

像许多组件一样，进度条也有填补值(padding ).用于增加背景边缘和填充边缘的空隙。例如，你可能想让部分背景作为填充的边界。

progress.paddingTop = 2;
progress.paddingRight = 3;
progress.paddingBottom = 2;
progress.paddingLeft = 3;

相关链接

• ProgressBar API 文档
• ProgressBarScreen 源码, 一个Components Explorer上的小例子。

了解更多，请查看 Feathers 文档.

翻译者：斯樵