[Corona SDK] 程式設計教學:利用 Composer 在應用程式中切換頁面

MOBILE
【分享本文】
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
【贊助商連結】

    在先前的範例中,我們的程式皆位在單一頁面上;透過 Corona 提供的 composer 函式庫,我們的程式可在不同頁面間切換。我們將完整的程式碼放在這裡,本文僅節錄部分內容。

    程式的示意圖如下:

    Corona SDK 的 Composer 範例

    本範例的 main.lua 相當簡單:

    local composer = require("composer")
    
    composer.gotoScene("index")

    因為我們的主程式只是用來過水到第一個場景 (scene) 而已。

    由於場景的程式碼比較長,在觀看真正的程式碼前,我們先將架構的部分抽出來看:

    local composer = require("composer")
    
    local scene = composer.newScene()
    
    -- create()
    function scene:create( event )
    end
    
    -- show()
    function scene:show( event )
    end
    
    -- hide()
    function scene:hide( event )
    end
    
    -- destroy()
    function scene:destroy( event )
    end
    
    scene:addEventListener( "create", scene )
    scene:addEventListener( "show", scene )
    scene:addEventListener( "hide", scene )
    scene:addEventListener( "destroy", scene )
    
    return scene

    在 Corona 程式中,場景要寫成 Lua 模組 (module),供其他程式呼叫。如果不熟模組如何撰寫,可以參考這裡的說明。

    場景有 "create""show""hide""destroy" 四個生命階段,分別對應頁面生成、顯示、隱藏、銷毀等不同階段。我們在撰寫 Corona 的場景時,就是依照這樣的架構,各自填入不同階段所要進行的行為即可。

    接下來,我們會用本範例程式展示場景的四個階段。

    在一開始,我們先準備一段無意義的文字 (lorem ipsum),用來填充版面:

    local text = "Lorem ipsum dolor sit amet, vix ut persius laoreet consulatu, "
      .. "et populo equidem fastidii vel. Usu no scripta similique. "
      .. "Numquam fabellas his ex. Et ius dictas dolores forensibus, "
      .. "ea propriae salutatus sea. Per ei veri dicta conclusionemque, "
      .. "exerci eripuit per ex, tale appareat efficiendi nec et."

    這種無意義文字稱為 lorem ipsum,主要的用途是用一些沒有實際意義的文字填塞版面,用來看排版的效果,在國外的網頁教學有時候會看到這個東西。

    如果讀者需要一些填塞版面的文字,不用自己生,網路上可以找到一些生成器,像是這個

    create 階段,我們產生三個物件,程式碼如下:

    -- create()
    function scene:create( event )
      local sceneGroup = self.view
    
      local title = display.newText(
        {
          text = "My App",
          x = display.contentWidth * 0.5,
          y = display.contentHeight * 0.12,
          fontSize = 28,
        }
      )
    
      title:setFillColor(0 / 255, 0 / 255, 0 / 255)
    
      sceneGroup:insert(title)
    
      local content = display.newText(
        {
          text = text,
          x = display.contentWidth * 0.5,
          y = display.contentHeight * 0.45,
          width = display.contentWidth * 0.9,
          fontSize = 18,
        }
      )
    
      content:setFillColor(0 / 255, 0 / 255, 0 / 255)
    
      sceneGroup:insert(content)
    
      local btnNext = widget.newButton(
        {
          x = display.contentWidth * 0.5,
          y = display.contentHeight * 0.85,
          label = "Next",
          fontSize = 20,
          emboss = false,
          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},
          },
          onEvent = function (ev)
            composer.gotoScene("next")
          end
        }
      )
    
      sceneGroup:insert(btnNext)
    end

    這些物件的生成方式我們先前都看過了,此處的重點在於用 sceneGroup 將這些物件串連起來,之後就可以一起調整其可視度。另外注意我們將切換場景的動作藏在按鈕的事件處理器中。

    show 階段中,又會在細分兩個時期,分別是 "will""did",前者在場照即將開始時發動,後者則是在場景顯示在螢幕後發動。程式碼參考如下:

    -- show()
    function scene:show( event )
    
      local sceneGroup = self.view
      local phase = event.phase
    
      if ( phase == "will" ) then
        sceneGroup.isVisible = true
      elseif ( phase == "did" ) then
    
      end
    end

    有關該場景的詳細說明在此,讀者可自行參考。

    同樣地,在 hide 階段也分為兩階段:

    function scene:hide( event )
      local sceneGroup = self.view
      local phase = event.phase
    
      if ( phase == "will" ) then
    
      elseif ( phase == "did" ) then
        sceneGroup.isVisible = false
      end
    end

    有關該場景的詳細說明在此

    destroy 階段,我們會將物件銷毀,以釋放記憶體等系統資源:

    function scene:destroy( event )
      local sceneGroup = self.view
      -- Code here runs prior to the removal of scene's view
    
      sceneGroup:removeSelf()
    end

    在本範例程式中共有三個場景,另兩個場景的概念雷同,故不重覆展示。

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
    【支持站長】
    Buy me a coffeeBuy me a coffee
    【贊助商連結】
    【分類瀏覽】