Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

how to create swipe views with tabs?
Started by alzaabi98 Nov 01 2014 07:33 AM

- - - - -
23 replies to this topic

Best Answer horacebury , 20 November 2014 - 07:02 AM

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.

[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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

[TOPIC: post.html]
#2

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,069 posts
  • Corona SDK

[TOPIC: post.html]
#3

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

thanks horacebury,  

 

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

 

regards

Abdul



[TOPIC: post.html]
#4

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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



[TOPIC: post.html]
#5

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,069 posts
  • Corona SDK

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.



[TOPIC: post.html]
#6

corona273

[GLOBAL: userInfoPane.html]
corona273
  • Contributor

  • 482 posts
  • Enterprise

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.



[TOPIC: post.html]
#7

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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



[TOPIC: post.html]
#8

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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



[TOPIC: post.html]
#9

corona273

[GLOBAL: userInfoPane.html]
corona273
  • Contributor

  • 482 posts
  • Enterprise

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.



[TOPIC: post.html]
#10

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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.  <_<



[TOPIC: post.html]
#11

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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.



[TOPIC: post.html]
#12

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,069 posts
  • Corona SDK

  Best Answer

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.



[TOPIC: post.html]
#13

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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.

 

 
 
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)

 

 

do you have samples or tips to achieve it.

 

Regards

Abdulaziz



[TOPIC: post.html]
#14

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,069 posts
  • Corona SDK

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.



[TOPIC: post.html]
#15

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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



[TOPIC: post.html]
#16

oewere

[GLOBAL: userInfoPane.html]
oewere
  • Observer

  • 6 posts
  • Corona SDK

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



[TOPIC: post.html]
#17

oewere

[GLOBAL: userInfoPane.html]
oewere
  • Observer

  • 6 posts
  • Corona SDK

seen this on youtube 

 



[TOPIC: post.html]
#18

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

what about the swipes ? is working with you ?



[TOPIC: post.html]
#19

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,069 posts
  • Corona SDK

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

 

  1. Yes, in each phase=="moved" you should test the distance between the start position and the current position of the touch. If the distance is more than a certain amount (call that the threshold) you check whether the amount moved on the x is more than the amount moved on the y. If event.x-event.xStart > event.y-event.yStart then it is horizontal.
  2. I mean that you use the answer in #1 to check the distance and swipe direction on a display.newRect which covers the screen, a layer on top of the scrollview. If the swipe is horizontal do a navigation left or right. If the swipe is vertical, call takeFocus on the scrollview.
  3. The rectangle would be per scene - one in each scene. But it depends on the scenes and if they need it. Build a test scene first. Post the code you make and I'll see if it's right. I might have posted something similar in the past few months, so do a search on the forums and code exchange, too.
  4. Yes - simply don't listen for tap events on the rectangle.


[TOPIC: post.html]
#20

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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

 

 
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



[TOPIC: post.html]
#21

oewere

[GLOBAL: userInfoPane.html]
oewere
  • Observer

  • 6 posts
  • Corona SDK

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://docs.coronalabs.com/api/type/TabBarWidget/setSelected.html

 

 

hope it helps



[TOPIC: post.html]
#22

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Contributor

  • 354 posts
  • Corona SDK

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. 



[TOPIC: post.html]
#23

akak

[GLOBAL: userInfoPane.html]
akak
  • Contributor

  • 181 posts
  • Corona SDK

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)

      local swipeLengthX = math.abs(event.x - event.xStart)

    
      if event.phase == "began" then


      print ( event.xStart)

        elseif event.phase == "moved" then

 
      print (event.phase, event.x, event.xStart, swipeLengthX)   


      if event.x > event.xStart and swipeLengthX > 50 then
                    print("Swiped Left")

      elseif event.x < event.xStart and swipeLengthX > 50 then
                   print( "Swiped Right" )
                   composer.gotoScene("counter", {effect="iosSlideRight01", time= 400})
end
   end
 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!

 



[TOPIC: post.html]
#24

akak

[GLOBAL: userInfoPane.html]
akak
  • Contributor

  • 181 posts
  • Corona SDK

Hello,

 

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

local function scrollListener (event)

    
      if event.phase == "began" then

      local swipeLengthX = math.abs(event.x - event.xStart)

print (event.phase, event.x, event.xStart, swipeLengthX)   


      if event.x > event.xStart and swipeLengthX > 50 then
                    print("Swiped Left")

                    composer.gotoScene("counter", {effect="iosSlideRight01", time= 400})


      elseif event.x < event.xStart and swipeLengthX > 50 then
                   print( "Swiped Right" )
end
        elseif event.phase == "moved" then

 
      
   end
 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!




[topic_controls]
[/topic_controls]