6

I've created a simple custom tabbar by setting the images of each item, as following:

UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];

[item0 setFinishedSelectedImage:[UIImage imageNamed:@"activity_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"activity.png"]];
[item1 setFinishedSelectedImage:[UIImage imageNamed:@"agenda_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"agenda.png"]];
[item2 setFinishedSelectedImage:[UIImage imageNamed:@"settings_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"settings.png"]];

While this works great, I noticed that there is a black blank space under my tabbar

enter image description here

My images are 44px in height, but I think I have to somehow change the height of my tabbar.

woutr_be
  • 9,532
  • 24
  • 79
  • 129

3 Answers3

2

The tabBar itself is 49px, and it is rendered in black color behind your images (perhaps in [UITabBar layoutSubviews]). Then your images are rendered on top. The reason of the offset is because the images you supply are too large, UITabBar expects 30x30px icons, not a picture of the entire UITabBarItem.

Here's a few things to try:

  1. Supply only a 30x30px icon, instead of the entire tab button
  2. After you set your images on the tab item, try this: [item setImageInsets:UIEdgeInsetsMake(6, 0, -6, 0)]; // play with insets until it renders correctly
  3. Subclass UITabBar and override layoutSubviews to first call super, then reposition your image as you like. Not recommended, it might break in future iOS versions.
DTs
  • 1,196
  • 1
  • 11
  • 28
0

Use - 

tabBar.frame=CGRectMake(x,y,w,h);

In this way you can set xCord, yCord, width and height.

rishi
  • 11,779
  • 4
  • 40
  • 59
  • Thanks, but strangely when I set the y to self.window.frame.size.height, it's still visible for a few px. The same for when I use [tabBar setFrame:CGRectMake(0.0f, self.window.frame.size.height - 44, self.window.frame.size.width, 44.0f)];, I can still see the highlight of the selected tab in the black gab below it – woutr_be May 21 '12 at 06:09
  • you need to log these y value and check if you are getting these values correctly? – rishi May 21 '12 at 06:12
  • self.window.frame.size.height: 480, taBar.frame.origin.y: 436, tabBar.frame.size.heigh: 44. When I take a screenshot and check in photoshop, the tabbar is only at 428px on the y-axis. – woutr_be May 21 '12 at 06:18
  • From what I can see, it looks like the default highlight overlay is pushing my tabbar up – woutr_be May 21 '12 at 06:20
  • seems like?not sure though? you need to debug in your code and xib? – rishi May 21 '12 at 06:23
  • What do you mean? I'm setting the values correctly, it's logging the correct values. However the tabbar is drawn at 428px instead of 436. (As it's logged) – woutr_be May 21 '12 at 06:25
  • if it is logging 428, then it will draw at 428, unless at some place we are again modifying that? – rishi May 21 '12 at 06:29
  • It's logging 436px, as it should. But because there is a black gab, I check the values in photoshop and the tabbar is drawn at 428px. (This 428 value is never set in my code!) – woutr_be May 21 '12 at 06:57
  • can you add the screen shot of your full tab bar or if possible full screen, so that i can get some more idea. And also you can check the sizes by setting background color of elements to red, green etc, this will give you exact idea, where your uielement is.\ – rishi May 21 '12 at 07:00
  • This is a screenshot of the app: http://dl.dropbox.com/u/274185/Screen%20Shot%202012-05-21%20at%203.08.47%20PM.png. I tried setting the tabbar background to blue, but it's just showing black. As you can see it's 44px heigh, but for some reason it seems to be bigger. – woutr_be May 21 '12 at 07:10
  • where you are defining tab bar controller's frame? – rishi May 21 '12 at 07:14
  • In my application delegate, right before I call [self.window makeKeyAndVisible]; – woutr_be May 21 '12 at 07:21
  • http://pastebin.com/AQjG2kXu, so basically I create a tabbar with 3 UINavigationControllers and add the ZUUIRevealController. (Also tried it without ZUUIRevealController, but same problem) – woutr_be May 21 '12 at 08:23
  • Still having the same issue, I tried several things, but nothing seems to help. – woutr_be May 24 '12 at 04:37
0

Check this:

[self.tabBar setFrame:CGRectMake(self.tabBar.frame.origin.x, self.tabBar.frame.origin.y - 30, self.tabBar.frame.size.width, self.tabBar.frame.size.height + 30)];
MatthewK
  • 466
  • 4
  • 9
  • 19