iOS 7.1 issue - Tabbar icon image is automatically resize when touch and drag on that tab button

Question

I have this code

[tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"tab_pressed_home_icon"] withFinishedUnselectedImage:[UIImage imageNamed:@"tab_home_icon"]];

tabBarItem1.imageInsets = UIEdgeInsetsMake(8, 0, -2, 0);

which set an icon on the tab bar.

everything work fines so far until last night that i update Xcode 5.1

and run the app on ios7.1 simulator.

here is the app

now when i tap the tab bar the icon image size is decrease an when i release the finger image is back to normal. But if i tap the icon and drag it the image is look like this (scale down).

like this

how can this happen? is there anyway to solve this?

Thanks.

Answer 1

This problem was resolved by setting the imageInsets of the tabBarItem as others have mentioned. You can do this in code or you can do it in Interface Builder, it doesn't matter.

The important point is to have the top inset BE EQUAL to the bottom inset.

Answer 2

I had the same problem on iOS 7.1 when trying to set the Image insets by code like:

[self.tabBarItem setImageInsets:UIEdgeInsetsMake(5, 0, -5, 0)];

So I solved it using directly the Bar Item Size on my Storyboard.

Take in count that for this to work you should be assigning the image of you TabBarItem in the following way

UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *myItem = [tabBar.items objectAtIndex:0];

[homeItem setFinishedSelectedImage:[UIImage imageNamed:@"A.png"]
       withFinishedUnselectedImage:[UIImage imageNamed:@"B.png"]];

instead of this way

[self.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"A.png"]
              withFinishedUnselectedImage:[UIImage imageNamed:@"B.png"]];

Update

To access the Bar Item Size select directly the 'Item' element under the Scene of any of your Tab Bar Controller's child. (Image1)

Answer 3

my problem is similar, the tabbar icon changed it position in 7.1 update, this problem is really annoying, and I did a quick solution because I have to approve the app. Was this:

Ok I not sure that is the best solution, but for me works.

Answer 4

Same problem here. Also after update to iOS 7.1 and xcode 5.1 My solution: The tab bar item size was set at 4 for Bottom.(in Size inspector) I changed it to 0 like all the others and the problem was gone.

Answer 5

I give it up, my solution is here:

use the function to resize and make offset with UIImage

- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize andOffSet:(CGPoint)offSet{
    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    [image drawInRect:CGRectMake(offSet.x, offSet.y, newSize.width-offSet.x, newSize.height-offSet.y)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

and set the tab bar item image properly:

UITabBarItem *barItem  = [self.tabBarController.tabBar.items objectAtIndex:i];
CGSize size = CGSizeMake(49, 49);
CGPoint offset = CGPointMake(10, 10);
[barItem setFinishedSelectedImage:[self imageWithImage:selectedImage scaledToSize:size andOffSet:offset]
         withFinishedUnselectedImage:[self imageWithImage:unSelectedImage scaledToSize:size andOffSet:offset]];

if any other solutions would be help!

Answer 6

My answer is based on others posted here - setting to 0 all ImageInsets in tab bar items:

for (UITabBarItem* item in self.tabBar.items)
{
    [item setImageInsets: UIEdgeInsetsMake(0, 0, 0, 0)];
}

Answer 7

You may put a UIView on top of the tab bar, and add a UITapGestureReognizer to the UIView. When tapped, I determine where it is and call the appropriate selected item for the tabbar. Hack, but works quite nicely and lets you keep your inset values to whatever you want.

 @property UIView  tabBarCover;//place on top of uitabbar and give it clear color background

 - (void)viewDidLoad
 {
   [tabBar setSelectedItem:[tabBar.items objectAtIndex:0]];
    UITapGestureRecognizer *singleFingerTap =
                        [[UITapGestureRecognizer alloc] initWithTarget:self
                                        action:@selector(handleSingleTap:)];
   [tabBarCover addGestureRecognizer:singleFingerTap];

 }

Then each time the UIView is tapped, set the selected item based on where the user touched. I had 3 tab bar items, so I just did some logic for the x coordinate.

-(void) handleSingleTap:(UITapGestureRecognizer *) recognizer
{
    CGPoint location = [recognizer locationInView:[recognizer.view superview]];
    //NSLog(@"tapped it %lf", location.x);
    if(location.x<=105){
        //1st 3rd tapped, do something

    }
    else if(location.x >105 && location.x<=210)
    {
       //do nothing, selected item stays same. this is glas
    }else{
       //must be in 3rd section so do that load

    }

}

Hope it helps.

Answer 8

I spent about 3 hours of it! And I have found our mistake. it is not bug of iOS.

Note: imageInsets will not help! because this is problem with image's scale. I played 2 hours with it! and no result. it was stupid way to try solve the problem!

Please look this project http://www.raywenderlich.com/50310/storyboards-tutorial-in-ios-7-part-2

on this project Players and Gestures icons works perfectly! because there are icons for retina and non-retina.

if you have icons for both scale, then no problem. use them! everything will work fine! it was 1-variant!

2-variant. if you have only one big image and you want use for both display, then you need specify the "scale" of the resized image:

(UIImage *)thumbnailImageSize:(CGSize)size fromImage:(UIImage *)image { 
    if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)] == YES && [[UIScreen mainScreen] scale] == 3.00) {
        _scale = 3.00; 
    } else if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)] == YES && [[UIScreen mainScreen] scale] == 2.00) { 
        _scale = 2.00; 
    } else 
        _scale = 1.00;

    UIGraphicsBeginImageContextWithOptions(size, NO, _scale); 
    [image drawInRect:CGRectMake(0, 0, size.width, size.height)]; 
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext(); 
    return newImage; 
}

Answer 9

My solution was to divide by 2 the x and y points, then I set it to left, right, top and bottom respectively.

Answer 10

try this it should do the trick and won't affect the older versions

Put the below lines in the any controller init method:

UIImage* image = [UIImage imageNamed: @"Your tabbar image name goes here"];
    if ([image respondsToSelector: @selector(imageWithRenderingMode:)])
            [self.tabBarItem setImage: [image imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal]];

Answer 11

Top and bottom insets are set in your code — it should be enough to set just on of these (say, top). The reason the highlighted image gets compressed might be that the raster has different dimensions, not the same as the default image — in this case the insets make the image scale vertically.

Answer 12

I fixed the same problem by using this category for UIImage that create an Image from an UIView

+ (UIImage *) imageWithView:(UIView *)view
{
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];

    UIImage * img = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return img;
}

And then, using this method you can create a new image with the custom offset you need. (I need only Y offset).

-(UIImage *) uiNewImageForTabBar: (UIImage *) i withOffsetForY: (CGFloat) offsetY
{
    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0, 0, i.size.width, i.size.height+offsetY)];
    [v setBackgroundColor:[UIColor clearColor]];
    [v setOpaque:NO];

    UIImageView *sub = [[UIImageView alloc] initWithImage:i];
    [sub setY:offsetY];

    [v addSubview:sub];

    return [UIImage imageWithView:v];
}