Corona Widget-Switch & Segmented control

Widget 是corona 一個很重要的工具

它提供開發者簡易的使用客製UI

像是button,picker,scrollview,tableview,tabbar,slider等

欲知詳細情形可參考文件

在這裡要介紹的是Build 947後新增的兩個widget - Switch & Segmented Control

(請記得您的開發版本要是947版本以上才可以使用)

Switch Widget提供了以下三個種類

Segmented Control 示意如下

是不是很眼熟很常見呢：），沒錯，如果您是IOS使用者的話，這些元件一定多少都有見過，

目前Corona 針對IOS情境提供Widget(Android情境將會在之後發佈)

要使用widget的方法如下：

第一步

local widget = require( "widget" ) --必須先將library widget匯入

第二步

需要將CoronaSDK/SampleCode/Interface/WidgetDemo 資料夾中

theme_ios.lua 及widget_os資料夾copy到您的main project中

第三步

要設定widget的情境(設定為ios之情境)

widget.setTheme( "theme_ios" )

完成了前面三步就可以開始使用widget囉

Switch

在使用Switch之前，先定義一個Event Listener讓程式可以接收判斷Switch的狀態

local function onSwitchPress( event )
   local switch = event.target  --event.target references the switch object
   local response = switch.id.." is on: "..tostring( switch.isOn )
   print( response ) --印出ID及狀態，如下
   --My radio button widget is on: true 
   --My checkbox widget is on: true 
   --My on/off switch widget is on: true 
   switch.text:setText( tostring( switch.isOn ) ) --設置switch上方文字,此處需注意on/off switch不需要設置
end

再來撰寫三種switch的程式碼

local checkbox = widget.newSwitch
{
   left = 60,
   top = 230,
   style = "checkbox",
   id = "My checkbox widget",
   initialSwitchState = false,
   onPress = onSwitchPress
}

-- Text to show the on/off switch state
checkbox.text = display.newEmbossedText( tostring( checkbox.isOn ), 0, 0, native.systemFontBold, 18 )
checkbox.text.x = checkbox.x
checkbox.text.y = checkbox.y - checkbox.text.contentHeight

local radioButton = widget.newSwitch
{
   left = 150,
   top = 230,
   style = "radio",
   id = "My radio button widget",
   initialSwitchState = false,
   onPress = onSwitchPress
}

-- Text to show the on/off switch state
radioButton.text = display.newEmbossedText( tostring( radioButton.isOn ), 0, 0, native.systemFontBold, 18 )
radioButton.text.x = radioButton.x
radioButton.text.y = radioButton.y - radioButton.text.contentHeight

local onOffSwitch = widget.newSwitch
{
   left = 250,
   top = 230,
   id = "My on/off switch widget",
   initialSwitchState = true,
   onRelease = onSwitchPress
}

newSwitch各參數代表

• left:widget距螢幕左方距離(pixel)
• top:widget距螢幕上方距離(pixel)
• style: radio/checkbox(default on/off switch)
• id:widget ID,用來識別widget 身份
• initialSwitchState:初始值，可以true/false,預設為false
• onRelease/onPress:使用者觸壓時觸發Event

執行結果如下

Segmented Control

在使用Segmented Control 之前，同樣的需要一個EventListener

local function onControlPress( event )
   local target = event.target
   print( "Segment Label is:", target.segmentLabel ) --segmentLabel用來判斷點選的文字
   print( "Segment Number is:", target.segmentNumber ) --segmentNumber用來判斷點選的位置
end

再來建立Segmented Control 的widget

local segmentedControl = widget.newSegmentedControl
{
   left = 65,
   top = 110,
   segments = { "s1", "s2", "s3", "s4" },
   segmentWidth = 50,
   defaultSegment = 4,
   onPress = onControlPress
}

newSwitch各參數代表

• left:widget距螢幕左方距離(pixel)
• top:widget距螢幕上方距離(pixel)
• segments:segments的陣列
• segmentWidth:每個segment的寬度，預設為50 pixel
• defaultSegment:初始選擇Segment位置
• onRelease/onPress:使用者觸壓時觸發Event

執行結果如下

今天介紹的是很實用的widget呢

Corona在widget這塊未來將會釋放更多的元件讓大家使用，敬請期待吧

島民 也會持續Follow最新的更新來告訴大家

最後，完整的程式碼如下

local widget = require( "widget" )
widget.setTheme( "theme_ios" )
display.newRect(0,0,display.contentWidth,display.contentHeight)
local function onSwitchPress( event )
   local switch = event.target  --event.target references the switch object
   local response = switch.id.." is on: "..tostring( switch.isOn )
   print( response )
   switch.text:setText( tostring( switch.isOn ) )
end

local checkbox = widget.newSwitch
{
   left = 60,
   top = 230,
   style = "checkbox",
   id = "My checkbox widget",
   initialSwitchState = false,
   onPress = onSwitchPress
}

-- Text to show the on/off switch state
checkbox.text = display.newEmbossedText( tostring( checkbox.isOn ), 0, 0, native.systemFontBold, 18 )
checkbox.text.x = checkbox.x
checkbox.text.y = checkbox.y - checkbox.text.contentHeight

local radioButton = widget.newSwitch
{
   left = 150,
   top = 230,
   style = "radio",
   id = "My radio button widget",
   initialSwitchState = false,
   onPress = onSwitchPress
}

-- Text to show the on/off switch state
radioButton.text = display.newEmbossedText( tostring( radioButton.isOn ), 0, 0, native.systemFontBold, 18 )
radioButton.text.x = radioButton.x
radioButton.text.y = radioButton.y - radioButton.text.contentHeight

local onOffSwitch = widget.newSwitch
{
   left = 250,
   top = 230,
   id = "My on/off switch widget",
   initialSwitchState = true,
   onRelease = onSwitchPress
}

local function onControlPress( event )
   local target = event.target
   print( "Segment Label is:", target.segmentLabel )
   print( "Segment Number is:", target.segmentNumber )
end
local segmentedControl = widget.newSegmentedControl
{
   left = 65,
   top = 110,
   segments = { "s1", "s2", "s3", "s4" },
   segmentWidth = 50,
   defaultSegment = 4,
   onPress = onControlPress
}