Corona手游教程之widget：PickerWheel篇

首先什么是pickerWheel，如下图所示：

这是移动设备上交互创新的典型控件，非常适合触屏进行选择，对应PC上的下拉框。

在Corona中pickerWheel被设定为320X222像素大小。我们可以使用默认样式或定制化的pickerWheel。另外，请注意列的总宽度实际是280像素，因为要扣除左右两边的20像素边框大小。

为了节约内存，pickerWheel在定制化的时候同样使用Image Sheet。pickerWheel不支持对其宽度和高度进行伸缩（scale）或改变其.width或height属性。

创建pickerWheel的方式为：

widget.newPickerWheel( options )

其options公共字段为：

• id：（可选）一个赋予pickerWheel的标识字符串，默认为widget_pickerWheel
• x, y：（可选）origin坐标
• left, top：（可选）左上角坐标
• columns：一个table，为每一个单独的列包含一个子表。

获取pickerWheel当前选中的值的方式如下：

object:getValues()

 

配置列数据

pickerWheel中的列，被定义成有顺序的一系列table，一起存放在columns字段里。

这些列将被从左到右添加进pickerWheel，按照你定义他们的顺序：

labels：每一行展示的标题（按顺序），例如：labels = { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" }

Number：（可选）默认情况下，列被均匀地分割在pickerWheel的可视区域，但是一个指定的列宽度可以通过本属性来定义。注意，所有列的总宽度加起来最大只能是280

align：（可选）指定文本标题在列中的对齐方式。可接受的值为“left”，“right”，“center”。默认为“center”。

startIndex：本列的初始选择的行。这个值不可以大于列的总个数范围。

 

基本样式：

• font：（可选）为pickerWheel的列设置字体。默认是native.systemFontBold
• fontSize：（可选）列内容字体的大小。默认为22
• columnColor：指定RGBA作为pickerWheel列背景的颜色，table如：columnColor = { 0.8, 0.8, 0.8 }

local widget = require( "widget" )

-- Create two tables to hold data for days and years      
local days = {}
local years = {}

-- Populate the "days" table
for d = 1, 31 do
    days[d] = d
end

-- Populate the "years" table
for y = 1, 48 do
    years[y] = 1969 + y
end

-- Configure the picker wheel columns
local columnData = 
{
    -- Months
    { 
        align = "right",
        width = 140,
        startIndex = 5,
        labels = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }
    },
    -- Days
    {
        align = "center",
        width = 60,
        startIndex = 18,
        labels = days
    },
    -- Years
    {
        align = "center",
        width = 80,
        startIndex = 10,
        labels = years
    }
}

-- Create the widget
local pickerWheel = widget.newPickerWheel
{
    top = display.contentHeight - 222,
    columns = columnData
}

-- Get the table of current values for all columns
-- This can be performed on a button tap, timer execution, or other event
local values = pickerWheel:getValues()

-- Get the value for each column in the wheel (by column index)
local currentMonth = values[1].value
local currentDay = values[2].value
local currentYear = values[3].value

print( currentMonth, currentDay, currentYear )

 

定制样式：

pickerWheel可以用ImageSheet的帧来进行定制样式。这需要3帧：一个覆层边界/边框，一个处于覆层底下的背景帧，和一个可选的自动放在列之间的分割线（切割列），举例如下图：

• sheet：pickerWheel使用的imageSheet
• backgroundFrame：处于pickerWheel底部的背景图片的帧序号
• backgroundFrameWidth，backgroundFameHeight：背景帧的宽度和高度。这个图片将会被拉伸到控件的大小，所以你直接设计成320X222来阻止其变形
• overlayFrame：覆层图片（包围框或覆层）的帧序号
• overlayFrameWidth，overlayFrameHeight：覆层图帧的宽度和高度。这个图片最好也设计成320X222
• separatorFrame：（可选）分割线图片的帧序列。这些分割线将会 自动放在列之间。
• separatorFrameWidth，separatorFrameHeight：（可选）分割线图片帧的宽度和高度，需要separatorFrame先被指定

local widget = require( "widget" )

-- Create two tables to hold data for days and years      
local days = {}
local years = {}

-- Populate the "days" table
for d = 1, 31 do
    days[d] = d
end

-- Populate the "years" table
for y = 1, 48 do
    years[y] = 1969 + y
end

-- Configure the picker wheel columns
local columnData = 
{
    -- Months
    { 
        align = "right",
        width = 140,
        startIndex = 5,
        labels = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }
    },
    -- Days
    {
        align = "center",
        width = 60,
        startIndex = 18,
        labels = days
    },
    -- Years
    {
        align = "center",
        width = 80,
        startIndex = 10,
        labels = years
    }
}

-- Image sheet options and declaration
local options = {
    frames = 
    {
        { x=0, y=0, width=320, height=222 },
        { x=320, y=0, width=320, height=222 },
        { x=640, y=0, width=8, height=222 }
    },
    sheetContentWidth = 648,
    sheetContentHeight = 222
}
local pickerWheelSheet = graphics.newImageSheet( "pickerSheet.png", options )

-- Create the widget
local pickerWheel2 = widget.newPickerWheel
{
    top = display.contentHeight - 222,
    columns = columnData,
    sheet = pickerWheelSheet,
    overlayFrame = 1,
    overlayFrameWidth = 320,
    overlayFrameHeight = 222,
    backgroundFrame = 2,
    backgroundFrameWidth = 320,
    backgroundFrameHeight = 222,
    separatorFrame = 3,
    separatorFrameWidth = 8,
    separatorFrameHeight = 222,
    columnColor = { 0, 0, 0, 0 },
    fontColor = { 0.4, 0.4, 0.4, 0.5 },
    fontColorSelected = { 0.2, 0.6, 0.4 }
}

-- Get the table of current values for all columns
-- This can be performed on a button tap, timer execution, or other event
local values = pickerWheel:getValues()

-- Get the value for each column in the wheel (by column index)
local currentMonth = values[1].value
local currentDay = values[2].value
local currentYear = values[3].value

print( currentMonth, currentDay, currentYear )