Hello everyone
I’m having trouble creating something mixture of ScrollView and TabBar. I would like to move on TabBar like one ScrollView. And at the same time I would like movements on ScrollView they were also visible in the TabBar. To explain I wish it worked a bit like the famous app: Clash Royale, Facebbok and asf.fm.
I am attaching immaggini. can you give me some tips or sample code.
Thanks a lot to everyone
Generally speaking tabBars are anchored to the bottom of the app and the scroll view would be just above it. In apps that want to mimic web pages, the menu tends to be a bar at the top of the page. I’m unsure which model you are trying to go with. I suppose it might make sense to have a tabBar at the top.
If you’re using a base 320x480 point config.lua and you want a fixed tabBar:
make the tabBar 50 points high and position it’s .y = display.actualContentHeight - tabBar.height * 0.5
(I’m assuming you will name your tabBar “tabBar”). If it’s part of an app where its in a scene that needs to hide when the scene changes, add it to the scene’s group. Most tabBars are there to switch between scenes, so building the tabBar in main.lua and not adding it to a scene’s group is considered a good thing.
Next for the scrollView, set it’s height to: display.actualContentHeight - tabBar.height - anyTopBarYouMightHave.height. I believe the scrollView creator allows you to position by top and left, position the top to anyTopBarYouMightHave.height or 0 if you don’t have one.
If you want the tabBar inside the scrollView, create it after you create the scrollView and insert it into the scrollView at whatever logical place (top or bottom) that you want it.
Rob
Thanks Rob,
But I do not think I explained myself. I think I should make a big ScrollView with only horizontal movement and inside many small ScrollView with only vertical movement. The tabBar is right, but it should show the movement of a small ScrollView and the other. At this point, however, I would not know how to use the scenes. To explain you can take a look at this video (https://www.youtube.com/watch?v=PIPIB9VMEE0) in the (4:34) and (7:30) point? Are 4 seconds that I believe explain better than a thousand words. I would like to create such a thing and I would understand if my reasoning is right.
Thanks again for your help and sorry for my english
So my suggestion above would still work. Each tab is a scene using transitions of “slideLeft” and “slideRight”. Now our widget.newTabBar() isn’t going to support the animation of the tabBar active button sliding. You would have to either get our source code for widgets (In Lua/Corona) and build that yourself or build your own bar with a series of images with the highlighted background as something you would animate.
Since the user isn’t “scrolling” the top part of the image, you wouldn’t even need a scrollView for that if you’re not going to use Composer, a display.newGroup() with all the screens positioned in the right place would work and you could use transition.to() to animate the group moving left or right at the same time you’re animating the background to your buttons.
Rob
Well then nothing is already ready for my purpose. I will follow your advice and I will modify the widgets. Also if I use the group I think I will have to do some work for the correct positioning and the use of memory.
As regards the size and the position I use this confing:
local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.3 }, }, }
to better adapt to various resolutions. I hope does not create problems …
Thanks again of help
Generally speaking tabBars are anchored to the bottom of the app and the scroll view would be just above it. In apps that want to mimic web pages, the menu tends to be a bar at the top of the page. I’m unsure which model you are trying to go with. I suppose it might make sense to have a tabBar at the top.
If you’re using a base 320x480 point config.lua and you want a fixed tabBar:
make the tabBar 50 points high and position it’s .y = display.actualContentHeight - tabBar.height * 0.5
(I’m assuming you will name your tabBar “tabBar”). If it’s part of an app where its in a scene that needs to hide when the scene changes, add it to the scene’s group. Most tabBars are there to switch between scenes, so building the tabBar in main.lua and not adding it to a scene’s group is considered a good thing.
Next for the scrollView, set it’s height to: display.actualContentHeight - tabBar.height - anyTopBarYouMightHave.height. I believe the scrollView creator allows you to position by top and left, position the top to anyTopBarYouMightHave.height or 0 if you don’t have one.
If you want the tabBar inside the scrollView, create it after you create the scrollView and insert it into the scrollView at whatever logical place (top or bottom) that you want it.
Rob
Thanks Rob,
But I do not think I explained myself. I think I should make a big ScrollView with only horizontal movement and inside many small ScrollView with only vertical movement. The tabBar is right, but it should show the movement of a small ScrollView and the other. At this point, however, I would not know how to use the scenes. To explain you can take a look at this video (https://www.youtube.com/watch?v=PIPIB9VMEE0) in the (4:34) and (7:30) point? Are 4 seconds that I believe explain better than a thousand words. I would like to create such a thing and I would understand if my reasoning is right.
Thanks again for your help and sorry for my english
So my suggestion above would still work. Each tab is a scene using transitions of “slideLeft” and “slideRight”. Now our widget.newTabBar() isn’t going to support the animation of the tabBar active button sliding. You would have to either get our source code for widgets (In Lua/Corona) and build that yourself or build your own bar with a series of images with the highlighted background as something you would animate.
Since the user isn’t “scrolling” the top part of the image, you wouldn’t even need a scrollView for that if you’re not going to use Composer, a display.newGroup() with all the screens positioned in the right place would work and you could use transition.to() to animate the group moving left or right at the same time you’re animating the background to your buttons.
Rob
Well then nothing is already ready for my purpose. I will follow your advice and I will modify the widgets. Also if I use the group I think I will have to do some work for the correct positioning and the use of memory.
As regards the size and the position I use this confing:
local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.3 }, }, }
to better adapt to various resolutions. I hope does not create problems …
Thanks again of help
How do I make it sticky at the bottom of the screen ? Like Instagram or Tik-Tok.