IOS開發之TabBarItem&NavigationBarItem

　　想必你們都用過微信，微信間的頁面切換是如何作成的呢？接下來咱們用storyboard結合着代碼來模擬一下微信的視圖控制模式。

　　"工欲善其事，必先利其器"，下面主要是對storyboard來進行咱們項目框架的搭建的，必要時，用代碼實現咱們的頁面效果。在IOS開發中經常使用的多視圖間的切換大體有TabBarController, NavigationBarController, 和模態窗口。第一次接觸模態的概念是在Web前端的內容中接觸的。下面將會結合一個實際的效果來簡單的介紹一下TabBar和NavigationBar, 而後說一下用咱們的storyboard和純代碼如何配置咱們的NavigationBar, 上一篇博客中提到了如何用Navigation來實現頁面間的切換，接下來咱們要和TabBarController結合起來，來作一個防微信的視圖控制 。下面的視圖控制器之間的關係是如何用storyboard拖出來的，在以前的博客中有所說起，在這小編就不贅述了。

　　ViewController之間的關係大體入下圖：

　　視圖關係說明：

　　　　1.當打開時首先會出現一個登錄頁面，當登錄成功後會跳轉到Tab Bar Controller中。

　　　　2.在Tab Bar Controller中又對應着三個Navigation Controller，點擊不一樣的item會跳轉到不一樣的NavigationController。

　　　　3.每一個Navigation Controller中又對應着一些ViewController, 這些ViewController之間咱們能夠經過按鈕控制NavigationController來進行切換。

　　

　　1.登錄頁面的的跳轉實現

　　　　在登錄ViewController中要跳轉到TabBarController中須要根據用戶輸入的信息來實現跳轉。換個說法，就是登錄頁面在storyboard中和其餘頁面是沒有關係的，須要咱們用業務邏輯來實現，下面是用模態的形式來進行視圖切換的。登錄界面中所用的控件和鍵盤如何收回的，在前面的博客中都有所說起在這就不作贅述。根據用戶輸入跳轉到TabBarController的核心代碼以下：

·1 - (IBAction)tapButton:(id)sender {     
 2
 3     NSString * userName = [self.userName text];
 4     NSString * password = self.password.text;
 5     //模擬登錄
 6     if ([userName isEqual:password] == YES && ![userName isEqual:@""] && ![password isEqual:@""]) {
 7         //獲取storyboard
 8         UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]];
 9         
10         //由storyboardID獲取TabBarViewController
11         UIViewController * myTabBarController = [storyboard instantiateViewControllerWithIdentifier:@"myTabBarController"];
12         
13         //將界面跳轉到咱們的TabBarViewController
14         [self presentViewController:myTabBarController animated:YES completion:^{
15         }];
16     }
17 }

 

　　　　2.如何給咱們新建的視圖控制器關聯咱們新建的視圖控制器類呢？其實在咱們storyboard中仍是蠻簡單的，在storyboard選擇咱們要關聯的視圖控制器,在 Class中選中咱們新建的視圖控制器類便可。關聯完之後咱們就能夠在相應的試圖控制器類中實現咱們的業務邏輯啦，操做以下:

 

　　　　3. 用Navigation控制的ViewController之間的切換是由棧來配合着完成的，頁面之間的切換也都伴隨着出棧或者入棧的過程。接下來會爲每一個導航控制器配置NavigateBar, 在一個NavigationController中只有一個NavigationBar, 而在一個NavigationController下的各個ViewController都有屬於本身的NavigationBarItem. 咱們能夠經過storyboard經過拖拽的方式來配置咱們的NavigationBar 也能夠經過手寫代碼的方式進行配置：

　　　　（1）用storyboard來爲咱們的Navigation Bar添加按鈕，拖拽完按鈕再進行相關屬性配置便可

　　　　（2）咱們手寫代碼應如何添加Bar Button Item呢？下面給出的代碼是用純代碼來實現添加的。

 1     //手動添加NavigationBar上得右側按鈕
 2     //新建BarButtonItem1, 同時指定樣式，和註冊回調
 3     UIBarButtonItem *item1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd
 4                                                                            target:self
 5                                                                            action:@selector(tapBarButton)];
 6     //新建BarButtonItem2, 同時指定樣式，和註冊回調
 7     UIBarButtonItem *item2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera
 8                                                                            target:self
 9                                                                            action:@selector(tapBarButton)];
10     //往右側添加一個按鈕
11     self.navigationItem.rightBarButtonItem = item1;
12     
13     //往右側添加兩個按鈕
14     self.navigationItem.rightBarButtonItems = @[item1, item2];
15     
16     //往左側添加一個BarButton
17     self.navigationItem.leftBarButtonItem = item1;
18 
19     //往左側添加兩個BarButton
20     self.navigationItem.leftBarButtonItems = @[item1, item2];

 

　　　　(3)在storyboard給咱們的NavigationBar設置title,或者titleView, 也是用拖拽的方式加配置相應的屬性完成的，在這就不在贅述，下面給入用手動添加的方法，下面的代碼是給咱們的titleView賦值ImageView,咱們還能夠給他賦值別的控件，如UIButton等，代碼以下：

    //設置title的值
    self.navigationItem.title = @"END";
    
    //用給titleView設置圖片
    //新建imageView
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    
    //設置圖片
    UIImage * image = [UIImage imageNamed:@"topView.png"];
    
    //圖片加入ImageView
    imageView.image = image;
    
    //ImageView加入到navigationItem
    self.navigationItem.titleView = imageView;

 

　　4.在各個視圖間切換的時候下面的Tab Bar是存在的，或減小咱們的可視空間，那麼咱們應如何隱藏掉呢？在咱們的storyboard中只須要把Hide Bottom Bar on push選中便可，選中以後咱們切換到該頁面時，就不會顯示Tab Bar了，以下圖所示。

 

　　5.系統的退出功能：即退出到咱們的登錄界面，下面的代碼能夠添加在TabView下面的任何ViewController中，代碼以下：

1 //點擊退出按鈕
2 - (IBAction)tapExit:(id)sender {
3      [self dismissViewControllerAnimated:YES completion:^{}];
4 }

　　總結： 上面的東西沒有多高深的技術，用storyboard拖來拖去的（同時給出了純代碼的解決方案）， 須要咱們手寫代碼進行頁面間跳轉的地方咱們再手寫跳轉。上面的各類ViewController關聯之後，咱們在給各個ViewController綁定實體的類後，就能夠專心的實現咱們每一個View的業務邏輯的。在View中展現數據的時候，TableView用的也是蠻多的。 對於TableView如何使用，在後面的博客會進行詳細的介紹。上面的Project用storyboard配置好以及實現相應的代碼，運行效果以下：