2015年4月7日 星期二

[Corona SDK] How to use widget.newTabBar to establish tab bar?

Tab is quite often used in Windows style UI.
Due to the low resolution, it is seldom used in phone APPs, especially for game APPs.
However, for tools like APPs or menu, it is still useful to use Tab style.
It can let the UI more tidy and easy to manipulate.

To establish a tab is quite simple.
We just use widget.newTabBar as demonstrated below:
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) 
We need to declare require( "widget" ) if we want to use widget.
In widget.newTabBar, we just need to add the parameter buttons = tabButton.
The tab bar is built already.
In tabButtons, we can add function in onPress event to define our action when the tab bar is selected.
Below is the result:
If we want our tab to be more interesting, we can put the pictures on tab bars:
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
  }
 }
In the example above, the default picture for tab 2 is 1.png
When it is selected, the picture will be 2.png.
Please note that the width and height parameters must be specified when we use pictures.
The result:

沒有留言:

張貼留言