0

Below are 2 images of iPad UITabbar. By default i get the top one. But i need to make it like the second one (evenly spaced throughout the screen) without using Custom Tabbar. Is it possible?!Tabbar

EDITED : As i mentioned in one of the comments. In default the first tabbarItem starts at 300 px or something. Whereas i want that the selection area for tabitem 1 should be px-0-256. Here as we can see, all the default tabs are in the centre are underlying "How to win" and "record" tab. So when we press the home button on the design, technically nothing happens.

ScarletWitch
  • 522
  • 6
  • 23
  • why do u require a custom tab bar ? you can easily put selected state and unselected state images – Kasaname May 29 '13 at 05:09
  • 1
    Yaeh, But the thing is - in default the first tabbarItem starts at 300 px or something. Whereas i want that the selection area for tabitem 1 should be px-0-256. Here as we can see, all the default tabs are in the centre are underlying "How to win" and "record" tab. So when we press the home button on the design, technically nothing happens. – ScarletWitch May 29 '13 at 05:27

2 Answers2

0

Assuming you're talking about IOS here, The two ways I know doing this is basically, in XCODE, making a tabbed application, going to he Storyboard file, connecting the tab views to the controller. Then make images for the tabs and replace them.

That, as I found was replicated here: http://kurrytran.blogspot.tw/2011/10/ios-5-tutorial-creating-custom-tab-bar.html

In Html5, I think you can do this:

<nav id="tabbar">
<ul>
<!-- Action & navigation -->
<li style="width: 20%; "><a href="#home" class="flip" style=""><strong>Home</strong><div class="home"></div></a></li>    
<li style="width: 20%; "><a href="#cat1" class="flip current" style=""><strong>RSS Feed</strong><div class="rss"></div></a></li>
<li style="width: 20%; "><a href="#cat2" class="flip" style="">   <strong>Twitter</strong><div class="twitter"></div></a></li>
<li style="width: 20%; "><a href="#cat3" class="flip" style=""><small class="badge right">3</small><strong>Flickr</strong><div class="flickr"></div></a></li>
<li style="width: 20%; "><a onclick="moveDown();" class="flip" style=""><strong>Search</strong><div class="search2"></div></a></li>

</ul>
</nav>

EDIT: Also, one way of making it fit is to resize the images so their is blank space on the sides, and change images for iphone5-portrait, ipad2-landscape, etc.

EDIT2: Other than that , the only other way is to use UIToolbar to create a tabbar like creation with custom defined button presets. Then change views. If not, then it is impossible or switch for a html element like the one above.

hpm
  • 1,202
  • 13
  • 34
  • 1
    Yes, It is iOS that i am talking about here. But the link you gave does not resize the tabbar items. Have a look at the image again. The default tabbar items is concentrated in the centre and not placed evenly throughout the width. Which i need it. – ScarletWitch May 27 '13 at 08:17
  • Yes, I see. I suppose that the resizing the images might help, would it? You might want to add some blank space in your images on the sides, as I see on the second image... – hpm May 27 '13 at 08:23
  • 1
    I am sorry if it is misleading. But there is no space at the ends in the second image. I just need each tabbaritem width = 1024/4 and not concentrated in the center. So that when the user clicks on the tab in 2nd image they do not end up clicking on the empty space as in the default tabbar. – ScarletWitch May 27 '13 at 08:28
  • What happens when you make icons that are 256 pixels wide for each tab? – Steve Waddicor May 27 '13 at 14:25
  • 1
    That is my question. I can set the image 256 pixels wide. HOW CAN I SET THE TABBAR ITEMS FOR 256 PIXELS width? i.e the clickable area = 256 pixels. – ScarletWitch May 29 '13 at 05:33
  • Sorry, but I think it is more like impossible then. Apple does restrict UI TABBAR. I have posted one more solution up in my answer. – hpm May 30 '13 at 23:48
0

You can't.

Sucks, huh? Fortunately, it's not that hard to roll your own tab-bar-like view with a few buttons right next to each other, and it's not that hard to implement a view controller to hold your ersatz tab bar and contain the child controllers, either. (Look at the "Implementing a Container View Controller" section of UIViewController's documentation for more on this topic.)

Becca Royal-Gordon
  • 17,541
  • 7
  • 56
  • 91