搭建主流框架介面
- 0.達成效果
- 我們玩iPhone應用的時候，有沒發現大部分的應用都是上圖差不多的結構，下面的TabBar控制器可以切換子控制器，上面又有Navigation導航條
- 我們本文主要是搭建主體的框架，資料暫時沒有新增
分析做專案的基本流程
- 1.搭建專案主框架
- （1）先搭建tabBarController（下面有一條）
- （2）再搭建NavigationController（上面有一條，並且每個子控制器的不一樣）
- 2.思考開發方式
- （1）storyboard搭建（介面很少的時候使用）
- （2）純程式碼搭建（介面超過5個的時候使用，易於管理，商業專案中，一般都使用這種方式）
從0開始搭建主流框架（純程式碼）
1.準備工作
- 環境部署
2.初步搭建基本介面
- 第一步 設計目錄（根據模組化+MVC思想，建立基本檔案目錄與檔案）
- 模組化思想建立目錄路徑（一般先在真實路徑下建立，再拖到專案中）
- 自定義TabBarController
- 第二步 上程式碼（在AppDelegate.m內設定視窗啟動根控制器）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // 1.建立視窗 self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]; // 2.設定視窗的根控制器 CYXTabBarController *tabBarVC = [[CYXTabBarController alloc]init]; self.window.rootViewController = tabBarVC; // 3.顯示視窗 [self.window makeKeyAndVisible]; return YES; } |
- 第三步，在CYXTabBarController.m內建立並新增子控制器
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
- (void)viewDidLoad { [super viewDidLoad]; // 1.新增第一個控制器 // 1.1 初始化 CYXOneViewController *oneVC = [[CYXOneViewController alloc]init]; // 1.2 把oneVC新增為UINavigationController的根控制器 UINavigationController *nav1 = [[UINavigationController alloc]initWithRootViewController:oneVC]; // 設定tabBar的標題 nav1.title = @"首頁"; [nav1.navigationBar setBackgroundImage:[UIImage imageNamed:@"commentary_num_bg"] forBarMetrics:UIBarMetricsDefault]; // 設定tabBar的圖示 nav1.tabBarItem.image = [UIImage imageNamed:@"tab_home_icon"]; // 設定navigationBar的標題 oneVC.navigationItem.title = @"首頁"; // 設定背景色（這些操作可以交給每個單獨子控制器去做） oneVC.view.backgroundColor = [UIColor whiteColor]; // 1.3 把UINavigationController交給UITabBarController管理 [self addChildViewController:nav1]; // 2.新增第2個控制器 CYXTwoViewController *twoVC = [[CYXTwoViewController alloc]init]; UINavigationController *nav2 = [[UINavigationController alloc]initWithRootViewController:twoVC]; nav2.title = @"技術"; nav2.tabBarItem.image = [UIImage imageNamed:@"js"]; twoVC.navigationItem.title = @"技術"; twoVC.view.backgroundColor = [UIColor blueColor]; [self addChildViewController:nav2]; // 3.新增第3個控制器 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個控制器 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]; } |
進行到這裡，我們已經把框架搭起來了，是不是很簡單？效果如圖：
- 但你可能會忍不住吐槽了，這些全是冗餘的垃圾程式碼，沒有可讀性，下面就來抽取一下程式碼吧
- 第四步，抽取重複程式碼
- 由於上文的所有程式碼都寫在viewDidLoad裡面且重複程式碼過多，造成程式碼冗餘，可擴充套件性不高的問題，下面讓我們來對程式碼進行初步優化。
- 這裡提取兩個方法，一個是新增所有子控制器的方法，另一個是新增每一個子控制器的方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
- (void)viewDidLoad { [super viewDidLoad]; [self setUpAllChildViewController]; } /** * 新增所有子控制器方法 */ - (void)setUpAllChildViewController{ // 1.新增第一個控制器 CYXOneViewController *oneVC = [[CYXOneViewController alloc]init]; [self setUpOneChildViewController:oneVC image:[UIImage imageNamed:@"tab_home_icon"] title:@"首頁"]; // 2.新增第2個控制器 CYXTwoViewController *twoVC = [[CYXTwoViewController alloc]init]; [self setUpOneChildViewController:twoVC image:[UIImage imageNamed:@"js"] title:@"技術"]; // 3.新增第3個控制器 CYXThreeViewController *threeVC = [[CYXThreeViewController alloc]init]; [self setUpOneChildViewController:threeVC image:[UIImage imageNamed:@"qw"] title:@"博文"]; // 4.新增第4個控制器 CYXFourViewController *fourVC = [[CYXFourViewController alloc]init]; [self setUpOneChildViewController:fourVC image:[UIImage imageNamed:@"user"] title:@"我的江湖"]; } /** * 新增一個子控制器的方法 */ - (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]; } |