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

[注意事項] 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

text2、text2 用同概念即可生成，此處不重覆。

接著，我們來看如何配置 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 中。