Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

First Commit

  • Loading branch information...
commit 412d2142cadd089d3061054fcccf294e44479880 0 parents
Cesar Miranda mirandacw88 authored
BIN  Icon-72.png
BIN  Icon-hdpi.png
BIN  Icon-ldpi.png
BIN  Icon-mdpi.png
BIN  Icon.png
BIN  Icon@2x.png
BIN  backButton.png
BIN  backButton_over.png
15 build.settings
... ... @@ -0,0 +1,15 @@
  1 +settings =
  2 +{
  3 + iphone =
  4 + {
  5 + plist =
  6 + {
  7 + CFBundleIconFile = "Icon.png",
  8 + CFBundleIconFiles = {
  9 + "Icon.png",
  10 + "Icon@2x.png",
  11 + "Icon-72.png",
  12 + },
  13 + },
  14 + }
  15 +}
12 config.lua
... ... @@ -0,0 +1,12 @@
  1 +-- config.lua
  2 +
  3 +application =
  4 +{
  5 + content =
  6 + {
  7 + width = 320,
  8 + height = 480,
  9 + scale = "letterbox"
  10 +
  11 + },
  12 +}
69 main.lua
... ... @@ -0,0 +1,69 @@
  1 +--
  2 +-- Abstract: Tab Bar sample app
  3 +--
  4 +-- Version: 1.0
  5 +--
  6 +-- Sample code is MIT licensed, see http://developer.anscamobile.com/code/license
  7 +-- Copyright (C) 2010 ANSCA Inc. All Rights Reserved.
  8 +--
  9 +-- Demonstrates how to create a tab bar that allows the user to navigate between screens,
  10 +-- using the View Controller Library, viewController.lua.
  11 +
  12 +--import external classes
  13 +local ui = require("ui")
  14 +local viewController = require("viewController")
  15 +
  16 +local mainView, tabView, currentScreen, tabBar
  17 +
  18 +local function loadScreen(newScreen)
  19 + if currentScreen then
  20 + currentScreen:cleanUp()
  21 + end
  22 + currentScreen = require(newScreen).new()
  23 + tabView:insert(currentScreen)
  24 +
  25 + return true
  26 +end
  27 +
  28 +local function showScreen(event)
  29 + local t = event.target
  30 + local phase = event.phase
  31 +
  32 + if phase == "ended" then
  33 + if t.id == 1 then
  34 + loadScreen("screen1")
  35 + elseif t.id == 2 then
  36 + loadScreen("screen2")
  37 + elseif t.id == 3 then
  38 + loadScreen("screen3")
  39 + end
  40 + tabBar.selected(t)
  41 + end
  42 +
  43 + return true
  44 +end
  45 +
  46 +local function init()
  47 + --Create a group that contains the entire screen and tab bar
  48 + mainView = display.newGroup()
  49 +
  50 + --Create a group that contains the screens beneath the tab bar
  51 + tabView = display.newGroup()
  52 + mainView:insert(tabView)
  53 +
  54 + loadScreen("screen1")
  55 +
  56 + tabBar = viewController.newTabBar{
  57 + background = "tabBar.png", --tab bar background
  58 + tabs = {"Play", "News", "About"}, --names to appear under each tab icon
  59 + onRelease = showScreen --function to execute when pressed
  60 + }
  61 + mainView:insert(tabBar)
  62 +
  63 + tabBar.selected()
  64 +
  65 + return true
  66 +end
  67 +
  68 +--Start the program!
  69 +init()
31 screen1.lua
... ... @@ -0,0 +1,31 @@
  1 +--
  2 +-- Abstract: Tab Bar sample app, example content screen
  3 +--
  4 +-- Version: 1.0
  5 +--
  6 +-- Sample code is MIT licensed, see http://developer.anscamobile.com/code/license
  7 +-- Copyright (C) 2010 ANSCA Inc. All Rights Reserved.
  8 +--
  9 +-- This file is used to display the corresponding screen content when the user clicks the tab bar.
  10 +
  11 +module(..., package.seeall)
  12 +
  13 +function new()
  14 + local g = display.newGroup()
  15 +
  16 + local background = display.newRect(0,display.screenOriginY, display.contentWidth, display.contentHeight-display.screenOriginY)
  17 + background:setFillColor(255, 255, 255)
  18 + g:insert(background)
  19 +
  20 + local message = display.newText("Screen 1", 0, 0, native.systemFontBold, 16)
  21 + message:setTextColor(0, 0, 0)
  22 + message.x = display.contentWidth*0.5
  23 + message.y = display.contentHeight*0.5
  24 + g:insert(message)
  25 +
  26 + function g:cleanUp()
  27 + g:removeSelf()
  28 + end
  29 +
  30 + return g
  31 +end
