设置标签栏的背景图像

Question

我正在尝试以编程方式在我的应用中设置标签栏的背景图像。 我的代码如下：

RootViewController.h

IBOutlet UITabBar *mainTabBar;
    IBOutlet UITabBarItem *settingsBarItem;
    IBOutlet UITabBarItem *infoBarItem;
    IBOutlet UITabBarItem *aboutBarItem;

RootViewController.m

-(void)viewDidLoad {

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"smallMenuBackground.png"]];    
    [mainTabBar insertSubview:imageView atIndex:0];
    [imageView release];

    [super viewDidLoad];
}

这对我不起作用。

更新

更新2012年1月23日

好的，我已经取得了一些进步。 自从我升级到Xcode 4.2和IOS5以来，这只是停止工作。 我设法使用Interface Builder中的选项将其取回，但现在它仅适用于IOS5。 理想情况下，我希望开始编程工作，但现在我将选择IB解决方案。

我似乎无法使其在任何以前的版本中都能正常工作。

注意：我的TabBar仅在我的RootViewController上，这是我的应用程序的主屏幕。

理想情况下，如果我可以使Nithin建议的代码正常工作，那将是很好的：

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tabBG.png"]];

if ([[[UIDevice currentDevice] systemVersion] floatValue] > 4.9) {
    //iOS 5
    [self.tabBarController.tabBar insertSubview:imageView atIndex:1];
}
else {
    //iOS 4.whatever and below
    [self.tabBarController.tabBar insertSubview:imageView atIndex:0];
}

[imageView release];

任何帮助，将不胜感激。

问候斯蒂芬

Answer 1

您可以将自定义类用于UITabBarController并覆盖您的tabBarController。 在这里，您可以设置所需的按钮及其图像操作。

这是您的自定义选项卡栏控制器类的样子：

// CustomTabBarController.h

#import <UIKit/UIKit.h>

@interface CustomTabBarController : UITabBarController {
    UIButton *settingsButton;
    UIButton *infoButton;
    UIButton *aboutUsButton;
}

@property (nonatomic, retain) UIButton *settingsButton;
@property (nonatomic, retain) UIButton *infoButton;
@property (nonatomic, retain) UIButton *aboutUsButton;

-(void) addCustomElements;
-(void) selectTab:(int)tabID;

@end

// CustomTabBarController.m

#import "CustomTabBarController.h"

@implementation CustomTabBarController

@synthesize settingsButton, infoButton, aboutUsButton;

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];


}
-(void)viewDidLoad
{
    [super viewDidLoad];
    [self addCustomElements];
}

