安裝本網站至主畫面:

[Corona SDK] 程式設計教學:TabBar

PUBLISHED ON DEC 9, 2018 — MOBILE
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    在 Corona 中,有兩種分頁的方式:TabBar 是在同一個頁面中切分成數個子頁面,而 Composer 是在不同頁面中切換;本文介紹 TabBar 的使用方式。我們將完整的程式碼放在這裡,本文僅節錄部分內容。

    本範例的示意圖如下:

    Corona SDK 的 TabBar 範例

    為了區分不同子頁面,我們在每個頁面做簡易的文字物件,參考程式碼如下:

    local text1 = display.newText(
      {
        text = "Page 1",
        x = display.contentWidth * 0.5,
        y = display.contentHeight * 0.45,
        fontSize = 20,
      }
    )
    
    text1:setFillColor(0 / 255, 0 / 255, 0 / 255)
    text1.isVisible = true

    text2text2 用同概念即可生成,此處不重覆。

    接著,我們來看如何配置 Tab:

    -- Configure the tab buttons to appear within the bar
    local tabButtons = {
      {
        label = "Tab1",
        id = "tab1",
        size = 20,
        selected = true,
        onPress = function ()
          text1.isVisible = true
          text2.isVisible = false
          text3.isVisible = false
        end
      },
      {
        label = "Tab2",
        id = "tab2",
        size = 20,
        onPress = function ()
          text1.isVisible = false
          text2.isVisible = true
          text3.isVisible = false
        end
      },
      {
        label = "Tab3",
        id = "tab3",
        size = 20,
        onPress = function ()
          text1.isVisible = false
          text2.isVisible = false
          text3.isVisible = true
        end
      }
    }

    由於我們的範例偏短,故我們將所有的內容寫在一起,如果程式碼較長,建議將函式的部分獨立出來。

    在本例中,每個子頁面只有單一物件,故我們直接控制其可視 (visible) 與否。如果有多個物件,建議用 GroupObject 將同一個子頁面的物件連動,控制可視度時程式碼會較簡潔。

    最後,建立 tabBar 物件:

    -- Create the widget
    local tabBar = widget.newTabBar(
      {
        top = display.contentHeight - 100,
        width = display.contentWidth,
        buttons = tabButtons
      }
    )

    其實這部分程式碼很簡單,因複雜的內容都在 tabButtons 中。

    你或許對以下產品有興趣