在UITabBar中自定义颜色
可以在UITabBar中使用自定义颜色和背景图片吗? 我意识到,苹果希望每个人都使用相同的蓝色和灰色标签栏,但有没有什么办法来定制这个?
其次,即使我创build了自己的TabBar式的视图控制器,还有自定义图像,这是否会违反苹果的人机界面指南?
我在Silent Mac Designfind了答案。
我这样实现:
首先做一个UITabBarContoller的子类
// CustomUITabBarController.h #import <UIKit/UIKit.h> @interface CustomUITabBarController: UITabBarController { IBOutlet UITabBar *tabBar1; } @property(nonatomic, retain) UITabBar *tabBar1; @end
// CustomUITabBarController.m #import "CustomUITabBarController.h" @implementation CustomUITabBarController @synthesize tabBar1; - (void)viewDidLoad { [super viewDidLoad]; CGRect frame = CGRectMake(0.0, 0, self.view.bounds.size.width, 48); UIView *v = [[UIView alloc] initWithFrame:frame]; [v setBackgroundColor:[[UIColor alloc] initWithRed:1.0 green:0.0 blue:0.0 alpha:0.1]]; [tabBar1 insertSubview:v atIndex:0]; [v release]; } @end
然后在你的Nib文件中用CustomUITabBarControllerreplaceTabBar控制器的类。
仅供参考,从iOS 5开始,您可以自定义UITabBar的各个方面,包括使用backgroundImage属性设置其背景图像。
iOS 5中新的UITabBar “自定义外观”属性是:
backgroundImage selectedImageTintColor selectionIndicatorImage tintColor
鉴于苹果已经在iOS 5中引入了这些方法,那么可能他们会更加同情尝试为早期操作系统定制UITabBar。 这个网站上说Twitter的应用程序使用自定义的标签栏,所以这可能是更多的理由,苹果会让这样的应用程序进入App Store,但它不能保证!
使用下面的图片(假设,tabBar有5个标签如下)
使用“TabBar应用程序”模板创build一个新项目并放置以下代码。
AppDel.h文件的内容。
#import <UIKit/UIKit.h> @interface cTabBarAppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> { } @property (nonatomic, retain) IBOutlet UIWindow *window; @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController; @property (nonatomic, retain) IBOutlet UIImageView *imgV; @end
AppDel.m文件的内容。
#import "cTabBarAppDelegate.h" @implementation cTabBarAppDelegate @synthesize window=_window; @synthesize tabBarController=_tabBarController; @synthesize imgV = _imgV; - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.tabBarController.delegate=self; self.imgV.frame=CGRectMake(0, 425, 320, 55); [self.tabBarController.view addSubview:self.imgV]; self.tabBarController.selectedIndex=0; self.window.rootViewController = self.tabBarController; [self.window makeKeyAndVisible]; return YES; } - (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController{ NSUInteger index=[[tabBarController viewControllers] indexOfObject:viewController]; switch (index) { case 0: self.imgV.image=[UIImage imageNamed:@"tBar1.png"]; break; case 1: self.imgV.image=[UIImage imageNamed:@"tBar2.png"]; break; case 2: self.imgV.image=[UIImage imageNamed:@"tBar3.png"]; break; case 3: self.imgV.image=[UIImage imageNamed:@"tBar4.png"]; break; case 4: self.imgV.image=[UIImage imageNamed:@"tBar5.png"]; break; default: break; } return YES; }
在*** ViewController.m的开头添加以下内容可能有助于设置UITabBar的背景图像。
@implementation UITabBar (CustomImage) - (void)drawRect:(CGRect)rect { UIImage *image = [UIImage imageNamed: @"background.png"]; [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)]; } @end
如果你想使用自定义颜色的图标(而不仅仅是背景),而不是默认的灰色和蓝色,这样做是这样的: http : //blog.theanalogguy.be/2010/10/06/custom-colored- uitabbar-图标/
基本上,您需要为每个选定的选项卡创build完整的tabbar图像(背景和图标和文本),并将您的UITabBarItems设置为无图标和无标题,并将该图像作为UIImageView插入到tabbar中viewWillAppear:
苹果不会介意,因为我们没有使用任何私人API。
从iOS 7.0开始,你可以使用UIImageWithRenderingMode:和UIImageRenderingModeAlwaysOriginal来保存颜色:
// Preserve the colors of the tabs. UITabBarController *controller = (UITabBarController *)((UIWindow *)[UIApplication sharedApplication].windows[0]).rootViewController; NSArray *onIcons = @[ @"tab1-on", @"tab2-on", @"tab3-on" ]; NSArray *offIcons = @[ @"tab1-off", @"tab2-off", @"tab3-off" ]; NSArray *items = controller.tabBar.items; for (NSUInteger i = 0; i < items.count; ++i) { UITabBarItem *item = items[i]; item.image = [[UIImage imageNamed:offIcons[i]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; item.selectedImage = [[UIImage imageNamed:onIcons[i]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; }
奇迹般有效。
在AppDelegate.m中
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [[UITabBar appearance] setSelectedImageTintColor:[UIColor redColor]]; return YES; }
就UITabBar类而言,栏中的图标仅限于颜色:select蓝色,未select颜色。 这是因为选项卡栏只使用您提供的图标中的alpha值来在栏上创build图像。
据我所知,酒吧本身仅限于黑色。 我没有看到任何文档中的UINavigationBar上的“tint”属性。
我猜你可以继续创build自己的标签栏样式类,并按照自己的意愿去做,但是我完全不知道如何配合苹果的HIG,或者在审核过程中是否挑战它。
根据我的经验,如果我根据HIG没有使用他们的UI元素,苹果评论家只会拒绝我的应用程序。 当他们自己的用户界面元素,他们可能会有不同的看法。
这是文件,说我们不能改变按下或select与我们的图标的外观。
它位于导航栏,工具栏和选项卡栏的标题下
它可能没有添加任何subView。
在定义标签栏的类中,将tabBarItem的属性设置为 – >>
UITabBarItem *tabBarItem1 = [[self.tabBar.tabBar items] objectAtIndex:0]; [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"campaigns_hover.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"campaigns.png"]];
它是tabBarItem的一个属性,可以将默认的蓝色图像更改为自定义图像。 campaigns_hover.png是选定的自定义图像AND campaigns.png是未选中时的自定义图像…
享受秘密.. 🙂
下面的代码可以帮助你添加RGB值的自定义颜色到你的tabBar。
self.tabBarController.tabBar.tintColor = [[UIColor alloc] initWithRed:0.00 green:0.62 blue:0.93 alpha:1.0];
你可以做到这一点没有-insertSubview:atIndex
,因为一个新的UIView是不需要的。 你可以在每个视图上使用QuartzCore(UITabBar及其子视图)应用主题。 所以UITabBar的背景被添加,正如我在这里所描述的。
现在我们必须在每个UITabBarItem上应用这个图像作为背景:
// UITabBar+CustomItem.h #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> @interface UITabBar (CustomItem) -(void)setSelectedItemBackground:(UIImage *)backgroundImage; @end
现在.m文件:
// UITabBar+CustomItem.m @implementation UITabBar (CustomItem) #define kItemViewTag 445533 // <-- casual number #define kItemViewOldTag 445599 // <-- casual number different from the above -(void)setSelectedItemBackground:(UIImage *)backgroundImage { UIView *oldView = [self viewWithTag:kImageViewItemTag]; oldView.layer.contents = nil; // <-- remove the previous background oldView.tag = kItemViewOldTag; // <-- this will avoid problems NSUInteger index = [self.items indexOfObject:self.selectedItem]; UIView *buttonView = [self.subviews objectAtIndex:index]; buttonView.tag = kItemViewTag; buttonView.layer.contents = (id)backgroundImage.CGImage; // <-- add // the new background } @end
您也可以改变所选图像的颜色,就像有人在这里做的一样 。 但是我想知道的是:我可以更改所选标签的颜色吗? 答案是肯定的,如下所述(下面的ios 3.x / 4.x,不是iOS5 +):
@implementation UITabBar (Custom) #define kSelectedLabel 334499 // <-- casual number -(void)changeCurrentSelectedLabelColor:(UIColor *)color { UIView *labelOldView = [self viewWithTag:kSelectedLabel]; [labelOldView removeFromSuperview]; NSString *selectedText = self.selectedItem.title; for(UIView *subview in self.subviews) { if ([NSStringFromClass([subview class]) isEqualToString:@"UITabBarButton"]) { for(UIView *itemSubview in subview.subviews) { if ([itemSubview isKindOfClass:[UILabel class]]) { UILabel *itemLabel = (UILabel *)itemSubview; if([itemLabel.text isEqualToString:selectedText]) { UILabel *selectedLabel = [[UILabel alloc] initWithFrame:itemLabel.bounds]; selectedLabel.text = itemLabel.text; selectedLabel.textColor = color; selectedLabel.font = itemLabel.font; selectedLabel.tag = kSelectedLabel; selectedLabel.backgroundColor = [UIColor clearColor]; [itemSubview addSubview:selectedLabel]; [selectedLabel release]; } } } } } } @end