how to create swipe views with tabs?

just solved the problem out … was really simple 

1 = make the tab and tab button global

2 call this function — tabbar:setselection(index, true) at the create scene level

=== what this does is doesn’t matter if its swipe or press, every time a page is open, make the happen

here where i got the i deal from

http://www.youtube.com/watch?v=eYRxlhs4Mi4

http://docs.coronalabs.com/api/type/TabBarWidget/setSelected.html

hope it helps

Hi oewere

It is not simple as you mentioned… if you noticed in my code above, the tabBar is already global :

 

_G.tabBar = widget.newTabBar

 

The issue is when it comes to horizontal swipes and how to maintain it when you  have other vertical swipes for the table view. 

Hi,

I am have a very similar problem if you’d care to take a look here:

http://forums.coronalabs.com/topic/53448-managing-focus-among-tableview-and-other-scene-elements/

But my tableview doesn’t have rows that can be swiped horizontally, so I was thinking in this case to work around the problem by, instead of passing the focus to the over layer, using the listener function of the tableview.

Basically make the tableview detect a general horizontal swipe that would trigger the scene transition.

Do you think this would work?

Where to start?

I tried something like this already (it’s the tableview listener function) :

local function scrollListener (event) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local swipeLengthX = math.abs(event.x - event.xStart) &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if event.phase == "began" then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print ( event.xStart) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; elseif event.phase == "moved" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print (event.phase, event.x, event.xStart, swipeLengthX)&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if event.x \> event.xStart and swipeLengthX \> 50 then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print("Swiped Left") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; elseif event.x \< event.xStart and swipeLengthX \> 50 then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print( "Swiped Right" ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; composer.gotoScene("counter", {effect="iosSlideRight01", time= 400}) end &nbsp;&nbsp; end &nbsp;end

but, aside returning error when the tableview ‘bounces back’, it seems like the tableview’s listener function only triggers it’s phases when the touch goes vertically - to scroll - only then it recognizes also horizontal drag movements… Does this make any sense?

Help would be greatly appreciated here,  wouldn’t want to switch to another sdk only for not being able to overcome such a basic problem…

Thanks!

Try this http://code.coronalabs.com/code/backswipe-navigation-composer

thanks horacebury,  

this code is for only backward swiping and without tabs. I looks if i can modify it .

regards

Abdul

Hello,

I solved this issue by using the tableview’s listener function:

local function scrollListener (event) &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if event.phase == "began" then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local swipeLengthX = math.abs(event.x - event.xStart) print (event.phase, event.x, event.xStart, swipeLengthX)&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if event.x \> event.xStart and swipeLengthX \> 50 then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print("Swiped Left") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; composer.gotoScene("counter", {effect="iosSlideRight01", time= 400}) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; elseif event.x \< event.xStart and swipeLengthX \> 50 then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print( "Swiped Right" ) end &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; elseif event.phase == "moved" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; end &nbsp;end

Please notice that in my case I don’t have any vertical or horizontal in-row swipe events to detect, so I think this solution wouldn’t apply to your specific cases since I understand you want to have somehow vertically scrollable rows…

I really hope someone else might get something good out of this anyway.

Cheers!

apparently my programming skills did reach the level to be able modify this work … :slight_smile:

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 :slight_smile:

or someone from Corona staff to make a tutorial about how to achieve swipe with tabs :slight_smile:

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. :slight_smile:

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 :slight_smile: … 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

onRowTouch (optional)

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 options = {
    effect = effect1,
    time = 1000,
    params = {
       level = 1,
       operation = “x”
   }
 }
 composer.gotoScene( page, options )
 --print(tabBar.x)
 local dis = tabBar.x - 50
 --transition.to( tabBar, {time = 500,x=(dis)} )
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 :slight_smile:

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

seen this on youtube 

http://www.youtube.com/watch?v=yHVqve-tla8