Tab selection

[H.R.H_The_Duke_of_Bi]

I have an app and when the user signs in there is a tab bar at the bottom (like Instagram) . There are two tabs at the bottom , newsfeed and profile . When i’m on newsfeed the text color is blue which means I’m on the page . But when I click profile , it looks like i’m still on newsfeed . How do I fix it up so that when I click newsfeed and profile it’s a link to a different page ? 

This is what I have so far :

userarea.lua :

local composer = require( "composer" ) local scene = composer.newScene() local widget = require("widget") -- forward declare the text fields local json = require("json") local username local pw local function networkListener( event ) if ( event.isError ) then local alert = native.showAlert( "Error Loading .", "Check your internet connection .", { "Try again" } ) end end function scene:create(event) local screenGroup = self.view local background = display.newImageRect("background.jpg",display.contentWidth,display.contentHeight) background.x = display.contentCenterX background.y = display.contentCenterY screenGroup:insert(background) end local tabButtons = { { label = "#NewsFeed", width = 52, height = 10, id = "newsfeed", size = 16, selected = true, onPress = handleTabBarEvent }, { label = "#Profile", size = 16, id = "profile", onPress = handleTabBarEvent } } -- Create the widget local tabBar = widget.newTabBar( { top = display.contentHeight -60, width = display.contentWidth, buttons = tabButtons, } ) function scene:show(event) local phase = event.phase if ( phase == "will" ) then print("Phase started") elseif ( phase == "did" ) then print("phase on login") end composer.removeScene( "login" ) end scene:addEventListener( "show" ) function scene:hide(event) end function scene:destroy(event) end scene:addEventListener("create", scene) scene:addEventListener("show", scene) scene:addEventListener("hide", scene) scene:addEventListener("destroy", scene) return scene

Also how do I set a background color or image for my tab bar ?

[rob]

Generally speaking, your tabBar should not be part of a scene. Most tabbed apps have the tabBar always visible at the bottom of the page. I would recommend putting all of your tabBar code in main.lua.

Visual customization is covered in the widget.newTabBar docs:  https://docs.coronalabs.com/api/library/widget/newTabBar.html#visual-customization-image-files. Look at item #2 in that list:  three optional, equally-sized image files for tab highlight overlays

In the example, you can see that there is a light blue rectangle behind the green circle. This is the selected tab and three images are used to make that up, the left side (in this case with the rounded corners, a middle section with no rounded corners, and a right section with the right corners rounded). You don’t have to use rounded corners. You need three images, all the same height, say 50px and the same with, say 10px wide to represent the two end caps and the center.

Then in your widget.newTabBar constructor you nee to provide 5 additional entries such as this example:

-- Create the widget local tabBar = widget.newTabBar( { left = 0, top = display.actualContentHeight-120, width = 580, height = 120, backgroundFile = "tabBarBack.png", tabSelectedLeftFile = "tabBarSelL.png", tabSelectedRightFile = "tabBarSelR.png", tabSelectedMiddleFile = "tabBarSelM.png", tabSelectedFrameWidth = 40, tabSelectedFrameHeight = 120, buttons = tabButtons } )

 or something like that.

Now that said, coloring the selected tab is an old IOS look. Today’s iOS 10 tabs don’t have a colored background. They have a colored selected tab (graphic and text) and the others are typically gray.  This can be done with just the label color and for each button providing an icon for the button in your highlight color and your unselected color:

local tabButtons = { { width = 72, height = 120, defaultFile = "tabBarIconDef.png", --\<------ here overFile = "tabBarIconOver.png", --\<------ here label = "Tab1", id = "tab1", selected = true, size = 16, labelYOffset = -8, onPress = handleTabBarEvent },

Rob

[H.R.H_The_Duke_of_Bi]

Thanks but I fount the answer yesterday

[rob]

Generally speaking, your tabBar should not be part of a scene. Most tabbed apps have the tabBar always visible at the bottom of the page. I would recommend putting all of your tabBar code in main.lua.

Visual customization is covered in the widget.newTabBar docs:  https://docs.coronalabs.com/api/library/widget/newTabBar.html#visual-customization-image-files. Look at item #2 in that list:  three optional, equally-sized image files for tab highlight overlays

In the example, you can see that there is a light blue rectangle behind the green circle. This is the selected tab and three images are used to make that up, the left side (in this case with the rounded corners, a middle section with no rounded corners, and a right section with the right corners rounded). You don’t have to use rounded corners. You need three images, all the same height, say 50px and the same with, say 10px wide to represent the two end caps and the center.

Then in your widget.newTabBar constructor you nee to provide 5 additional entries such as this example:

-- Create the widget local tabBar = widget.newTabBar( { left = 0, top = display.actualContentHeight-120, width = 580, height = 120, backgroundFile = "tabBarBack.png", tabSelectedLeftFile = "tabBarSelL.png", tabSelectedRightFile = "tabBarSelR.png", tabSelectedMiddleFile = "tabBarSelM.png", tabSelectedFrameWidth = 40, tabSelectedFrameHeight = 120, buttons = tabButtons } )

 or something like that.

Now that said, coloring the selected tab is an old IOS look. Today’s iOS 10 tabs don’t have a colored background. They have a colored selected tab (graphic and text) and the others are typically gray.  This can be done with just the label color and for each button providing an icon for the button in your highlight color and your unselected color:

local tabButtons = { { width = 72, height = 120, defaultFile = "tabBarIconDef.png", --\<------ here overFile = "tabBarIconOver.png", --\<------ here label = "Tab1", id = "tab1", selected = true, size = 16, labelYOffset = -8, onPress = handleTabBarEvent },

Rob

[H.R.H_The_Duke_of_Bi]

Thanks but I fount the answer yesterday