【在主画面加入捷径】
       
【选择语系】
繁中 简中

Corona SDK 程序设计教学:Radio Button 和 Checkbox

MOBILE
【赞助商连结】

    在本文中,我们展示 Radio Button 和 Checkbox 等元件的使用方式。这两种元件都是给使用者做为选项的元件,其差别在于 Radio Button 只能单选 (即多选一),而 Checkbox 可复选。我们将范例放在这里,本文仅节录部分内容。

    程序的示意图如下:

    Corona SDK 的 radio button 和 checkbox

    由于这个范例所要绘制的元件数量较多,我们将位置相关的参数拉出来成独立的变量,之后可透过调整这些参数来调整元件的位置:

    -- Init some location related parameters.
    local radioLocX = 0.15
    local radioLocY = 0.35
    local radioOffset = 0.08
    
    local itemLocX = 0.72
    local itemLocY = 0.43
    
    local textWidth = 150
    local textLocX = 0.45
    

    接着,我们撰写 Radio Buttons 的 event listener。由于所有的按钮皆使用同一个 listener,我们要在这里侦测目前按的 button 为那一个,侦测的方法是透过检查 switch.id。在本例中,我们选择不同子项目时,程序会绘制不同的多边形:

    -- Init a Shape object.
    local item = display.newCircle(display.contentWidth * itemLocX, display.contentHeight * itemLocY, 35)
    item:setFillColor(255 / 255, 0 / 255, 0 / 255)
    
    -- Declare the listener for radio Switch object.
    local function onSwitchPress( event )
      local switch = event.target
    
      if switch.id == "RadioButton1" then
        item:removeSelf()
    
        item = display.newCircle(display.contentWidth * itemLocX, display.contentHeight * itemLocY, 35)
        item:setFillColor(255 / 255, 0 / 255, 0 / 255)
      elseif switch.id == "RadioButton2" then
        item:removeSelf()
    
        item = display.newRoundedRect(display.contentWidth * itemLocX, display.contentHeight * itemLocY, 75, 50, 10)
        item:setFillColor(0 / 255, 255 / 255, 0 / 255)
      elseif switch.id == "RadioButton3" then
        item:removeSelf()
    
        item = display.newPolygon(display.contentWidth * itemLocX, display.contentHeight * itemLocY,
          {-30, -35, -30, 35, 40, 0})
        item:setFillColor(0 / 255, 0 / 255, 255 / 255)
      end
    end
    

    我们以 radioBtn1btnText1 物件为例,来看如何建立 radio button。在 Corona 程序中,radio button 的圆形按钮和附带的文字是分开的物件,程序人要自己设定好相对位置,看起来才会对齐。另外,要记得将 radioBtn1 加入 radioGroup 群组中,这样按钮间才会有连动关系:

    -- Init a Group object for radio switches.
    local radioGroup = display.newGroup()
    
    -- Init the first radio Switch object.
    local radioBtn1 = widget.newSwitch(
      {
        x = display.contentWidth * radioLocX,
        y = display.contentHeight * (radioLocY+ radioOffset * 0),
        id = "RadioButton1",
        style = "radio",
        initialSwitchState = true,
        onPress = onSwitchPress
      }
    )
    
    -- Insert the first object into the group.
    radioGroup:insert(radioBtn1)
    
    -- Init the text object for the first radio Switch object.
    local btnText1 = display.newText(
      {
        text = "Circle",
        x = display.contentWidth * textLocX,
        y = display.contentHeight * (radioLocY + radioOffset * 0),
        fontSize = 20,
        width = textWidth,
      }
    )
    
    btnText1:setFillColor({ 0, 0, 0 })
    

    radioBtn2radioBtn3 用相同的概念也可写出来,此处不重覆。

    接着,我们由 checkBtn 物件来看 checkbox 如何撰写。如同 radio button,checkbox 的方型按钮和其附带的文字也是分开的,要由程序人自行调整好相对位置。另外,每个 checkbox 按钮是独立的,每个 checkbox 会有自己独立的 event listener:

    -- Declare the holder of the checkbox Switch object.
    local checkBtn
    
    -- Declare the listener of the checkbox Switch object.
    local function onCheckboxPress( event )
      local switch = event.target
    
      if switch.isOn then
        native.showAlert("Checkbox Event", "Checkmate", { "OK" },
          function ( ev )
            if ev.action == "clicked" then
              checkBtn:setState({isOn = false})
            end
          end)
      end
    end
    
    -- Init the checkbox Switch object.
    checkBtn = widget.newSwitch(
      {
        x = display.contentWidth * radioLocX,
        y = display.contentHeight * (radioLocY + radioOffset * 3 + 0.03),
        style = "checkbox",
        onPress = onCheckboxPress,
      }
    )
    
    -- Init the text object for the checkbox object.
    local checkboxText = display.newText(
      {
        text = "Check Me",
        x = display.contentWidth * textLocX,
        y = display.contentHeight * (radioLocY + radioOffset * 3 + 0.03),
        fontSize = 20,
        width = textWidth,
      }
    )
    
    checkboxText:setFillColor(0, 0, 0)
    

    在本例中,我们用 Corona 内建的 native.showAlert 来制作警示对话框,读者可到这里查询其 API。

    【赞助商连结】