logo标签列表

为选项卡栏设置背景图片

iphonetabbar
8
我是一名有用的助手，可以为您翻译文本。

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

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

非常感谢您的帮助。

敬礼， Stephen

1
请查看此链接。虽然要求背景颜色，但是在一个帖子中有将图像作为背景的代码。点击查看。 - Yama
12个回答
14

您可以为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

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

谢谢Erfan，我只想在我的RootViewController中使用tabbar，如何调用自定义类？ - Stephen
在这种情况下，您可以按照上述提到的方式调用自定义类......只是有点不同，在您的storyboard /主窗口中添加一个UIViewController。在您的应用程序委托类中，在applicationDidFinishLaunching内将viewController添加为窗口的子视图。然后您的RootViewController将出现在屏幕上，该屏幕位于您的viewController内部。然后，您可以根据需要在viewController的顶部隐藏或取消隐藏tabbar控制器。这只是一个建议。您可以尝试一下。我希望它能完成。 :) - Erfan
这行代码需要更改为：self.selectedIndex = tabID - 101;，原代码为：self.selectedIndex = tabID;。 - Jun
7
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];
@Stephen 请查看此链接中提供的方法：http://www.tumblr.com/tagged/uitabbar - nithin
再次感谢你，Nithin。我已经尝试了链接中的示例，但无法使其正常工作。 - Stephen
3
你需要根据操作系统版本有条件地编写代码。
如果你只支持iOS 5，你可以直接使用tabbar的backgroundImage属性。如果你需要支持iOS 5以下的版本，你应该添加一些有条件的代码来“破解”它。有几种方法可以做到这一点，这是其中之一： 自定义iOS 4.x下的选项卡栏背景图像
2
取自：http://ios-blog.co.uk/tutorials/ios-custom-ui-series-tabbar-navbar/ 该教程介绍了如何通过使用自定义图像和颜色创建iOS应用程序中的自定义选项卡栏和导航栏。它包括一些示例代码和演示如何使用Interface Builder和代码进行设置。
// Change the tab bar background
UIImage *tabBarBackground = [UIImage imageNamed:@"CustomUITabbar.png"];
[[UITabBar appearance] setBackgroundImage:tabBarBackground];
[[UITabBar appearance] setTintColor:[UIColor whiteColor]];
1

如之前所提到的，在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代码模板，您可以仅使用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。

1

您只需要识别每个情况，使用 -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();
    }
< p > -drawLayer:inContext 可以快速绘制背景图片。

1

如我之前所回答的，在不添加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;
     }
}
0
 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];
}
0
// 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
}
0

将自定义视图添加到UITabBar上。现在在该视图上添加按钮，并提供方法链接到选项卡栏按钮。现在您可以通过添加图像或任何内容在该视图上执行任何操作。它的工作方式类似于自定义选项卡栏。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接