Corona手游教程之widget：ProgressView篇

通常为了节省内存，我们通过ImageSheet来创建进度条（progressView），进度条也不支持伸缩。我们创建进度条的方式如下：

widget.newProgressView( options )

options的公共字段包括如下：

• id：（可选）一个赋予progressView的标识字符串，默认为default_progressView
• x, y：（可选）widget的位置坐标的x和y
• left, top：（可选）左上角的坐标
• width：进度条的总长度
• isAnimated：（可选）如果改变进度值是需要有动画就设置为true，如果希望改变立即发生就设置false或省略
• fillXOffset, fillYOffset：（可选）设置垂直和水平方向上的偏移，默认值都是0

外观定制

进度条控件可以用一个imageSheet来进行可视化定制。正如下面例子所示，6帧就可以拼出一个外框和一个内部填充条。外框包括左边帽子（红色），中间区域（绿色），右边帽子（黄色）。内部填充区域，由于一个左帽子（橘色），中间区域（蓝色），和一个右边帽子（紫色）组成。

根据进度条的长度，外框帽子保持在ImageSheet中的尺寸，而中间帧（绿色）延伸来填充中间的长度。当进度被设置为任何大于0.0的值时，内部的左帽子和右帽子就会变得可见。然后，根据当前的百分比，中间填充区域（蓝）会眼神填充在两个内部帽子中间。

options的自定义外观字段如下：

• sheet：用于进度条的ImageSheet
• fillOuterLeftFrame：外部左帽子的帧序号
• fillOuterMiddleFrame：外部中间区域的帧序号
• fullOuterRightFrame：外部右帽子的帧序号
• fillOuterWidth, fillOuterHeight： 外框的每一帧的宽度和高度。外框的帧都应该共享相同的宽度和高度
• fillInnerLeftFrame：内部左帽子的帧序号
• fillInnerMiddleFrame：内部中间区域的帧序号
• fillInnerRightFrame：内部右帽子的帧序号
• fillWidth, fillHeight：内区的每一帧的宽度和高度。所以内区的帧都应该共享相同的宽度和高度

对象方法

1. object:setProgress()
2. object:getProgress()
3. object:resizeView()

使用举例

1 创建默认进度条

local widget = require( "widget" )

-- Create the widget
local progressView = widget.newProgressView
{
    left = 50,
    top = 200,
    width = 220,
    isAnimated = true
}

-- Set the progress to 50%
progressView:setProgress( 0.5 )

2 创建个性化进度条（自定义ImageSheet）

local widget = require( "widget" )

-- Image sheet options and declaration
local options = {
    width = 64,
    height = 64,
    numFrames = 6,
    sheetContentWidth = 384,
    sheetContentHeight = 64
}
local progressSheet = graphics.newImageSheet( "progressSheet.png", options )

-- Create the widget
local progressView = widget.newProgressView
{
    sheet = progressSheet,
    fillOuterLeftFrame = 1,
    fillOuterMiddleFrame = 2,
    fillOuterRightFrame = 3,
    fillOuterWidth = 64,
    fillOuterHeight = 64,
    fillInnerLeftFrame = 4,
    fillInnerMiddleFrame = 5,
    fillInnerRightFrame = 6,
    fillWidth = 64,
    fillHeight = 64,
    left = 50,
    top = 200,
    width = 220,
    isAnimated = true
}

-- Set the progress to 50%
progressView:setProgress( 0.5 )