31

I am having a problem with my icons in my tabBar.

Tapping the same tab bar button repeatedly will keep increasing the tab bar icon's size.
If I push a different one, it goes back to its original size.

enter image description hereenter image description here

Any ideas what I should fix?

staticVoidMan
  • 19,275
  • 6
  • 69
  • 98
jknapp25
  • 341
  • 1
  • 3
  • 9
  • share some code related with the tab bar... share more information... anything will do because the question in it's present state makes it very difficult for anyone to diagnose the problem. – staticVoidMan Apr 26 '14 at 19:04
  • @staticVoidMan I don't have any code for the tab bar controller yet, I just added it in interface builder and connected it to a View Controller that was already there and added a couple more view controllers. Here is a picture of the enlarging icons...https://drive.google.com/file/d/0B7uYznqpZCmceHNXUHhObzBQMEk/edit?usp=sharing <-- before enlarging, https://drive.google.com/file/d/0B7uYznqpZCmcaVlIWUp2b2dEQUU/edit?usp=sharing <-- after enlarging. The first picture shows the icon after I push it to take me to a new view controller, the second after I had pushed it several times. – jknapp25 Apr 26 '14 at 20:04
  • hm... does it get larger and larger if you click it repeatedly? – staticVoidMan Apr 26 '14 at 20:07
  • @staticVoidMan exactly. I pushed it as many times as I could just to see if it would stop but it just took over my screen. – jknapp25 Apr 26 '14 at 20:17
  • i really can't think of any reason for such behavior but if it's happening with 0 code for the `tabBarController` then surely something is amiss. Are these images or text on the tab bar buttons? – staticVoidMan Apr 26 '14 at 20:43
  • @staticVoidMan I made the images originally in paint 2 saved them each as a .png then put them in the icon generator on makeappicon.com and put them in Xcode under bar item image – jknapp25 Apr 26 '14 at 20:58
  • so... for any 1 of these buttons, how mnay and what what is dimension of the image/s and the name/s you have given them? (_just asking_) – staticVoidMan Apr 26 '14 at 21:13
  • @staticVoidMan for example in the case of the one I showed you. It is Icon2.png, 1402 bytes, dim: 40x40. – jknapp25 Apr 26 '14 at 21:23
  • upload the project or recreate the issue in a side project and upload it to dropbox or somewhere and i'll take a look. it may be the icon naming convention and dimensions that must be causing the issue. in the meantime, maybe this could help -- [iOS Human Interface Guidelines for Bar Button Icons](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1) – staticVoidMan Apr 26 '14 at 22:13
  • @staticVoidMan Sorry, I forgot to answer. Here is the link to my project... https://drive.google.com/file/d/0B7uYznqpZCmcRGdIb09pRVBrWk0/edit?usp=sharing – jknapp25 Apr 28 '14 at 02:23
  • wow, this is really a weird issue and took some time to isolate but it seems the tab bar item image insets are screwing things up... i'll post an answer – staticVoidMan Apr 28 '14 at 05:38

3 Answers3

58

As per the project shared by the OP (see question comments), it seems the tab bar image insets seem to be messing things up.

Steps to resolve the issue:

  1. Select the tab bar item of the problematic ViewControllers in IB
  2. Go to Size Inspector section (on the right)
  3. Ensure your image insets are balanced
    • If you give 5px inset to top then balance with a -5px inset to bottom
    • If you give 5px inset to left then balance with a -5px inset to right

I have no explanation for this, sorry... but if anyone does then kindly comment/post

staticVoidMan
  • 19,275
  • 6
  • 69
  • 98
  • I tried this but it still grew, also those measurements make the icon squished to the top of the tab bar. – jknapp25 Apr 29 '14 at 05:20
  • 2
    @jknapp25 : then it would be better if you design the image more accurately and refrain from using the image insets (_prevention is better than cure_). There's no way out for you right now. Via your Storyboard, go to each and every `ViewController`, select the `UITabBarItem` at the bottom and remove the Image Insets. (_then just make larger tab bar images_) – staticVoidMan Apr 29 '14 at 05:44
  • Had the same issue and this answer solved it for me. Agree with @staticVoidMan better to prevent rather than to cure, but unfortunately is not always an option, like in my case right now. – mokagio Mar 31 '15 at 09:04
  • 1
    It looks that each time you tap an item, the tab is somehow redrawn, and applies the inset to the previous value. But it's also weird that this happens only when you tap the item multiple times in a row. Tapping on another one "resets" it properly. Could this be considered a bug? – Nuno Gonçalves Mar 06 '17 at 17:55
1

try This..

myDealNavigationController.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0);

ggg_1120
  • 398
  • 2
  • 19
0

I was also running with same issue and above accepted answer helped me.

Just to show case what steps to do:

While setting image to tab bar select image and balance image insets from all sides.

Need to keep few things in mind:

As shown in below image, balance from all four sides.

enter image description here

It will make UI proper.

Thanks

Zalak Patel
  • 1,937
  • 3
  • 26
  • 44