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

Corona SDK 程序设计教学:ProgressView、Stepper、Switch

MOBILE
【赞助商连结】

    本文仍然是元件的练习,学习的重点在操作 ProgressView、Stepper 和 Switch 等元件。ProgressView 是图形接口程序中的进度条 (progress bar),常常用来显示程序运行的进度。Stepper 可递增 (或减) 程序内部的某项状态。Switch 则像是开关,只有开 (on) 和关 (off) 两种状态。

    由于范例稍长,我们将完整范例放在这里,本文仅节录部分内容。

    本范例程序开启的画面如下:

    在 Corona 程序中,藉由按钮触发事件

    一开始,我们建立 progressView 物件,该物件内部的计数器为 progressprogress 的数字为介于 0.01.0 间的浮点数:

    -- Init the internal counter of the progress view.
    local progress = 0
    
    -- Init the ProgressView object.
    local progressView =
      widget.newProgressView(
        {
          x = display.contentWidth * 0.47,
          y = display.contentHeight * 0.36,
          width = display.contentWidth * 0.7,
          isAnimated = false
        }
      )
    
    -- Set the initial progress for the ProgressView object.
    progressView:setProgress(progress)
    

    我们另外声明了几个变量。由于 Lua 本身的特性,我们很难直接从程序代码看出每个变量的意义,这大概只能在必要时加强注解。stepper 是一个 Stepper 物件的变量,因为待会有几个 event handler 会调用此变量,故在此提前声明。count 是用来调整 progress 的计数器,step 是用来调整 stepper 内部状态的计数器,而 isRunning 则是用来调整一个 Switch 的内部状态的旗标:

    -- Init some parameters.
    local stepper
    local step = 0
    local count = 0
    local isRunning = true
    

    我们在此建立按钮物件 btnProgress 和其 event handler btnProgressListener。在此 event handler 中,我们要先确认 isRunning 的状态为 true,若为真,则启动一个 timertimer 的参数为时间差、一个回调函式 (callback) 和执行次数,我们将时间差调到 5 ms,让 progressView 的进度条跑快一点;执行次数和 count 的值相反,当 count1 时,执行 100 次,而 count 较高时,则执行次数会变少;真正执进程序行为的程序代码位于回调函式中,在每轮调整 progressView 的值,看起来就有移动的效果,另外同步 stepper 内部的状态:

    -- Declare the listener to the progress Button object.
    local function btnProgressListener(event)
      if isRunning and event.phase == "ended" then
        timer.performWithDelay(
          5,
          function()
            if count < 100 then
              count = count + 1
            end
    
            progress = count / 100
            progressView:setProgress(progress)
    
            if count % 10 == 0 then
              step = count / 10
              stepper:setValue(step)
            end
          end,
          101 - count
        )
      end
    end
    
    -- Init the progress Button object.
    local btnProgress =
      widget.newButton(
        {
          left = display.contentWidth * 0.12,
          top = display.contentHeight * 0.44,
          label = "Run",
          isEnabled = true,
          onEvent = btnProgressListener,
          shape = "roundedRect",
          width = 100,
          labelColor = {
            default = {0 / 255, 0 / 255, 0 / 255},
            over = {0 / 255, 0 / 255, 0 / 255}
          },
          fillColor = {
            default = {180 / 255, 255 / 255, 255 / 255},
            over = {110 / 255, 255 / 255, 255 / 255}
          }
        }
      )
    

    btnRollback 基本上做类似的事情,只是方向相反,此处不重覆贴出程序代码。

    接着,我们建立 stepper 物件及其 event handler onStepperPress。在建立 Stepper 物件时,要设置其 initialValue (起始值)、minValue (最小值)、maxValue (最大值),之后再调整 Stepper 时,就是… Stepper 的 event handler 要处理四个阶段,分别是 "increment" (递增)、"decrement" (递减)、"minLimit" (极小值)、"maxLimit" (极大值)。程序代码如下:

    -- Declare the listener to Stepper object.
    local function onStepperPress(event)
      if isRunning then
        if event.phase == "increment" then
          step = step + 1
          count = (step / 10) * 100
          stepper:setValue(step)
          progress = step / 10
          progressView:setProgress(progress)
        elseif event.phase == "decrement" then
          step = step - 1
          count = (step / 10) * 100
          stepper:setValue(step)
          progress = step / 10
          progressView:setProgress(progress)
        elseif event.phase == "minLimit" then
        -- Pass.
        elseif event.phase == "maxLimit" then
        -- Pass.
        end
      end
    end
    
    -- Init the Stepper object.
    stepper =
      widget.newStepper(
        {
          x = display.contentWidth * 0.35,
          y = display.contentHeight * 0.64,
          initialValue = step,
          minimumValue = 0,
          maximumValue = 10,
          onPress = onStepperPress
        }
      )
    

    在本范例中,onOff 元件的作用在于控制其他的元件是否有作用,当 onOff 元件为关时,其他元件不会有反应,调控的方法是调整 isRunning 这个内部的旗标:

    -- Declare the listener to on-off Switch object.
    local function onOffPress(event)
      local switch = event.target
    
      if switch.isOn then
        isRunning = false
      else
        isRunning = true
      end
    end
    
    -- Init the on-off Switch object.
    local onOff =
      widget.newSwitch(
        {
          x = display.contentWidth * 0.65,
          y = display.contentHeight * 0.64,
          initialSwitchState = true,
          onPress = onOffPress
        }
      )
    
    【赞助商连结】