storyboard 构建多tab页应用程序

本人ios开发小白一枚，因为公司产品要求多少学习下ios开发，故这篇博文算是小白我写给自己的一篇ios入门文章吧。

项目总体结构

1、创建ios single view application项目

创建项目比较简单，跟着流程走就行了，这里创建一个MutiTabProject的项目，然后如下图目录结构创建对应storyboard和其他类。对于其中具体联系和作用之后会一一介绍。

Xcode IDE管理文本比较灵活，其中文件夹和文件在磁盘中的位置不需要对应IDE中的位置，但是一般而言在磁盘中的文件目录位置最好还是和IDE中的位置一一对应吧，不然之后拷贝项目到其它地方的时候直接傻掉。

2、项目文件介绍

Resources->InterfaceBuilder下是storyboard文件，它决定了项目的界面显示。而ViewConroller->Controllers下是controller文件，它负责与storyborad文件中的界面映射并进行操作。ViewController->UIManage下是初始加载界面辅助类。AppDelegate是程序启动初始化类，而main.m是程序入口

#import <UIKit/UIKit.h>#import "AppDelegate.h"int main(int argc, char * argv[]) {    @autoreleasepool {        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));    }}

由main.m的代码可以看到，在main.m中将AppDelegate为程序启动初始化类，在AppDelegate中可设置可进行一系列的初始化设置，本项目在其中进行初始化界面设置。

界面设计介绍

1、修改launch.stroyboard和main.storyborad路径

storyboard文件是用来设计多页面界面的工具。lauchscreen.storyboard即app启动时候的界面，我们这里采用默认启动界面所以不改变这个storyboard。main.storyboard即启动后的主页面，这是一个十分重要的storyboard，它决定了app启动后会是什么样子。lauchscreen.stroyboard和main.storyboard在创建好single view application时IDE会默认给创建好，这里修改了地址那么需要到项目文件中去设置成对应的地址

2、main.storyboard的设计

还是先放张main.storyboard的整体设计图吧

首先，创建一个tab bar controller并将其在IDE右侧面板show the attributes inspector中is initial view controller设置为选中，并在show the identity inspector中为storyboard id 赋值MainTab，UIManager辅助类会通过storyboard id对进行加载界面操作。创建一个navigation controller，添加UITabBarItem 并在右侧面板show the attributes inspector中设置tab bar item的图片和标题

在show the identity respector中设置stroyboard id为HomeNav，这个HomeNav和HomeNav.storyboard中的navigation controller的storyboard id 设置一致，从而产生关联。按照同样的方法创建我和菜单两个tab 页面。最后选中tab bar controller通过按住control + 鼠标左键拖动到navigation contrller创建tab bar controller和navigation controller的关联，这里选择view controllers

这样main.storyboard设计就完成了。

3、tab页面设计

三个tab页面分别对应3个navigation controller，这里还是以home tab为例来进行说明。
HomeNav.storyboard总体设计图如下

创建navigation controller界面，添加UITabBarItem 并进行图片和标题设置，并将navigation controller的storyboard id设置为HomeNav。创建另一个table view controller（也可以是其它类型的view controller），添加navigation item设置标题为主页界面。同样用control+左键拖动方式添加navigation controller和table view controller之间的关系，将其关系设置为root view controller

同理其余两个tab界面也就出来了。

4、在AppDelegate.m中对界面进行初始化

比较简单，直接贴代码不解释了

#import "AppDelegate.h"#import "UIManager.h"@interface AppDelegate (){    UITabBarController *_tab;    UINavigationController *_nav3;}@end@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    // Override point for customization after application laun{ch.    [self initUI];    return YES;}-(void)initUI{    _window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    _tab = (UITabBarController *)[UIManager instanceViewControllerInStoryBoard:STORYBOARD_MAIN withViewIdentifier:@"MainTab"];    UINavigationController *nav1 = (UINavigationController *)[UIManager instanceViewControllerInStoryBoard:STORYBOARD_HOME_NAV withViewIdentifier:@"HomeNav"];    UINavigationController *nav2 = (UINavigationController *)[UIManager instanceViewControllerInStoryBoard:STORYBOARD_Menu_NAV withViewIdentifier:@"MenuNav"];        _nav3 = (UINavigationController *)[UIManager instanceViewControllerInStoryBoard:STORYBOARD_ME_NAV withViewIdentifier:@"MeNav"];    [_tab setViewControllers:@[nav1,nav2,_nav3] animated:YES];    _window.rootViewController = _tab;    [self.window makeKeyAndVisible];}@end

把UIManager.m的代码也直接贴出来吧

#import "UIManager.h"@implementation UIManager+ (NSObject *)instanceViewControllerInStoryBoard:(NSString *)name                              withViewIdentifier:(NSString *)identifier{    NSBundle *bundlePath = [NSBundle bundleWithPath:[[NSBundle mainBundle] pathForResource:STORYBOARD_PATH ofType:@"bundle"]];    UIStoryboard *account = [UIStoryboard storyboardWithName:name bundle:bundlePath];    return [account instantiateViewControllerWithIdentifier:identifier];}+ (NSArray *)loadNibViews:(NSString *)name{    return [[NSBundle mainBundle] loadNibNamed:name owner:self options:nil];}+ (NSObject *)loadNibFirstView:(NSString *)name{    return [self loadNibViews:name].firstObject;}+ (void)setBadge:(NSString*)badge atIndex:(NSInteger)index{    UIViewController *vc = [UIApplication sharedApplication].keyWindow.rootViewController;    if ([vc isKindOfClass:[UITabBarController class]]) {        UITabBarController *tbc = (UITabBarController*)vc;        vc = [tbc.viewControllers objectAtIndex:index];        vc.tabBarItem.badgeValue = badge;    }}@end

到这里程序已经可以运行起来，并且显示了三个tab 页面了

但是如果要对界面进行操作怎么办么，这就是下面的内容了。

界面操作

界面操作时通过和controller类关联来实现的，这里以Menu.stroyboard关联MenuViewController类来说明。
menu.storyboard界面如下

选中菜单编辑界面，在show the identity respector中将其class设置为M enuViewController，并且创建一个UITextField 和UIButton控件。
按住option + 左键点击打开MenuViewController.h文件。选中UITextField，control+左键拖动MenuViewController.h文件@interface @end之间，会弹出创建关联的窗口，根据提示创建IBOutlet实例关联或IBAction事件关联。这里UITextField创建了实例关联而UIButton创建了事件关联。

#import <UIKit/UIKit.h>@interface MenuViewController : UIViewController@property (weak, nonatomic) IBOutlet UITextField *tfContent;- (IBAction)btnClick:(UIButton *)sender;@end

在MenuController.m中可编写UIButton对应事件的代码

#import "MenuViewController.h"@interface MenuViewController ()@end@implementation MenuViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view.}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}/*#pragma mark - Navigation// In a storyboard-based application, you will often want to do a little preparation before navigation- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {    // Get the new view controller using [segue destinationViewController].    // Pass the selected object to the new view controller.}*/- (IBAction)btnClick:(UIButton *)sender {    NSLog(@"%@",[_tfContent text]);}@end

到这里就基本介绍完成如何使用storyboard创建多标签页程序，由于本人小白一个，写的啰嗦了，就当是自己备注下吧。各位看官，如有高见请指正。

补充

1、项目下载地址
补充一个项目下载地址吧：http://download.csdn.net/download/yoryky/9952550