我怎样才能制作中央凸起的标签栏项目？

Question

首先我想说我是 iPhone 应用程序开发的新手。当我选择选项卡栏的一项时，我想制作一个选项卡项，那么它应该看起来像

提前非常感谢。

Answer 1

知道它已经得到回答，但想提供另一种方法。

根据文档，子类化 UITabBarController 是一个坏主意。当我实际尝试使用 UIImagePickerController 作为子类化选项卡栏后面的视图控制器之一时，我也遇到了无穷无尽的麻烦。

我采用了一种更简单的方法，只需在选项卡栏项目上覆盖一个 uibutton 即可。示例项目可以在这里找到：

https://github.com/group6/RaishedCenterButton

但这只是一个示例。您仍然需要完成将其合并到应用程序中的工作。

Answer 2

这已经在很多教程中进行了介绍。这些应用程序中的大多数实现这种效果的方式是在中间的选项卡栏顶部放置一个自定义的 UIButton，该按钮的样式与选项卡栏类似。

iDev Recipes 有一个很好的教程和代码示例

Answer 3

为此，您需要通过子类 UITabBarController 创建自定义选项卡栏。

TabBarController.h 文件：

@interface TabBarController : UITabBarController<UITabBarControllerDelegate>
{
    UITabBarController *tabController;

    UIImageView *img1;
    UIImageView *img2;
    UIImageView *img3;
    UIImageView *img4;
}

.m 文件

- (void)viewDidLoad 
{       
    [self loadTabView];
    //[self viewWillAppear:YES];
    [super viewDidLoad];        
}

- (void) loadTabView 
{
    tabController = [[UITabBarController alloc] init];
    tabController.delegate = self;
    tabController.tabBar.backgroundColor = [UIColor clearColor];

    //set offset for tabbar items images. 
    int topOffset = 6;
    int bottomOffset = 6;
    UIEdgeInsets imageInset = UIEdgeInsetsMake(topOffset, 0, -bottomOffset, 0);

    [self.view addSubview:tabController.view];
}

// reset the background image in custom tabbar.
- (void) setTabBarBackground {

    UIImageView *img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"btnbg.png"]];
    img.frame = CGRectOffset(img.frame, 0, 1);
    img.frame = CGRectMake(img.frame.origin.x, img.frame.origin.y-1, img.frame.size.width, img.frame.size.height);
    [tabController.tabBar insertSubview:img atIndex:0];
    [img release];

}

// reset the background image in custom tabbar.
- (void) resetTabBar : (NSString *) tabid
{   
    [img1 removeFromSuperview];

    NSLog(@"tab id - %@",tabid);
    switch ([tabid intValue]) {
        case 0:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-1.jpg"]];
            break;
        case 1:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-2.jpg"]];
            break;
        case 2:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-3.jpg"]];
            break;
        case 3:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-4.jpg"]];
            break;
        case 4:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-5.jpg"]];
            break;
        default:
            break;
    }

    img1.frame = CGRectOffset(img1.frame, 0, 1);
    [tabController.tabBar insertSubview:img1 atIndex:0];
    [tabController.tabBar bringSubviewToFront:img1];
    [img1 release];

}

// here push View controllers
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
}

希望它能给您带来想法。

Answer 4

我建议不要这样做。 iOS 用户习惯了熟悉的标签栏功能。突出显示足以让他们知道他们在哪个选项卡上。

你的设计理念非常有吸引力，但这是有代价的。拉起的条形项目旁边的条形上方的区域被浪费了，或者必须减小其他图标的大小。这将使它更难以使用，而不是更容易。

这里有一个很好的建议：从忙碌的生活中抽出 2 个小时阅读 Apple iOS 人机界面指南从头到尾。本书引人入胜，将为您提供解决此类设计问题的良好指导。