美思 [Solar2D] 程式設計教學:使用 TabBar 建立子分頁

Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

[注意事項] Corona 已改名為 Solar2D

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

本範例的示意圖如下:

{{< figure src="img/corona-sdk/tabbar.png" alt="Solar2D 的 TabBar 範例" class="phone" >}}

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

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,TabBar 主要的設定都在這裡:

-- 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
  }
}

由於我們的範例偏短,故我們直接把事件處理器 (event handler) 寫在匿名函式 (anonymous function) 中,如果程式碼較長,建議將處理器的部分獨立出來。

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

最後,建立 tabBar 物件:

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

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

關於作者

身為資訊領域碩士,美思認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

美思喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,美思將所學寫成文章,放在這個網站上和大家分享。