-(void)addCustomElements
{
    // Background
    UIImageView* bgView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tabBarBackground.png"]] autorelease];
    bgView.frame = CGRectMake(0, 420, 320, 60);
    [self.view addSubview:bgView];

    // Initialise our two images
    UIImage *btnImage = [UIImage imageNamed:@"settings.png"];
    UIImage *btnImageSelected = [UIImage imageNamed:@"settingsSelected.png"];

    self.settingsButton = [UIButton buttonWithType:UIButtonTypeCustom]; //Setup the button
    settingsButton.frame = CGRectMake(10, 426, 100, 54); // Set the frame (size and position) of the button)
    [settingsButton setBackgroundImage:btnImage forState:UIControlStateNormal]; // Set the image for the normal state of the button
    [settingsButton setBackgroundImage:btnImageSelected forState:UIControlStateHighlighted]; // Set the image for the selected state of the button
    [settingsButton setBackgroundImage:btnImageSelected forState:UIControlStateSelected]; // Set the image for the selected state of the button
    [settingsButton setBackgroundImage:btnImageSelected forState:UIControlStateDisabled];
    [settingsButton setImage:btnImageSelected forState:(UIControlStateHighlighted|UIControlStateSelected)];
    [settingsButton setTag:101]; // Assign the button a "tag" so when our "click" event is called we know which button was pressed.
    [settingsButton setSelected:true]; // Set this button as selected (we will select the others to false as we only want Tab 1 to be selected initially

    // Now we repeat the process for the other buttons
    btnImage = [UIImage imageNamed:@"info.png"];
    btnImageSelected = [UIImage imageNamed:@"infoSelected.png"];
    self.infoButton = [UIButton buttonWithType:UIButtonTypeCustom];
    infoButton.frame = CGRectMake(110, 426, 100, 54);
    [infoButton setBackgroundImage:btnImage forState:UIControlStateNormal];
    [infoButton setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [infoButton setBackgroundImage:btnImageSelected forState:UIControlStateHighlighted];
    [infoButton setImage:btnImageSelected forState:(UIControlStateHighlighted|UIControlStateSelected)];

    [infoButton setTag:102];

    btnImage = [UIImage imageNamed:@"aboutUs.png"];
    btnImageSelected = [UIImage imageNamed:@"aboutUsSelected.png"];
    self.aboutUsButton = [UIButton buttonWithType:UIButtonTypeCustom];
    aboutUsButton.frame = CGRectMake(210, 426, 100, 54);
    [aboutUsButton setBackgroundImage:btnImage forState:UIControlStateNormal];
    [aboutUsButton setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [aboutUsButton setBackgroundImage:btnImageSelected forState:UIControlStateHighlighted];
    [aboutUsButton setImage:btnImageSelected forState:(UIControlStateHighlighted|UIControlStateSelected)];

    [aboutUsButton setTag:103];

    // Add my new buttons to the view
    [self.view addSubview:settingsButton];
    [self.view addSubview:infoButton];
    [self.view addSubview:aboutUsButton];

    // Setup event handlers so that the buttonClicked method will respond to the touch up inside event.
    [settingsButton addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [infoButton addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [aboutUsButton addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
}

- (void)buttonClicked:(id)sender
{
    int tagNum = [sender tag];
    [self selectTab:tagNum];
}

- (void)selectTab:(int)tabID
{
    switch(tabID)
    {
        case 101:
            [settingsButton setSelected:true];
            [infoButton setSelected:false];
            [aboutUsButton setSelected:false];
            break;
        case 102:
            [settingsButton setSelected:false];
            [infoButton setSelected:true];
            [aboutUsButton setSelected:false];
            break;
        case 103:
            [settingsButton setSelected:false];
            [infoButton setSelected:false];
            [aboutUsButton setSelected:true];
            break;
    }   
    self.selectedIndex = tabID;
}

- (void)dealloc {
    [settingsButton release];
    [infoButton release];
    [aboutUsButton release];

    [super dealloc];
}

@end

希望这对您有很大帮助。

Answer 2

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tabBG.png"]];

if ([[[UIDevice currentDevice] systemVersion] floatValue] > 4.9) {
    //iOS 5
    [self.tabBarController.tabBar insertSubview:imageView atIndex:1];
}
else {
    //iOS 4.whatever and below
    [self.tabBarController.tabBar insertSubview:imageView atIndex:0];
}

[imageView release];

Answer 3

您将需要根据OS版本有条件地对此进行编码。

如果仅支持iOS 5，则可以简单地使用选项卡栏的backgroundImage属性。 如果您需要支持低于5的iOS版本，则应添加一些条件代码以使其“被黑”。 有几种方法可以做到这一点，这是一种：

自定义标签栏背景图片-在iOS 4.x中

Answer 4

摘自： http : //ios-blog.co.uk/tutorials/ios-custom-ui-series-tabbar-navbar/

// Change the tab bar background
UIImage *tabBarBackground = [UIImage imageNamed:@"CustomUITabbar.png"];
[[UITabBar appearance] setBackgroundImage:tabBarBackground];
[[UITabBar appearance] setTintColor:[UIColor whiteColor]];

Answer 5

你只需要确定各种情况下，检查与版本-respondToSelector为Vinodh说。 我建议您在UITabBar上创建一个类别并使其简单。 因此，代码将具有以下形式：

    // UITabBar+Custom.h

    #import <UIKit/UIKit.h>
    #import <QuartzCore/QuartzCore.h>

    @interface UITabBar (Custom)
    -(void)setTabBarBackground:(UIImage *)backgroundImage;
    @end

和.m文件：

    // UITabBar+Custom.m

    #import "UITabBar+Custom.h"
    #import <objc/runtime.h>

    static char *backgroundImageKey;

    -(void)setImage:(UIImage *)anImage  {
          objc_setAssociatedObject(self, &backgroundImageKey, 
                anImage, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
          [self setNeedsDisplay];
    }

    -(UIImage *)image  {
          return objc_getAssociatedObject(self, &backgroundImageKey);
    }

    -(void)setTabBarBackground:(UIImage *)backgroundImage  {
         if([self respondsToSelector:@selector(setBackgroundImage:)]) {
              [self setBackgroundImage:backgroundImage];
         }  else  {
              [self setImage:backgroundImage];
         }
    }

    -(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx  {
        UIGraphicsPushContext(ctx);
        UIImage *currentImage = [self image];
        CGContextTranslateCTM(ctx, 0, currentImage.size.height);
        CGContextScaleCTM(ctx, 1.0, -1.0);

        CGContextDrawImage(ctx, self.bounds, currentImage.CGImage);
        UIGraphicsPopContext();
    }

-drawLayer:inContext将快速绘制背景图像。

Answer 6

正如我在上面回答的那样，无需添加UIView，就可以将背景图像添加到UITabBar，当您调用[tabBar setNeedsDisplay]时该图像可能会消失，因此我想到了在-drawLayer:layer inContext:ctx中绘制图像（ -drawInRect:rect不调用-drawInRect:rect ）。 但是，如果可以避免调用[tabBar setNeedsDisplay] ，则有一种简单的方法：

// UITabBar+Custom.m

#import "UITabBar+Custom.h"
#import <QuartzCore/QuartzCore.h>

-(void)setTabBarBackground:(UIImage *)backgroundImage  {
     if([self respondsToSelector:@selector(setBackgroundImage:)]) {
          // ios 5+
          [self setBackgroundImage:backgroundImage];
     }  else  {
          // ios 3.x / 4.x
          self.layer.contents = (id)backgroundImage.CGImage;
     }
}

Answer 7

就像之前在iOS 5上提到的，我建议您使用背景图片：

UITabBar *tabBar = tabController.tabBar;
if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) {
    tabBar.backgroundImage = [UIImage imageNamed:@"TabBackground.png"];
}

始终使用诸如respondsToSelector之类的检查，而不要使用显式版本检查。 这样可以得到更安全和更可靠的将来的代码。

在iOS 4上，我建议您最好在子类中使用-[UITabBar drawRect:]方法。 然后在Interface Builder中，将UITabBarController的UITabBar自定义类（通常在MainWindow.xib中）设置为自定义子类。

但是，如果您不使用MainWindow.xib，并且像iOS 5代码模板那样在代码中生成UITabBarController ，则只能使用UITabBar上的类别覆盖drawRect:方法。

// UITabBar+CustomBackground.h
@interface UITabBar (CustomBackground)
@end

// UITabBar+CustomBackground.m
@implementation UITabBar (CustomBackground)
- (void) drawRect:(CGRect)frame {
    [[UIColor redColor] set];

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextFillRect(ctx, [self bounds]);
}
@end

这仅适用于iOS 4.x和更低版本的系统，但是可以，因为我们已经介绍了iOS 5。

Answer 8

// Change the tab bar background
 UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
 [[UITabBar appearance] setBackgroundImage:tabBarBackground];

Answer 9

采取自定义视图并将其添加到UITaB栏上。 现在在该视图上添加按钮，并提供了指向标签栏按钮的方法链接。 现在，您可以通过添加图像或其他任何操作在该视图上执行任何操作。 就像自定义标签栏一样。

Answer 10

我过去所做的就是创建自己的TabbarController来加载不同的UIViewControllers 。 使用此控制器，我可以操纵选项卡和选项卡项目的外观。

这对我来说很好，但是最初需要一些工作。 因为您必须“模拟” UITabBarController ，因为您实际上并未使用“本机” UITabBar

Answer 11

 jUst call these two methods
   hideTabBar;
   addCustomElements;

  hideTabBar method hides the original tabbar
  And addCustomElements method will add the custom tabbar image as well as custom tabbar button also 


- (void)hideTabBar
{
    for(UIView *view in self.tabBarController.view.subviews)
    {
        //      if([view isKindOfClass:[UITabBar class]])
        //      {
        //          view.hidden = YES;
        //          break;
        //      }

        if([view isKindOfClass:[UITabBar class]])
        {
            [view setFrame:CGRectMake(view.frame.origin.x, 480, view.frame.size.width, view.frame.size.height)];
        } 
        else 
        {
            [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, 480)];
        }


    }
}

-(void)addCustomElements
{
    // Initialise our two images
    UIImage *btnImage = [UIImage imageNamed:@"homet.png"];
    UIImage *btnImageSelected = [UIImage imageNamed:@"homehovert.png"];

    self.btn1 = [UIButton buttonWithType:UIButtonTypeCustom]; //Setup the button
    btn1.frame = CGRectMake(28, 446, 25,28); // Set the frame (size and position) of the button)
    [btn1 setBackgroundImage:btnImage forState:UIControlStateNormal]; // Set the image for the normal state of the button
    [btn1 setBackgroundImage:btnImageSelected forState:UIControlStateSelected]; // Set the image for the selected state of the button
    [btn1 setTag:0]; // Assign the button a "tag" so when our "click" event is called we know which button was pressed.
    [btn1 setSelected:true]; // Set this button as selected (we will select the others to false as we only want Tab 1 to be selected initially

    // Now we repeat the process for the other buttons
    btnImage = [UIImage imageNamed:@"blogt.png"];
    btnImageSelected = [UIImage imageNamed:@"bloghovert.png"];
    self.btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn2.frame = CGRectMake(107, 448, 22,28);
    [btn2 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn2 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn2 setTag:1];

    btnImage = [UIImage imageNamed:@"networkt.png"];
    btnImageSelected = [UIImage imageNamed:@"networkhovert.png"];
    self.btn3 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn3.frame = CGRectMake(180, 446, 35,29);
    [btn3 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn3 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn3 setTag:2];

    btnImage = [UIImage imageNamed:@"contactt.png"];
    btnImageSelected = [UIImage imageNamed:@"contacthovert.png"];
    self.btn4 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn4.frame = CGRectMake(262, 447, 32,28);
    [btn4 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn4 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn4 setTag:3];

    self.img1 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"tabbar.png"]] ;
    img1.frame = CGRectMake(0, 440, 320, 40); 




    [self.tabBarController.view addSubview:img1];
    // Add my new buttons to the view
    [self.tabBarController.view addSubview:btn1];
    [self.tabBarController.view addSubview:btn2];
    [self.tabBarController.view addSubview:btn3];
    [self.tabBarController.view addSubview:btn4];

    // Setup event handlers so that the buttonClicked method will respond to the touch up inside event.
    [btn1 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn2 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn3 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn4 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
}

Answer 12

// not supported on iOS4    
UITabBar *tabBar = [tabController tabBar];
if ([tabBar respondsToSelector:@selector(setBackgroundImage:)])
{
    // set it just for this instance
    [tabBar setBackgroundImage:[UIImage imageNamed:@"tabbar_brn.jpg"]];

    // set for all
    // [[UITabBar appearance] setBackgroundImage: ...
}
else
{
    // ios 4 code here
}