Corona 程式設計教學:Radio Button 和 Checkbox

PUBLISHED ON NOV 8, 2018 — 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。