如何在UITabBar中添加自定义分隔符图像？

Question

我有一个UITabBar，我试图让它符合新iOS 6 App Store的外观。 我有一些相当不错的渐变效果，但我想知道如何设置分隔线图像。

除了手动向每个图像添加线条外，我还能做些什么来复制分隔线外观？

- Westley

Answer 1

您可以为每个项目添加图像，包括选中和未选中状态。就像这样：

    UIImage *selectedImage0     = [UIImage imageNamed:@"image1.png"];
    UIImage *unselectedImage0   = [UIImage imageNamed:@"image1_unselected.png"];

    UIImage *selectedImage1     = [UIImage imageNamed:@"image2.png"];
    UIImage *unselectedImage1   = [UIImage imageNamed:@"image2_unselected.png"];

    UIImage *selectedImage2     = [UIImage imageNamed:@"image3.png"];
    UIImage *unselectedImage2   = [UIImage imageNamed:@"image3_unselected.png"];

    UIImage *selectedImage3     = [UIImage imageNamed:@"image4.png"];
    UIImage *unselectedImage3   = [UIImage imageNamed:@"image4_unselected.png"];

    UIImage *selectedImage4     = [UIImage imageNamed:@"image5.png"];
    UIImage *unselectedImage4   = [UIImage imageNamed:@"image5_unselected.png"];

    UITabBar     *tabBar = self.tabBarController.tabBar;
    UITabBarItem *item0  = [tabBar.items objectAtIndex:0];
    UITabBarItem *item1  = [tabBar.items objectAtIndex:1];
    UITabBarItem *item2  = [tabBar.items objectAtIndex:2];
    UITabBarItem *item3  = [tabBar.items objectAtIndex:3];
    UITabBarItem *item4  = [tabBar.items objectAtIndex:4];

    [item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
    [item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
    [item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
    [item3 setFinishedSelectedImage:selectedImage3 withFinishedUnselectedImage:unselectedImage3];
    [item4 setFinishedSelectedImage:selectedImage4 withFinishedUnselectedImage:unselectedImage4];

你可以将此代码放置在任何一个控制器的viewDidLoad方法中。 希望这能有所帮助。 祝好！

- George

---

那么您是建议将分隔符图像添加到主图像中吗？ - Westley

我猜...我的建议是为每个选项卡准备2张图像，分别是“已选中”和“未选中”的。分隔线也可以包含在图像中。这样，您就可以创建任何想要的效果，包括动画效果。 - George

它可以包含在选项卡的图像中。 - George

@George，图片的宽度和高度是多少？ - user2545330

在这种情况下，图标的尺寸是多少？我有 icon.png 的 30x30 和 [e-mail] 的 60x60。 - Tyrone Prude

我不知道为什么这个糟糕的答案被采纳了。 - LKM

Answer 2

我把我的选项卡栏图片放在这里：- 然后我像这样将它设置在选项卡栏中：-

  CGRect frame = CGRectMake(0.0, 0.0, 320, 48);
        NSLog(@"%f",frame.size.width);
        UIView *v = [[UIView alloc] initWithFrame:frame];
        // [v setBackgroundColor:DARK_BACKGROUNDTabBar];
        UIImageView *imgView =[[UIImageView alloc]initWithFrame:frame];
        UIImage *img1 = [UIImage imageNamed:@"tabbar.png"];
        [imgView setImage:img1];
        [v addSubview:imgView];

        [v setAlpha:1];
        [[self.tabBarController tabBar] insertSubview:v atIndex:1];
        [v release];

希望这对你有用。

你可以使用4或5个选项卡创建自己的图像，并像上面那样设置。

- Nitin Gohel

---

在选项卡项目之间应该使用分隔图像。 - G A

Answer 3

如果您只想为选项卡设置“选中”和“正常”背景图像（其中包括分隔符左右两侧的一半），则可以子类化UITabBarController，并在viewDidLoad期间使用UIButtons替换UITabBar。这很简单。将图像设置为按钮的背景。它们包含左侧和右侧4px的分隔符。

我正在使用故事板，因此当调用viewDidLoad时，self.tabBar.items数组已经填充。

@interface MyTabBarController()
@property (nonatomic,strong) UIImage *selectedImage;
@property (nonatomic,strong) UIImage *normalImage;
@end

@implementation MyTabBarController
@synthesize selectedImage, normalImage;

- (void) viewDidLoad
{
    [super viewDidLoad];

    // set whichever view you want to start with
    self.selectedIndex = 1;

    self.tabBar.hidden=YES;

    // those are the images used for the selected and not selected tabs
    self.selectedImage = [[UIImage imageNamed:@"tabBarBackground_down.png"] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
    self.normalImage = [[UIImage imageNamed:@"tabBarBackground.png"] stretchableImageWithLeftCapWidth:4 topCapHeight:0];

    CGFloat width = self.view.frame.size.width/[self.tabBar.items count];
    for( int itemIndex=0; itemIndex<[self.tabBar.items count]; itemIndex++ )
    {
        UITabBarItem *item = [self.tabBar.items objectAtIndex:itemIndex];

        // create a button
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;

        // configure the button to act as a tab
        button.adjustsImageWhenHighlighted = NO;
        [button setImage:item.image forState:UIControlStateNormal];
        [button setBackgroundImage:self.selectedIndex==itemIndex?self.selectedImage:self.normalImage forState:UIControlStateNormal];

        // this is used later to set the selectedIndex of the UITabBarController
        button.tag = itemIndex;

        // position the button in place of tab
        CGFloat nextXStart = itemIndex+1==[self.tabBar.items count]?self.view.frame.size.width:rint(width*(itemIndex+1));
        button.frame = CGRectMake(rint(width*itemIndex), self.view.frame.size.height-49, nextXStart-rint(width*itemIndex) , 49);

        [self.view addSubview:button];

        // add event to the button
        [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchDown];
    }
}

- (void) buttonClicked:(id)sender
{
    UIButton *button = sender;
    if( self.selectedIndex!=button.tag )
    {
        // select the tab and change the visible viewcontroller
        self.selectedIndex = button.tag;

        // reset all but the active buttons to have the normal image
        for( UIView *subview in self.view.subviews )
        {
            if( subview!=sender && [subview isKindOfClass:[UIButton class]])
                [((UIButton *)subview) setBackgroundImage:self.normalImage  forState:UIControlStateNormal];
        }

        // set the selectedImage as background of the clicked button
        [button setBackgroundImage:self.selectedImage  forState:UIControlStateNormal];
    }
}
@end

- bert