StoryBoard中创建TabBar

0.效果图

1.新建一个项目

这一个步就不多说了。

2.创建TabBar

2.1创建Navigation Controller

选中开始的视图，再到顶部的Editor-Embed in-Navigation Controller，就会把开始的视图就变成Navigation Controller了。

2.2创建第一个Tab与视图

2.2.1创建Tab Bar Controller

我们选中刚才的Navigation Controller，按照2.1的路径(Editor-Embed in-Tar Bar Controller)找到Tar Bar Controller后发现第一个Tab就这样出现了。

(步骤到此的截图)

2.2.2Tab视图添加内容

然后我们选择第一个tab所对应的窗口，在对象库(Object Library)中拖拉一个标签(Label)到视图，并将Label内容重命名为Tab1

2.3更改第一个Tab部分属性

不难看到tab底下的图标暂时是没有的，是空的。可以先试试用xcode自动的一些样式

2.3.1更改Tab图标

选择中刚才新建的item(Tab的图标)，再到属性检测器(Attributes Inspector)更把System Item的Custom改为Favorites，会发现Tab的图标发生变化了。

2.4运行应用

如无意外你看到应该跟我一样的。

2.5添加多个Tab

备注:这个步骤只是添加了一个Tab而已，想添加更多的可以按照以下步骤重复操作就好了。

2.5.1添加一个Navigation Controller

在对象库(Object Library)中找到Navigation Controller，并拖到场景里。我稍微把刚才的storyboard重新排一下版。

2.5.2创建第二个Tab与视图

在2.5.1中拖出来的Navigation Controller当中会发现多出了一个Root View Controller，并且里面有一个Table View，我们要做的是：把整个Root View Controller删掉，并在对象库(Object Library)中找到View Controller并拖到2.5.1的Navigation Controller下面，用作替换被删除的Root View Controller，并作为第二Tab的视图。

2.5.3把新添加的两个Controller连接起来

不难发现2.5.2中的两个视图并没有与原来的Tab Bar Controller连接起来，就算把程序跑起来也是只有一个Tab。

先把Tab Bar Controller与第二个Navigation Controller连接起来：选中Tab Bar Controller，按住鼠标右键，拖动鼠标到第二个Navigation，会发现一个小黑框，我们选择Relationship Segue下的view controllers，第一个箭头就出来了。第二个箭头类似。同样的，我们重复一下2.2.2与2.3的步骤(System Item改为History)，最后你运行一下，你会发现真正的TabBar已经出来了。

3.调整TabBar样式

3.1每个Tab的默认图片与选择图片

补充说明:在走这一步之前，需要把2.3.1中System Item从Favorites改回Custom，第二个Tab同样的道理。不然怎么设置还是不会变化的。

UIImage * image;image = [[UIImage imageNamed:@"TabOneNomal.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];[tabBarItem1 setImage:image];image = [[UIImage imageNamed:@"TabOneSelect.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];[tabBarItem1 setSelectedImage:image];

3.2每个Tab的标题与颜色

//Tab内容tabBarItem1.title = @"人人";tabBarItem2.title = @"人人";//默认字体颜色[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],NSForegroundColorAttributeName,nil] forState:UIControlStateNormal];//选择字体颜色                                                       UIColor *selectedColor = [UIColor colorWithRed:12/255.0 green:103/255.0 blue:201/255.0 alpha:1.0];[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:selectedColor, NSForegroundColorAttributeName,nil] forState:UIControlStateSelected];

3.3整个TabBar样式

[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"TabBar.png"]];[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"TabBarSelected.png"]];

3.4完整代码

UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;UITabBar *tabBar = tabBarController.tabBar;//提取TabUITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];//设置选择图片UIImage * image;image = [[UIImage imageNamed:@"TabOneNomal.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];[tabBarItem1 setImage:image];image = [[UIImage imageNamed:@"TabOneSelect.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];[tabBarItem1 setSelectedImage:image];image = [[UIImage imageNamed:@"TabOneNomal.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];[tabBarItem2 setImage:image];image = [[UIImage imageNamed:@"TabOneSelect.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];[tabBarItem2 setSelectedImage:image];//Tab内容tabBarItem1.title = @"人人";tabBarItem2.title = @"人人";//默认字体颜色[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],NSForegroundColorAttributeName,nil] forState:UIControlStateNormal];//选择字体颜色                                                       UIColor *selectedColor = [UIColor colorWithRed:12/255.0 green:103/255.0 blue:201/255.0 alpha:1.0];[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:selectedColor, NSForegroundColorAttributeName,nil] forState:UIControlStateSelected];//设置导航栏背景样式[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"TabBar.png"]];[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"TabBarSelected.png"]];

4.补充说明

(1)细心的同学会发现效果图跟文章步骤最后的文字上有所不同，其实我只是把Tab1与Tab2改成第一个Tab与第二个Tab。
(2)TabBar.png与TabBarSelected.png的图片问题，其实就是蓝色长方形与蓝色正方形的两张图片。