设置标签栏的背景图像

I'm trying to programmatically set the background image for a tabbar in my app. My code is as follows:

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

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];
}

This is not working for me.

这不适合我。

UPDATE

UPDATE 23rd January 2012

更新2012年1月23日

Ok, I've made a bit of progress. This only stopped working since I upgraded to Xcode 4.2 and IOS5. I managed to get it back using the options in Interface Builder, but now it only works for IOS5. Ideally I would have liked to get working programatically but I'll settle for the IB solution for now.

好的,我已经取得了一些进展。自从我升级到Xcode 4.2和IOS5后,这才停止工作。我设法使用Interface Builder中的选项将其恢复,但现在它仅适用于IOS5。理想情况下,我本来希望以编程方式开始工作,但我现在会满足于IB解决方案。

I just can't seem to get it working for any previous releases.

我似乎无法让它适用于任何以前的版本。

NOTE: my TabBar is only on my RootViewController, which is the main screen of my app.

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

Ideally, if I could get the code working that Nithin suggested, that would be great:

理想情况下,如果我能让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];

Any help would be appreciated.

任何帮助,将不胜感激。

Regards, Stephen

12 个解决方案

#1

You can use custom class for UITabBarController & override your tabBarController. There you can set your required buttons & their actions with image.

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

This is how your custom tab bar controller class can be look like:

这是您的自定义选项卡栏控制器类的外观:

// 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

Hope this will help you a lot.

希望这对你有很大的帮助。

#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];

#3

You will need to conditionally code this by OS version.

您需要通过操作系统版本对此进行有条件的编码。

If you are only supporting iOS 5, you can simply use the backgroundImage property of the tabbar. If you need to support versions of iOS below 5 you should add some conditional code that 'hacks' it in place. There are several approaches to do that, here's one:

如果您只支持iOS 5,则只需使用tabbar的backgroundImage属性即可。如果你需要支持低于5的iOS版本,你应该添加一些“黑客”它的条件代码。有几种方法可以做到这一点,这里有一个:

Custom tab bar background image - in iOS 4.x

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

#4

Taken from: http://ios-blog.co.uk/tutorials/ios-custom-ui-series-tabbar-navbar/

摘自: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]];

#5

Like mentioned before on iOS 5 I would suggest you use the background image:

就像之前在iOS 5上提到的那样,我建议你使用背景图片:

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

Always use a check like respondsToSelector instead of explicit version checking. This results in safer and more future proof code.

始终使用像respondsToSelector这样的检查而不是显式版本检查。这样可以获得更安全,更具前瞻性的代码。

On iOS 4 I would suggest you use the -[UITabBar drawRect:] method, preferably in a subclass. Then in Interface Builder set the UITabBarControllers UITabBar custom class (usually in MainWindow.xib) to your custom subclass.

在iOS 4上,我建议你使用 - [UITabBar drawRect:]方法,最好是在子类中。然后在Interface Builder中将UITabBarControllers UITabBar自定义类(通常在MainWindow.xib中)设置为自定义子类。

However if you are not using a MainWindow.xib, and like the iOS 5 code templates you generate your UITabBarController in code, you can only overwrite the drawRect: method using a category on UITabBar.

但是,如果您没有使用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

This only works on systems iOS 4.x and earlier, but thats ok because we covered iOS 5 already.

这仅适用于iOS 4.x及更早版本的系统,但这很好,因为我们已经覆盖了iOS 5。

#6

You just have to identifying each case, checking the version with -respondToSelector as Vinodh said. I suggest you to create a category on UITabBar and do it easy. So the code will have this form:

你只需要识别每个案例,用Vinodh说,用-respondToSelector检查版本。我建议你在UITabBar上创建一个类别并轻松完成。所以代码将具有以下形式:

    // UITabBar+Custom.h

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

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

And the .m file:

和.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();
    }

The -drawLayer:inContext will draw the background image fast.

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

#7

As I answered above, without adding UIView it's possible to add the background image to an UITabBar, an image which could disappear when you call [tabBar setNeedsDisplay], so I thought of draw the image in -drawLayer:layer inContext:ctx (the -drawInRect:rect is not called). However if you can avoid calling [tabBar setNeedsDisplay], there's a simple way of doing this:

正如我上面回答的那样,如果没有添加UIView,就可以将背景图像添加到UITabBar,这个图像在调用[tabBar setNeedsDisplay]时可能会消失,所以我想在-drawLayer中绘制图像:layer inContext:ctx( - 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;
     }
}

#8

Take a customized view and add it on UITaB bar. now add button on that view and provided method link to tab bar buttons. Now u can do whatever on that view by adding image or any thing. It works as like Customized tab bar.

获取自定义视图并将其添加到UITaB栏上。现在在该视图上添加按钮,并提供指向标签栏按钮的方法链接。现在你可以通过添加图像或任何东西在该视图上做任何事情。它像自定义标签栏一样工作。

#9

What I've done in the past is create my own TabbarController to load different UIViewControllers. With this controller I can manipulate the appearance of the tabbar and tabbar items in it.

This works fine by me, but it's initially a bit of work. Because you have to "simulate" the UITabBarController, since you don't actually use the 'native' UITabBar

我过去做的是创建我自己的TabbarController来加载不同的UIViewControllers。使用此控制器,我可以操作其中的tabbar和tabbar项的外观。这对我来说很好,但它最初是一些工作。因为您必须“模拟”UITabBarController,因为您实际上并未使用“本机”UITabBar

#10

 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];
}

#11

// 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
}

#12

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