[Corona SDK] 如何使用widget.newTabBar 建立tab bar?

Tab在視窗操作中算是很實用的方式,
在手機遊戲程式裡,Tab倒是少人用,
不過,如果是有點工具類性質的操作畫面,
個人覺得用上Tab可以使畫面更加簡潔，
操作起來也方便快速...

要建立一個tab很簡單，只要使用widget.newTabBar即可，
如下面只要幾行即可：

display.setStatusBar( display.HiddenStatusBar )
local widget = require( "widget" )

local function runTab1(event )
 display.remove( text2 )
 text1 = display.newText( "Tab 1", 100, 100, native.systemFont, 40 )
end

local function runTab2(event )
 display.remove( text1 )
 text2 = display.newText( "Tab 2", 100, 100, native.systemFont, 40 )
end


 -- Create buttons table for the tabBar
 local tabButtons = 
 {
  {
   label = "tab1",
   id = "tab1",
   size = 40,
   onPress = runTab1, 
   selected = true
  },
  {
   label = "tab2",
   id = "tab2",
   size = 40,
   onPress = runTab2
  }
 }

 -- Create tabBar at bottom of the screen
 local tabBar = widget.newTabBar
 {
  buttons = tabButtons
 }

 tabBar.y = display.contentHeight - (tabBar.height/2) 

要使用widget，需要宣告require( "widget" )，
在widget.newTabBar裡帶入buttons = tabButton即可建立tab bar，
上面的範例裡，我們建立二個tab 按鈕，
在tabButtons裡的onPress 可帶入按下tab按鈕後想執行的動作，
下面是執行結果：

另外，如果希望tab按鈕可以多一個變化，

我們也可以把圖形放在上面，例如：

local tabButtons = 
 {
  {
   label = "tab1",
   id = "tab1",
   size = 40,
   onPress = runTab1, 
   selected = true
  },
  {
   label = "tab2",
   id = "tab2",
   size = 40,
   width = 232,
   height = 40,
         defaultFile = "1.png",
         overFile = "2.png",
   onPress = runTab2
  }
 }

上面的例子裡，tab2預設的圖形是1.png，選到時的圖形是2.png，
需注意此時width和height的參數必須指定，
執行如果如下：