How to clip larger images to fit into tabBar icons

Question

I have created a tab controller programmatically.

Now, I wanted to add images to the different tabs, for which I used :

  self.tabBarItem.image = [UIImage imageNamed:@"Sample_Image.png"];

The problem is Sample_image is larger in size than is required by tab.

So just want to know how can I clip the image to fit into tabs.

Answer 1

Sample_image is larger in size than is required by tab.

Try this piece of code as this will resize the required image and return an UIImage instance with 30x30 size (size required for UITabbar).

UIImage *image = [UIImage imageNamed:@"Sample_Image.png"];
self.tabBarItem.image = [self imageWithImage:image scaledToSize:CGSizeMake(30, 30)];

Add This method

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

Answer 2

If your icons are not fitting in the tabbar then copy the same image into 2x image asset or 3x image asset instead of 1x asset. It will fit properly and it's worked for me

Answer 3

Rename your image to [e-mail]. This is called pixel doubling for the Retina Display.

Without the @2x iOS doesn't know that it should apply a scale factor and it will be used as it is and though it should be halved.

 [[[self tabBarController] tabBar] setBackgroundImage:[UIImage imageNamed:@"[e-mail]"]];

In reality there should be:

Sample_Image png (45 px or so)

[e-mail] so you say only:

[[[self tabBarController] tabBar] setBackgroundImage:[UIImage imageNamed:@"Sample_Image.png"]];