首页 > 代码库 > Corona手游教程之widget：PickerWheel篇

Corona手游教程之widget：PickerWheel篇

2024-11-13 12:04:39   202人阅读

首先什么是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" tablefor d = 1, 31 do    days[d] = dend-- Populate the "years" tablefor y = 1, 48 do    years[y] = 1969 + yend-- Configure the picker wheel columnslocal columnData =http://www.mamicode.com/ {    -- 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 widgetlocal 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 eventlocal values = pickerWheel:getValues()-- Get the value for each column in the wheel (by column index)local currentMonth = values[1].valuelocal currentDay = values[2].valuelocal currentYear = values[3].valueprint( 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" tablefor d = 1, 31 do    days[d] = dend-- Populate the "years" tablefor y = 1, 48 do    years[y] = 1969 + yend-- Configure the picker wheel columnslocal columnData =http://www.mamicode.com/ {    -- 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 declarationlocal 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 widgetlocal 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 eventlocal values = pickerWheel:getValues()-- Get the value for each column in the wheel (by column index)local currentMonth = values[1].valuelocal currentDay = values[2].valuelocal currentYear = values[3].valueprint( currentMonth, currentDay, currentYear )

 

Corona手游教程之widget：PickerWheel篇


联系
我们