更改标签栏高度和宽度并添加圆角 [英] Change tab bar height and width and add rounded corners

问题描述

我想知道是否可以更改宽度和高度并为标签栏添加圆角?

或多或少是这样的:

我想让标签栏变小并添加圆角.

我现在可以用这样的东西改变大小:

override func viewWillLayoutSubviews() {var tabFrame = self.tabBar.frame//- 40 是可编辑的，默认值为 49 px，下方降低标签栏，上方增加标签栏大小tabFrame.size.height = 40tabFrame.origin.y = self.view.frame.size.height - 40self.tabBar.frame = tabFrame}

但是在图像中实现设计的最佳方法是什么?

提前致谢

解决方案

改变标签栏可能导致您在应用审核时遇到问题.为了更轻松地进行自定义，请尝试使用自定义标签栏控件.

查看

2- 创建一个自定义的 uitabbarController 类并将该代码放入 ViewDidLoad:

[[UITabBar 外观] 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;//这将是图像中的常量部分edgeInsets.bottom = 0.0f;image = [image resizableImageWithCapInsets:edgeInsets];[[UITabBar 外观] setBackgroundImage:image];

使用此方法调整图像大小以适合 UITabBar 高度:

- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {//UIGraphicsBeginImageContext(newSize);//在下一行中，传递 0.0 以使用当前设备的像素缩放因子(并因此考虑 Retina 分辨率).//传递 1.0 以强制精确的像素大小.UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);[图像 drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();返回新图像；}

结果如下:

如果还不清楚，我给你做了一个xcode项目并上传到github，请随意使用它来满足你的需求:)

Github 上 Sdiri Houssem 的自定义 UITabBarController

最好的问候

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

解决方案

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

这篇关于更改标签栏高度和宽度并添加圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！