用XIB创建tabBar多视图效果

今天巩固了一下如何用XIB生成多视图界面，以前很少用，只是看别人用过，自己还是有所欠缺。今天用过后发现，代码确实少了好多，不过要用的话得熟练，否则自己觉得还不如手敲来的快呢！这次要写的程序运行起来的效果是这样的：底部有几个图标，每个图标对应一个视图。每点击一个图标，对应的视图就会打开。如下图，就是我做好的程序效果：

   

每个TabBar有一个对应颜色的视图。

为了搞清使用Tab Bar切换视图的原理，我们还是从Empty Application开始创建我们的程序。

1、运行Xcode 4.2，新建一个Empty Application，名称为Tab BarApplication，其他设置如下图：

点击Next，这样就创建好了。接下来往里面添加素材图片！

2、为工程添加图标文件：

这里要添加的图标文件是用来定制各Tab Bar的。首先新建一个Group，选择File — New — NewGroup，创建好后给新的Group重命名为Icons。然后，将准备好的四个图标文件拖到Group中，在弹出的窗口选择Copyitems……(if needed)，如下图：

3、添加你自己的素材！

4、创建四个View Controller：

选中TabBar Application这个Group，然后选择File — New — New File，在弹出的窗口，左边选择CocoaTouch，右边选择UIViewControllersubclass，之后选Next，在弹出的窗口中，输入名称BlueViewController，并选中Withxib，如下图：

然后选择Next，选好位置，点击Create，这样就创建了一个ViewController。以同样的方式再创建三个，名称分别是GreenViewController，RedViewController，YellowViewController。

5、创建TabBarController.xib：

选中TabBar Application这个Group，然后选择File — New — New File，在弹出的窗口，左边选择UserInterface，右边选择Empty：

然后点Next，在弹出的窗口输入名称TabBarController，选好位置后点击Create。

之后，在Group中点击TabBarController.xib，你会发现跟BlueViewController.xib不一样，里边没有一个像View一样的窗口，不要着急，我们拖一个TabBar Controller到里边：

6、在上图中选择File’s Owner，打开IdentityInspector，在Class一栏选择AppDelegate：

这样，我们就可以从TabBarController.xib向AppDelegate创建OutLet映射了。

7、打开Assistant Editor，保证Assistant Editor中打开的是AppDelegate.h，在左边选中TabBar Controller，按住Control，往AppDelegate.h中创建映射：

然后在弹出的窗口输入rootController，点击Connect：

打开AppDelegate.m，在didFinishLaunchingWithOptions方法中添加代码：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    [[NSBundle mainBundle]loadNibNamed:@"TabBarController" owner:self options:nil];
    self.window.backgroundColor = [UIColor whiteColor];
    
    [self.window addSubview:self.rootController.view];
    [self.window makeKeyAndVisible];
    return YES;
}

8、单击TabBarController.xib，拖两个Tab Bar Item到Tab Bar上：

9、选中第一个View Controller，在右边打开IdentityInspector，在Class中选择BlueViewController：

然后，打开Attribute，在NIBName选择BlueViewController：（在这里，我认为应该先在原来你创建每个视图时候的XIB上添加背景颜色，并设置他的BottomBar为TabBar,否则，你直接在这里选不了BlueViewController，而只会显示一个TabBarViewController,至少我当时做的时候选不了，不过刚开始不选也可以，后面如果步骤正确的话还是可以显示的。你们可以试试，具体情况与你们看到的为准。）

对其他的ViewController进行同样的操作，依次设成GreenViewController、RedViewController、YellowViewController。

10、设置TabBar图标和文字：

展开BlueView Controller，选中其中的Tab Bar Item，打开Attribute，如下图：

Badge属性：设置的文字将以红色图标形式显示出来，比如，这个Tab显示的是Mail视图，你可以用Badge显示有多少封未读邮件,效果就是图片中那个“李”字的小红圈。

Identifier属性：这个属性对应的下拉菜单中，如果你选择的是不是Custom，比如是Favorite，那么这个TabBar的名称和图标就都设置好了。我们这里选择Custom。

在Title输入Blue，在Image选择Blue.png。

对其他TabBar Item进行类似操作，这样之后，整个Tab Bar如下图所示：

11、现在单击每一个你创建的ViewController对应的.xib，选中View，打开AttributeInspector，将其背景颜色改成蓝色。然后，在Simulated Metrics中设置Bottom Bar为TabBar：

对GreenViewController、RedViewController和YellowViewController进行同样设置，不过背景颜色要设成与其名称相对应的。

12、大功告成了，运行一下，看看效果吧：

    


以上就是豹子我自己的经验总结，一句话，具体情况具体分析！祝各位工作顺利，事事顺心！呵呵！