user2636197 user2636197 - 1 year ago 134
Swift Question

Change tab bar height and width and add rounded corners

I wonder if its possible to change the width and height and add rounded corners to a tab bar?

More or less like this:

I want to make the tab bar smaller and add rounded corners.

I now that I can change the size with something like this:

override func viewWillLayoutSubviews() {
var tabFrame = self.tabBar.frame
// - 40 is editable , the default value is 49 px, below lowers the tabbar and above increases the tab bar size
tabFrame.size.height = 40
tabFrame.origin.y = self.view.frame.size.height - 40
self.tabBar.frame = tabFrame

But what would the best way be to achive the design in the image?

Thanks in advance

Answer Source

Altering the tabbar may cause you to get trouble with app review. For easier customisation try to use a custom tab bar control.

Take a look Here for a list of great open source list of tab bar components that are easily FULLY customisable.

Tell me if this solves your issue, otherwise we can make further customisation.


Well, Here is what you need to do:

1- create a circular transparent png for the background: enter image description here

2- Create a custom uitabbarController class and put that code in ViewDidLoad:

[[UITabBar appearance] setBarTintColor:[UIColor clearColor]];
self.tabBarController.tabBar.translucent = YES;
UIImage *image = [self imageWithImage:[UIImage imageNamed:@"circle.png"]scaledToSize:CGSizeMake(self.tabBar.frame.size.height+1, self.tabBar.frame.size.height+1)];
UIEdgeInsets edgeInsets;
edgeInsets.left = image.size.width/2; = 0.0f;
edgeInsets.right = image.size.width/2; //this will be the constant portion in your image
edgeInsets.bottom = 0.0f;
image = [image resizableImageWithCapInsets:edgeInsets];

[[UITabBar appearance] setBackgroundImage:image];

The image is resized to fit the UITabBar height using this method:

- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
    // In next line, pass 0.0 to use the current device's pixel scaling factor (and thus account for Retina resolution).
    // Pass 1.0 to force exact pixel size.
    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    return newImage;

The result looks like this:

enter image description here

In case it is still unclear, I made you an xcode project and uploaded it to github, please feel free to use it to fit your needs :)

Custom UITabBarController by Sdiri Houssem on Github

Best regards

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download