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

回答1:

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.

Edit:

Well, Here is what you need to do:

1- create a circular transparent png for the background:

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;
edgeInsets.top = 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 {
    //UIGraphicsBeginImageContext(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();
    UIGraphicsEndImageContext();
    return newImage;
}

The result looks like this:

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

来源：https://stackoverflow.com/questions/39925733/change-tab-bar-height-and-width-and-add-rounded-corners

标签

ios