TabBar Images Sizing (default vs over)

Solar2D General Questions/Discussion
#1

Here’s the general code I’m playing with: http://developer.coronalabs.com/code/tab-bar

My question may be best answered from within the UI.lua module, but I’m not quite sure…

When I run the TabBar demo in the simulator, everything works great.
I wanted to make the over images for the tabs a little larger (taller, to be exact). So the width is the same as the “default” image, while the over images are slightly taller, with some added design on the top part.

I’m certainly not doing anything fancy with the code part. Just sprucing up the images.

However, the over images are acting a little weird. It seems the UI code wants to keep the sizes of both images the same. So the over images get a little squeeze.

I’m not sure where it’s being dictated, but I thought I’d ask around.

How can I turn off this “squeezing” effect, if the images are not the exact same size.

tabBar = viewController.newTabBar{  
 background = "tabBar.png", --tab bar background  
 tabs = {"Play", "News", "About"}, --names to appear under each tab icon  
 default = {"tab1.png", "tab2.png", "tab3.png"}, --\> 77x44  
 over = {"tab1\_over.png", "tab2\_over.png", "tab3\_over.png"}, --\> 77x55  
 onRelease = showScreen --function to execute when pressed  
 }

I know the viewController library uses the magic from the ui library, but I’m still not sure where inside is dictating the squeeze effect.

I really hope this makes sense. [import]uid: 154122 topic_id: 28632 reply_id: 328632[/import]

#2

Well, two things:

  1. You could avoid the squeeze effect by making the smaller image the same size as the larger image. For example, if you increase the canvas size in Photoshop, you can leave your image the same size at an anchor point of your choice, while the image boundaries increase.

The only trick here - and you probably won’t find this out until you try - is that I’m sure the tabBar code has some “max limit” on image size so if your larger of the two is too big to fit in the tabBar anyway, it will just shrink both of them.

Still, it’s the fastest, cleanest option.

  1. I don’t use this tab bar - I use the widget version - but looking at the code it looks like this is in turn using ui.newButton. I suspect if you look in there you’ll find that somewhere the button is using display.newImageRect() instead of display.newImage().

(The former scales whatever image you give it to the height and width you give it, while the latter sticks to the original image dimensions.)

Theoretically you could simply make that change in the ui button code, although that would affect every use of ui.newButton, not just this instance. [import]uid: 41884 topic_id: 28632 reply_id: 115535[/import]