Hi all,
Can someone advice in how to make swipe views with tabs. The user can move screens using swipe left/right or by clicking on the tabs.
My idea is to make a news app which allow user to swipe screen for spesfic news such as sports, weather etc.
Thx
Abdul
thanks horacebury,
this code is for only backward swiping and without tabs. I looks if i can modify it .
regards
Abdul
apparently my programming skills did reach the level to be able modify this work … 
can someone help me in this subject ?
I need to composer with tabs and swipes. i need the user to be able to swipe the pages or click on tabs to move from one scene to another.
thx
Abdul
I think you need a more specific description of your screens - asking for tabs and swipe navigation is a massive request for code to be written.
Having said that, if you have a budget I could code something for you which will do all of that and more.
If you don’t have budget, I heartily suggest taking a deep look at the widget examples in the CoronaSDK application directory and paying attention to how the tab and scrollview widgets work.
I’ve done this in Corona. It’s not exactly trivial, at least to implement it nicely so it looks and feels good.
Barring a budget, I’d advise you to, as horacebury said, ponder the widget examples and spend some time in advance thinking about how to make this as modular as possible so you can reuse your work later.
Thanks all for passing on this topic… is it possible to share some codes . i agree about the concept of making it as module but i dont have that programming skills … it will be useful for many people
or someone from Corona staff to make a tutorial about how to achieve swipe with tabs
The code I wrote is the intellectual property of a startup, so I’m not in a position to share it. I’m afraid (unless you can pay <horacebury> or someone else), you’re going to have to learn how to do this like everyone else has. Feel free to suggest to the Corona folks that they pay to obtain a license for the modules I wrote so they can release them publicly.
At the very least I would suggest you think of how to make this into a module (so you don’t avoid repeating my mistakes). Also note the tableView widget gives you swipeLeft and swipeRight events.
thanks for your reply… i dont mind corona paying you and release it publicly … i support that…
i tried actually to play with tableview but i was not successful…i will try again and see. <_<
also as per corona docs… the row has that events for swiping not the table , : so how to make it listen for tableveiw itself swiping left/right
Listener. The function used to listen for TableView touch/tap events. In this listener function, the event.phase values include “tap”,“press”, “release”, “swipeLeft”, and “swipeRight”. In addition, event.target is a reference to the row that was interacted with and event.target.index is the index number of that row.
If you have a table view which contains rows which can be swiped, you cannot swipe the table. If you want a table view which scrolls vertically but when swiped horizontally scrolls between scenes, that can be done either with nested scroll views or handling of the focus. It is not simple, but it’s not terribly difficult either.
What is really lacking (in this thread) is a clear description of your specific navigation map. If you could provide that, it might be easier to describe what you would need to build and maybe even throw some code at you.
My offer to write the solution in a package stands, but would need a complete description, of course.
Thanks for the explaination…
I think you nailed it… I need to swipe on tableview in order to move scenes… but at the same time I need the user to be able to click on a row if he want to see more details about that item… I have this main.lua to do that but it does not work well.
[lua]
local composer = require( “composer” )
local scene = composer.newScene()
local widget = require( “widget” )
local tab_width = 45
local tab_height = 45
local font_size = 8
local Font_Offset = 0
local tabButtons
–local tabBar
local function handleTabBarEvent( event )
print( event.target._id ) --reference to button’s ‘id’ parameter
local effect1
local page =event.target._id
local currScene = composer.getSceneName( “current” )
--local prevScene = composer.getSceneName( “previous” )
print("current screne ",currScene)
if (currScene== “page1”) then
effect1 = “slideLeft”
elseif ((currScene== “page2”) and (page ==“page1”)) then
effect1 = “slideRight”
elseif ((currScene== “page2”) and (page ==“page3”)) then
effect1 = “slideLeft”
elseif (currScene== “page3”) then
effect1 = “slideRight”
end
local title= display.newImageRect(“images/top.png”, 360, 40 )
title.anchorY = 0
title.anchorX = 0
print(" i am in main")
tabButtons = {
{
width = tab_width,
height = tab_height,
label = “الكل”,
id = “page1”,
defaultFile = “icon2.png”,
overFile = “icon2Down.png”,
size=font_size,
labelYOffset = Font_Offset,
onPress = handleTabBarEvent
},
{
width = tab_width,
height = tab_height,
label = “معارض ومؤتمرات”,
id = “page2”,
defaultFile = “icon2.png”,
overFile = “icon2Down.png”,
size=font_size,
labelYOffset = Font_Offset,
selected = true,
onPress = handleTabBarEvent
},
{
width = tab_width,
height = tab_height,
label = “عروض واوبرا”,
id = “page3”,
defaultFile = “icon2.png”,
overFile = “icon2Down.png”,
size=font_size,
labelYOffset = Font_Offset,
onPress = handleTabBarEvent
},
{
width = tab_width,
height = tab_height,
label = “مهرجانات وسياحة”,
id = “page4”,
defaultFile = “icon2.png”,
overFile = “icon2Down.png”,
size=font_size,
labelYOffset = Font_Offset,
onPress = handleTabBarEvent
},
{
width = tab_width,
height = tab_height,
label = “أخرى”,
id = “page5”,
defaultFile = “icon2.png”,
overFile = “icon2Down.png”,
size=font_size,
labelYOffset = Font_Offset,
onPress = handleTabBarEvent
},
}
– Create the widget
_G.tabBar = widget.newTabBar
{
top = 40,
width = display.contentWidth-45,
height=60,
left=20,
backgroundFile = “tabBarBg.png”,
tabSelectedLeftFile = “left.png”,
tabSelectedRightFile = “middle.png”,
tabSelectedMiddleFile = “right.png”,
tabSelectedFrameWidth = 20, – New
tabSelectedFrameHeight = 50,
buttons = tabButtons
}
_G.tabBar:setSelected(1,true)
[/lua]
do you have samples or tips to achieve it.
Regards
Abdulaziz
Well, use of the takeFocus() function and a rectangle on top of the scrollview would help. That way you can capture horizontal swipes and pass them down to the scrollview when the swipe is vertical.
Tap events can just be listened for on the individual rows in the scrollview, not the top rect or scrollview object. That bit is easy.
horacebury …
can you explain more if you don’t mind
1- how can I know the vertical swipe from horizontal. do you mean to event.x and event.xStart
2- do you mean to use takeFocus() to make the focus on rectangle always on top of the senses.
3- Do I need to make one rectangle per scene or just one rectangle for all scenes in main.lua
4- for Tap events… do you mean to ignore them on rectangle and not doing return true so they can go down
Regards
Abdul
how about creating a composer with a pages array that return the page number and changes the tab based on the number … thats what i have been tryng to work out
what about the swipes ? is working with you ?
Thanks sir for the explanation .
what i did is to insert the tableview in a scrollview just to make use of takefocus() function… i was able to send horizontal swipes events down to scrollveiw … but the issue, the scrollview was moving up/down not the tableview… also tap events did not pass thru… here is my function …
[lua]
local function handleSwipe( event )
if ( event.phase == “moved” ) then
local dX = event.x - event.xStart
local dy = math.abs( ( event.y - event.yStart ) )
if ( dX > 60 ) then
--swipe right
print( “Swipe Right”)
print( event.x, event.xStart, dX )
elseif ( dX < -60 ) then
print( “Swipe Left”)
print( event.x, event.xStart, dX )
end
if ( dy > 50 ) then
scrollView:takeFocus( event )
– display.getCurrentStage():setFocus( list )
print(“vertical swipe”)
end
--return true
end
return true
end
[/lua]