31 screen2.lua
... ... @@ -0,0 +1,31 @@
  1 +--
  2 +-- Abstract: Tab Bar sample app, example content screen
  3 +--
  4 +-- Version: 1.0
  5 +--
  6 +-- Sample code is MIT licensed, see http://developer.anscamobile.com/code/license
  7 +-- Copyright (C) 2010 ANSCA Inc. All Rights Reserved.
  8 +--
  9 +-- This file is used to display the corresponding screen content when the user clicks the tab bar.
  10 +
  11 +module(..., package.seeall)
  12 +
  13 +function new()
  14 + local g = display.newGroup()
  15 +
  16 + local background = display.newRect(0,display.screenOriginY, display.contentWidth, display.contentHeight-display.screenOriginY)
  17 + background:setFillColor(255, 255, 255)
  18 + g:insert(background)
  19 +
  20 + local message = display.newText("Screen 2", 0, 0, native.systemFontBold, 16)
  21 + message:setTextColor(0, 0, 0)
  22 + message.x = display.contentWidth*0.5
  23 + message.y = display.contentHeight*0.5
  24 + g:insert(message)
  25 +
  26 + function g:cleanUp()
  27 + g:removeSelf()
  28 + end
  29 +
  30 + return g
  31 +end
31 screen3.lua
... ... @@ -0,0 +1,31 @@
  1 +--
  2 +-- Abstract: Tab Bar sample app, example content screen
  3 +--
  4 +-- Version: 1.0
  5 +--
  6 +-- Sample code is MIT licensed, see http://developer.anscamobile.com/code/license
  7 +-- Copyright (C) 2010 ANSCA Inc. All Rights Reserved.
  8 +--
  9 +-- This file is used to display the corresponding screen content when the user clicks the tab bar.
  10 +
  11 +module(..., package.seeall)
  12 +
  13 +function new()
  14 + local g = display.newGroup()
  15 +
  16 + local background = display.newRect(0,display.screenOriginY, display.contentWidth, display.contentHeight-display.screenOriginY)
  17 + background:setFillColor(255, 255, 255)
  18 + g:insert(background)
  19 +
  20 + local message = display.newText("Screen 3", 0, 0, native.systemFontBold, 16)
  21 + message:setTextColor(0, 0, 0)
  22 + message.x = display.contentWidth*0.5
  23 + message.y = display.contentHeight*0.5
  24 + g:insert(message)
  25 +
  26 + function g:cleanUp()
  27 + g:removeSelf()
  28 + end
  29 +
  30 + return g
  31 +end
