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:
沒有留言:
張貼留言