Corona手游教程之widget：Slider篇

废话不多说，同Corona SDK其他widget一样，出于节约内存考虑定制化的slider也需要使用ImageSheet，并且不可以伸缩（scale）或通过.width或.height属性改变宽度和高度。

我们创建一个slider的基本分方法是：

widget.newSlider( options )

options的公共参数为：

• id：（可选）一个赋予slider的可选字符串标识。默认值为"widget_slider"
• x, y：（可选）origin的坐标
• left, top：（可选）左上角的坐标
• orientation：（可选）slider的朝向，可选值为"horizontal"和"vertical"。默认值为"horizontal"
• width, height：slider的宽度和高度。（width用于horizontal，height用于vertical）
• value：（可选）表示slider的初始百分比。默认为50，意味着slider手柄处于50%位置。
• listener：（可选）这个函数用来处理slider的交互事件。在这个监听函数里，event.phase返回的值包括和touch一样的情况"began"，"moved“和”ended“。另外，你可以读取到slider的新值，event.value。

读写value的方式：

• 属性：object.value
• 方法：object:setValue()

可视化定制

slider widget使用ImageSheet来进行可视化定制。正如 下面例子所示，slider需要其中的5帧来装配：一个外框和一个内区。外框包括左帽子（红色），中间块（绿色），右边帽子（黄色）。内部区域（橘色）将延伸来填充当前取值的百分比。所有的外框的帧，和内区的帧，都应该共享宽度和高度。

还有一个把手帧，其大小可以不同于其他帧。注意，所有的slider控件，对于把手在中间区域可以拖拽的边界都有限制。对于可视化定制，把手 将会停在它中心坐标到达中间内区的两边。对于一个水平slider，把手应该停在内区左右边界。同样的规则也适用于垂直slider，只是限制将变成内区的上下边界。

1 水平Slider

• leftFrame：外框左帽子的帧序号
• middleFrame：外框中间块的帧序号
• rightFrame：外框右帽子的帧序号
• fillFrame：外框填充区的帧序号
• frameWidth,frameHeight：外框帧和中间填充区帧的宽度和高度。所有这些帧应共享相同的宽度和高度
• handleFrame：把手帧的帧序号
• handleWidth, handleHeight：把手帧的宽度和高度

2 垂直slider

• topFrame：外框上帽子的帧序号
• middleFrame：外框中间块的帧序号
• bottomFrame：外框下帽子的帧序号
• fillVerticalFrame：外框填充区的帧序号
• frameWidth,frameHeight：外框帧和中间填充区帧的宽度和高度。所有这些帧应共享相同的宽度和高度
• handleFrame：把手帧的帧序号
• handleWidth, handleHeight：把手帧的宽度和高度

水平slider范例：

local widget = require( "widget" )

-- Slider listener
local function sliderListener( event )
    print( "Slider at " .. event.value .. "%" )
end

-- Create the widget
local slider = widget.newSlider
{
    top = 200,
    left = 50,
    width = 400,
    value = 10,  -- Start slider at 10% (optional)
    listener = sliderListener
}

垂直slider范例：

local widget = require( "widget" )

-- Slider listener
local function sliderListener( event )
    print( "Slider at " .. event.value .. "%" )
end

-- Create the widget
local slider = widget.newSlider
{
    top = 200,
    left = 50,
    orientation = "vertical",
    height = 200,
    value = 10,  -- Start slider at 10% (optional)
    listener = sliderListener
}

个性化定制范例：

local widget = require( "widget" )

-- Slider listener
local function sliderListener( event )
    print( "Slider at " .. event.value .. "%" )
end

-- Image sheet options and declaration
local options = {
    frames = {
        { x=0, y=0, width=36, height=64 },
        { x=40, y=0, width=36, height=64 },
        { x=80, y=0, width=36, height=64 },
        { x=124, y=0, width=36, height=64 },
        { x=168, y=0, width=64, height=64 }
    },
    sheetContentWidth = 232,
    sheetContentHeight = 64
}
local sliderSheet = graphics.newImageSheet( "sliderSheet.png", options )

-- Create the widget
local slider = widget.newSlider
{
    sheet = sliderSheet,
    leftFrame = 1,
    middleFrame = 2,
    rightFrame = 3,
    fillFrame = 4,
    frameWidth = 36,
    frameHeight = 64,
    handleFrame = 5,
    handleWidth = 64,
    handleHeight = 64,
    top = 200,
    left= 50,
    orientation = "horizontal",
    width = 300,
    listener = sliderListener
}