BIN  tab1.png
BIN  tab1_over.png
BIN  tab2.png
BIN  tab2_over.png
BIN  tab3.png
BIN  tab3_over.png
BIN  tabBar.png
289 ui.lua
... ... @@ -0,0 +1,289 @@
  1 +-- ui.lua (currently includes Button class with labels, font selection and optional event model)
  2 +
  3 +-- Version 1.5 (works with multitouch, adds setText() method to buttons)
  4 +--
  5 +-- Copyright (C) 2010 ANSCA Inc. All Rights Reserved.
  6 +--
  7 +-- Permission is hereby granted, free of charge, to any person obtaining a copy of
  8 +-- this software and associated documentation files (the "Software"), to deal in the
  9 +-- Software without restriction, including without limitation the rights to use, copy,
  10 +-- modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
  11 +-- and to permit persons to whom the Software is furnished to do so, subject to the
  12 +-- following conditions:
  13 +--
  14 +-- The above copyright notice and this permission notice shall be included in all copies
  15 +-- or substantial portions of the Software.
  16 +--
  17 +-- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
  18 +-- INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
  19 +-- PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
  20 +-- FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
  21 +-- OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  22 +-- DEALINGS IN THE SOFTWARE.
  23 +
  24 +module(..., package.seeall)
  25 +
  26 +-----------------
  27 +-- Helper function for newButton utility function below
  28 +local function newButtonHandler( self, event )
  29 +
  30 + local result = true
  31 +
  32 + local default = self[1]
  33 + local over = self[2]
  34 +
  35 + -- General "onEvent" function overrides onPress and onRelease, if present
  36 + local onEvent = self._onEvent
  37 +
  38 + local onPress = self._onPress
  39 + local onRelease = self._onRelease
  40 +
  41 + local buttonEvent = {}
  42 + if (self._id) then
  43 + buttonEvent.id = self._id
  44 + end
  45 +
  46 + local phase = event.phase
  47 + if "began" == phase then
  48 + if over then
  49 + default.isVisible = false
  50 + over.isVisible = true
  51 + end
  52 +
  53 + if onEvent then
  54 + buttonEvent.phase = "press"
  55 + result = onEvent( buttonEvent )
  56 + elseif onPress then
  57 + result = onPress( event )
  58 + end
  59 +
  60 + -- Subsequent touch events will target button even if they are outside the contentBounds of button
  61 + display.getCurrentStage():setFocus( self, event.id )
  62 + self.isFocus = true
  63 +
  64 + elseif self.isFocus then
  65 + local bounds = self.contentBounds
  66 + local x,y = event.x,event.y
  67 + local isWithinBounds =
  68 + bounds.xMin <= x and bounds.xMax >= x and bounds.yMin <= y and bounds.yMax >= y
  69 +
  70 + if "moved" == phase then
  71 + if over then
  72 + -- The rollover image should only be visible while the finger is within button's contentBounds
  73 + default.isVisible = not isWithinBounds
  74 + over.isVisible = isWithinBounds
  75 + end
  76 +
  77 + elseif "ended" == phase or "cancelled" == phase then
  78 + if over then
  79 + default.isVisible = true
  80 + over.isVisible = false
  81 + end
  82 +
  83 + if "ended" == phase then
  84 + -- Only consider this a "click" if the user lifts their finger inside button's contentBounds
  85 + if isWithinBounds then
  86 + if onEvent then
  87 + buttonEvent.phase = "release"
  88 + result = onEvent( buttonEvent )
  89 + elseif onRelease then
  90 + result = onRelease( event )
  91 + end
  92 + end
  93 + end
  94 +
  95 + -- Allow touch events to be sent normally to the objects they "hit"
  96 + display.getCurrentStage():setFocus( self, nil )
  97 + self.isFocus = false
  98 + end
  99 + end
  100 +
  101 + return result
  102 +end
  103 +
  104 +
  105 +---------------
  106 +-- Button class
  107 +
  108 +function newButton( params )
  109 + local button, default, over, size, font, textColor, offset
  110 +
  111 + if params.default then
  112 + button = display.newGroup()
  113 + default = display.newImage( params.default )
  114 + button:insert( default, true )
  115 + end
  116 +
  117 + if params.over then
  118 + over = display.newImage( params.over )
  119 + over.isVisible = false
  120 + button:insert( over, true )
  121 + end
  122 +
  123 + -- Public methods
  124 + function button:setText( newText )
  125 +
  126 + local labelText = self.text
  127 + if ( labelText ) then
  128 + labelText:removeSelf()
  129 + self.text = nil
  130 + end
  131 +
  132 + local labelShadow = self.shadow
  133 + if ( labelShadow ) then
  134 + labelShadow:removeSelf()
  135 + self.shadow = nil
  136 + end
  137 +
  138 + local labelHighlight = self.highlight
  139 + if ( labelHighlight ) then
  140 + labelHighlight:removeSelf()
  141 + self.highlight = nil
  142 + end
  143 +
  144 + if ( params.size and type(params.size) == "number" ) then size=params.size else size=20 end
  145 + if ( params.font ) then font=params.font else font=native.systemFontBold end
  146 + if ( params.textColor ) then textColor=params.textColor else textColor={ 255, 255, 255, 255 } end
  147 +
  148 + -- Optional vertical correction for fonts with unusual baselines (I'm looking at you, Zapfino)
  149 + if ( params.offset and type(params.offset) == "number" ) then offset=params.offset else offset = 0 end
  150 +
  151 + if ( params.emboss ) then
  152 + -- Make the label text look "embossed" (also adjusts effect for textColor brightness)
  153 + local textBrightness = ( textColor[1] + textColor[2] + textColor[3] ) / 3
  154 +
  155 + labelHighlight = display.newText( newText, 0, 0, font, size )
  156 + if ( textBrightness > 127) then
  157 + labelHighlight:setTextColor( 255, 255, 255, 20 )
  158 + else
  159 + labelHighlight:setTextColor( 255, 255, 255, 140 )
  160 + end
  161 + button:insert( labelHighlight, true )
  162 + labelHighlight.x = labelHighlight.x + 1.5; labelHighlight.y = labelHighlight.y + 1.5 + offset
  163 + self.highlight = labelHighlight
  164 +
  165 + labelShadow = display.newText( newText, 0, 0, font, size )
  166 + if ( textBrightness > 127) then
  167 + labelShadow:setTextColor( 0, 0, 0, 128 )
  168 + else
  169 + labelShadow:setTextColor( 0, 0, 0, 20 )
  170 + end
  171 + button:insert( labelShadow, true )
  172 + labelShadow.x = labelShadow.x - 1; labelShadow.y = labelShadow.y - 1 + offset
  173 + self.shadow = labelShadow
  174 + end
  175 +
  176 + labelText = display.newText( newText, 0, 0, font, size )
  177 + labelText:setTextColor( textColor[1], textColor[2], textColor[3], textColor[4] )
  178 + button:insert( labelText, true )
  179 + labelText.y = labelText.y + offset
  180 + self.text = labelText
  181 + end
  182 +
  183 + if params.text then
  184 + button:setText( params.text )
  185 + end
  186 +
  187 + if ( params.onPress and ( type(params.onPress) == "function" ) ) then
  188 + button._onPress = params.onPress
  189 + end
  190 + if ( params.onRelease and ( type(params.onRelease) == "function" ) ) then
  191 + button._onRelease = params.onRelease
  192 + end
  193 +
  194 + if (params.onEvent and ( type(params.onEvent) == "function" ) ) then
  195 + button._onEvent = params.onEvent
  196 + end
  197 +
  198 + -- Set button as a table listener by setting a table method and adding the button as its own table listener for "touch" events
  199 + button.touch = newButtonHandler
  200 + button:addEventListener( "touch", button )
  201 +
  202 + if params.x then
  203 + button.x = params.x
  204 + end
  205 +
  206 + if params.y then
  207 + button.y = params.y
  208 + end
  209 +
  210 + if params.id then
  211 + button._id = params.id
  212 + end
  213 +
  214 + return button
  215 +end
  216 +
  217 +
  218 +--------------
  219 +-- Label class
  220 +
  221 +function newLabel( params )
  222 + local labelText
  223 + local size, font, textColor, align
  224 + local t = display.newGroup()
  225 +
  226 + if ( params.bounds ) then
  227 + local bounds = params.bounds
  228 + local left = bounds[1]
  229 + local top = bounds[2]
  230 + local width = bounds[3]
  231 + local height = bounds[4]
  232 +
  233 + if ( params.size and type(params.size) == "number" ) then size=params.size else size=20 end
  234 + if ( params.font ) then font=params.font else font=native.systemFontBold end
  235 + if ( params.textColor ) then textColor=params.textColor else textColor={ 255, 255, 255, 255 } end
  236 + if ( params.offset and type(params.offset) == "number" ) then offset=params.offset else offset = 0 end
  237 + if ( params.align ) then align = params.align else align = "center" end
  238 +
  239 + if ( params.text ) then
  240 + labelText = display.newText( params.text, 0, 0, font, size )
  241 + labelText:setTextColor( textColor[1], textColor[2], textColor[3], textColor[4] )
  242 + t:insert( labelText )
  243 + -- TODO: handle no-initial-text case by creating a field with an empty string?
  244 +
  245 + if ( align == "left" ) then
  246 + labelText.x = left + labelText.contentWidth * 0.5
  247 + elseif ( align == "right" ) then
  248 + labelText.x = (left + width) - labelText.contentWidth * 0.5
  249 + else
  250 + labelText.x = ((2 * left) + width) * 0.5
  251 + end
  252 + end
  253 +
  254 + labelText.y = top + labelText.contentHeight * 0.5
  255 +
  256 + -- Public methods
  257 + function t:setText( newText )
  258 + if ( newText ) then
  259 + labelText.text = newText
  260 +
  261 + if ( "left" == align ) then
  262 + labelText.x = left + labelText.contentWidth / 2
  263 + elseif ( "right" == align ) then
  264 + labelText.x = (left + width) - labelText.contentWidth / 2
  265 + else
  266 + labelText.x = ((2 * left) + width) / 2
  267 + end
  268 + end
  269 + end
  270 +
  271 + function t:setTextColor( r, g, b, a )
  272 + local newR = 255
  273 + local newG = 255
  274 + local newB = 255
  275 + local newA = 255
  276 +
  277 + if ( r and type(r) == "number" ) then newR = r end
  278 + if ( g and type(g) == "number" ) then newG = g end
  279 + if ( b and type(b) == "number" ) then newB = b end
  280 + if ( a and type(a) == "number" ) then newA = a end
  281 +
  282 + labelText:setTextColor( r, g, b, a )
  283 + end
  284 + end
  285 +
  286 + -- Return instance (as display group)
  287 + return t
  288 +
  289 +end
111 viewController.lua
... ... @@ -0,0 +1,111 @@
  1 +-- viewController.lua, View Controller Library
  2 +--
  3 +-- Version 1.0, currently supports tabs
  4 +--
  5 +-- Copyright (C) 2010 ANSCA Inc. All Rights Reserved.
  6 +--
  7 +-- Permission is hereby granted, free of charge, to any person obtaining a copy of
  8 +-- this software and associated documentation files (the "Software"), to deal in the
  9 +-- Software without restriction, including without limitation the rights to use, copy,
  10 +-- modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
  11 +-- and to permit persons to whom the Software is furnished to do so, subject to the
  12 +-- following conditions:
  13 +--
  14 +-- The above copyright notice and this permission notice shall be included in all copies
  15 +-- or substantial portions of the Software.
  16 +--
  17 +-- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
  18 +-- INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
  19 +-- PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
  20 +-- FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
  21 +-- OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  22 +-- DEALINGS IN THE SOFTWARE.
  23 +
  24 +module(..., package.seeall)
  25 +
  26 +--initial values
  27 +local screenW, screenH = display.contentWidth, display.contentHeight
  28 +local viewableScreenW, viewableScreenH = display.viewableContentWidth, display.viewableContentHeight
  29 +local screenOffsetW, screenOffsetH = display.contentWidth - display.viewableContentWidth, display.contentHeight - display.viewableContentHeight
  30 +
  31 +function newTabBar(params)
  32 + local background = params.background
  33 + local tabs = params.tabs
  34 + local default = params.default
  35 + local over = params.over
  36 + local onRelease = params.onRelease
  37 +
  38 + local tabBar = display.newGroup()
  39 +
  40 + if background then
  41 + local tabBG = display.newImage("tabBar.png")
  42 + tabBar:insert(tabBG)
  43 + end
  44 +
  45 + --check for tab and tab over images specified by the user
  46 + if not default then
  47 + --if no tab images, use tab1.png, tab2.png, etc.
  48 + default = {}
  49 + for i=1, #tabs do
  50 + table.insert(default, "tab".. i ..".png")
  51 + end
  52 + end
  53 + if not over then
  54 + --if no tab over images, use tab1_over.png, tab2_over.png, etc.
  55 + over = {}
  56 + for i=1, #tabs do
  57 + table.insert(over, "tab".. i .."_over.png")
  58 + end
  59 + end
  60 +
  61 + tabBar.y = math.floor(screenH - tabBar.height - display.screenOriginY)
  62 + tabBar.x = 0
  63 +
  64 + --create the tabs
  65 + for i=1, #tabs do
  66 + local tab = ui.newButton{
  67 + default = default[i],
  68 + over = over[i],
  69 + onRelease = onRelease,
  70 + text = tabs[i],
  71 + font = "Helvetica",
  72 + size = 11,
  73 + offset = 14
  74 + }
  75 + tabBar:insert(tab)
  76 +
  77 + local numberOfTabs = #tabs
  78 + local tabButtonWidth = tab.width
  79 + local totalButtonWidth = tabButtonWidth * numberOfTabs
  80 + local tabSpacing = (screenW - totalButtonWidth)/(numberOfTabs+1)
  81 +
  82 + tab.x = tab.width*(i-1) + tabSpacing * i + tab.width*0.5
  83 + tab.y = math.floor(tab.height*0.5 + 3)
  84 +
  85 + tab.id = i
  86 + end
  87 +
  88 + tabBar.selected = function(target)
  89 + if not target then target = tabBar[2] end
  90 + if tabBar.highlight then tabBar:remove(tabBar.highlight) end
  91 +
  92 + local highlight = ui.newButton{
  93 + default = over[target.id],
  94 + over = default[target.id],
  95 + onRelease = onRelease,
  96 + text = tabs[target.id],
  97 + font = "Helvetica",
  98 + size = 11,
  99 + offset = 14
  100 + }
  101 + highlight.id = target.id
  102 + tabBar:insert(highlight)
  103 +
  104 + highlight.x = target.x
  105 + highlight.y = target.y
  106 +
  107 + tabBar.highlight = highlight
  108 + end
  109 +
  110 + return tabBar
  111 +end

0 comments on commit 412d214

Please sign in to comment.
Something went wrong with that request. Please try again.