[[147883]]

搭建主流框架界面

達(dá)成效果

• 我們玩iPhone應(yīng)用的時(shí)候，有沒發(fā)現(xiàn)大部分的應(yīng)用都是上圖差不多的結(jié)構(gòu)，下面的TabBar控制器可以切換子控制器，上面又有Navigation導(dǎo)航條
• 我們本文主要是搭建主體的框架，數(shù)據(jù)暫時(shí)沒有添加

分析做項(xiàng)目的基本流程

1.搭建項(xiàng)目主框架

• 先搭建tabBarController（下面有一條）
• 再搭建NavigationController（上面有一條，并且每個(gè)子控制器的不一樣）

2.思考開發(fā)方式

• storyboard搭建（界面很少的時(shí)候使用）
• 純代碼搭建（界面超過5個(gè)的時(shí)候使用，易于管理，商業(yè)項(xiàng)目中，一般都使用這種方式）

從0開始搭建主流框架（純代碼）

1.準(zhǔn)備工作

• 環(huán)境部署

2.初步搭建基本界面

***步 設(shè)計(jì)目錄（根據(jù)模塊化+MVC思想，創(chuàng)建基本文件目錄與文件）

• 模塊化思想創(chuàng)建目錄路徑（一般先在真實(shí)路徑下創(chuàng)建，再拖到項(xiàng)目中）
• 自定義TabBarController

第二步 上代碼（在AppDelegate.m內(nèi)設(shè)置窗口啟動根控制器）

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 
    // 1.創(chuàng)建窗口 
    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]; 
 
    // 2.設(shè)置窗口的根控制器 
    CYXTabBarController *tabBarVC = [[CYXTabBarController alloc]init]; 
    self.window.rootViewController = tabBarVC; 
 
    // 3.顯示窗口 
    [self.window makeKeyAndVisible]; 
 
    return YES; 
} 

第三步，在CYXTabBarController.m內(nèi)創(chuàng)建并添加子控制器

- (void)viewDidLoad { 
    [super viewDidLoad]; 
 
    // 1.添加***個(gè)控制器 
    // 1.1 初始化 
    CYXOneViewController *oneVC = [[CYXOneViewController alloc]init]; 
 
    // 1.2 把oneVC添加為UINavigationController的根控制器 
    UINavigationController *nav1 = [[UINavigationController alloc]initWithRootViewController:oneVC]; 
 
    // 設(shè)置tabBar的標(biāo)題 
    nav1.title = @"首頁"; 
    [nav1.navigationBar setBackgroundImage:[UIImage imageNamed:@"commentary_num_bg"] forBarMetrics:UIBarMetricsDefault]; 
 
    // 設(shè)置tabBar的圖標(biāo) 
    nav1.tabBarItem.image = [UIImage imageNamed:@"tab_home_icon"]; 
 
    // 設(shè)置navigationBar的標(biāo)題 
    oneVC.navigationItem.title = @"首頁"; 
 
    // 設(shè)置背景色（這些操作可以交給每個(gè)單獨(dú)子控制器去做） 
    oneVC.view.backgroundColor = [UIColor whiteColor]; 
 
    // 1.3 把UINavigationController交給UITabBarController管理 
    [self addChildViewController:nav1]; 
 
    // 2.添加第2個(gè)控制器 
    CYXTwoViewController *twoVC = [[CYXTwoViewController alloc]init]; 
    UINavigationController *nav2 = [[UINavigationController alloc]initWithRootViewController:twoVC]; 
    nav2.title = @"技術(shù)"; 
    nav2.tabBarItem.image = [UIImage imageNamed:@"js"]; 
    twoVC.navigationItem.title = @"技術(shù)"; 
    twoVC.view.backgroundColor = [UIColor blueColor]; 
    [self addChildViewController:nav2]; 
 
    // 3.添加第3個(gè)控制器 
    CYXThreeViewController *threeVC = [[CYXThreeViewController alloc]init]; 
    UINavigationController *nav3 = [[UINavigationController alloc]initWithRootViewController:threeVC]; 
    nav3.title = @"博文"; 
    nav3.tabBarItem.image = [UIImage imageNamed:@"qw"]; 
    threeVC.navigationItem.title = @"博文"; 
    threeVC.view.backgroundColor = [UIColor yellowColor]; 
    [self addChildViewController:nav3]; 
 
    // 4.添加第4個(gè)控制器 
    CYXFourViewController *fourVC = [[CYXFourViewController alloc]init]; 
    UINavigationController *nav4 = [[UINavigationController alloc]initWithRootViewController:fourVC]; 
    nav4.title = @"我的江湖"; 
    nav4.tabBarItem.image = [UIImage imageNamed:@"user"]; 
    fourVC.navigationItem.title = @"我的江湖"; 
    fourVC.view.backgroundColor = [UIColor grayColor]; 
    [self addChildViewController:nav4]; 
 
} 

進(jìn)行到這里，我們已經(jīng)把框架搭起來了，是不是很簡單？效果如圖：

但你可能會忍不住吐槽了，這些全是冗余的垃圾代碼，沒有可讀性，下面就來抽取一下代碼吧

第四步，抽取重復(fù)代碼

• 由于上文的所有代碼都寫在viewDidLoad里面且重復(fù)代碼過多，造成代碼冗余，可擴(kuò)展性不高的問題，下面讓我們來對代碼進(jìn)行初步優(yōu)化。
• 這里提取兩個(gè)方法，一個(gè)是添加所有子控制器的方法，另一個(gè)是添加每一個(gè)子控制器的方法

- (void)viewDidLoad { 
    [super viewDidLoad]; 
 
    [self setUpAllChildViewController]; 
} 
 
/** 
 *  添加所有子控制器方法 
 */ 
- (void)setUpAllChildViewController{ 
    // 1.添加***個(gè)控制器 
    CYXOneViewController *oneVC = [[CYXOneViewController alloc]init]; 
    [self setUpOneChildViewController:oneVC image:[UIImage imageNamed:@"tab_home_icon"] title:@"首頁"]; 
 
    // 2.添加第2個(gè)控制器 
    CYXTwoViewController *twoVC = [[CYXTwoViewController alloc]init]; 
    [self setUpOneChildViewController:twoVC image:[UIImage imageNamed:@"js"] title:@"技術(shù)"]; 
 
    // 3.添加第3個(gè)控制器 
    CYXThreeViewController *threeVC = [[CYXThreeViewController alloc]init]; 
    [self setUpOneChildViewController:threeVC image:[UIImage imageNamed:@"qw"] title:@"博文"]; 
 
    // 4.添加第4個(gè)控制器 
    CYXFourViewController *fourVC = [[CYXFourViewController alloc]init]; 
    [self setUpOneChildViewController:fourVC image:[UIImage imageNamed:@"user"] title:@"我的江湖"]; 
} 
 
 
/** 
 *  添加一個(gè)子控制器的方法 
 */ 
- (void)setUpOneChildViewController:(UIViewController *)viewController image:(UIImage *)image title:(NSString *)title{ 
 
    UINavigationController *navC = [[UINavigationController alloc]initWithRootViewController:viewController]; 
    navC.title = title; 
    navC.tabBarItem.image = image; 
    [navC.navigationBar setBackgroundImage:[UIImage imageNamed:@"commentary_num_bg"] forBarMetrics:UIBarMetricsDefault]; 
 
    viewController.navigationItem.title = title; 
 
    [self addChildViewController:navC]; 
}