[純代碼]搭建UINavigationController與UITabBarController主流App框架整合

UINavigationController與UITabBarController整合Demo(純代碼模式)

代碼已經(jīng)放置Github

效果預覽GIF

效果預覽

基本介紹

UINavigationController:同級頁面之間的跳轉,界面典型的特點就是頁面上部有一UINavigationBar導航條,導航條可以設置標題、左上角的按鈕(一般用于返回),右上角的按鈕,也可以自定義這些元素。
UITabBarController:父子頁面之間的嵌套關系,界面典型的特點是耍耍下部有一UITabBar選項組,通過點擊Tab,可切換上面的視圖的變換。
UIViewController、UINavigationController、UITabBarController三者的整合使用,可以開發(fā)出大部分的App應用頁面框架。
本文就來介紹一下基本的搭建思路及步驟

思路

我們需要把 Navigation View 加到 Tab Bar View 的內容上去,Tab Bar View再加到 Window 上去。就是 Window 套 UITabBarController,UITabBarController 套 UINavigationController, UINavigationController 套 UIViewController。
但當頁面使用 UITabBarController + UINavigationController 的時候,當跳轉到詳情頁面的時候,如果 UITabBar 仍然存在的話就會造成邏輯混亂,用戶體驗也會下降,因此我們就有一個在詳情頁將 UITabBar 隱藏的需求,接下來就來介紹這個框架完美的搭建方式

步驟

1.打開Xcode創(chuàng)建一個 Single View App 工程,由于我們這里使用純代碼模式,固工程創(chuàng)建好后刪除項目中生成的 ViewController.h、ViewController.m、Main.storyboard 這三個文件,并在 info.plist 文件中,將 Main storyboard file base name 對應的值 Main 刪掉。

2.創(chuàng)建繼承 UINavigationController 的類 MainNavigationController,在其對應的.m文件中

重寫 pushViewController 方法,為了控制導航欄 push 頁面隱藏底部 tabBar

#pragma mark - 重寫pushViewController:方法
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{
    if(self.viewControllers.count > 0){
        [viewController setHidesBottomBarWhenPushed:YES];// 隱藏底部tabBar
    }
    [super pushViewController:viewController animated:animated];
}

3.創(chuàng)建繼承 UITabBarController 的類 MainTabBarController,在其對應的.m文件中

在 viewDidLoad 方法中代碼如下:

NSArray *items = @[
                   @{
                       CLASS_NAME       :   @"FirstViewController",
                       TITLE            :   @"第一個",
                       IMAGE            :   @"tabbar_news",
                       SELECTED_IMAGE   :   @"tabbar_newsHL"
                       },
                   @{
                       CLASS_NAME       :   @"SecondViewController",
                       TITLE            :   @"第二個",
                       IMAGE            :   @"tabbar_app",
                       SELECTED_IMAGE   :   @"tabbar_appHL"
                       },
                   @{
                       CLASS_NAME       :   @"ThirdViewController",
                       TITLE            :   @"第三個",
                       IMAGE            :   @"tabbar_msg",
                       SELECTED_IMAGE   :   @"tabbar_msgHL"
                       },
                   @{
                       CLASS_NAME       :   @"FourthViewController",
                       TITLE            :   @"第四個",
                       IMAGE            :   @"tabbar_mine",
                       SELECTED_IMAGE   :   @"tabbar_mineHL"
                       }
                   ];
    
NSMutableArray  *viewControllers = [[NSMutableArray alloc] init];
// 使用block方法遍歷集合
[items enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
    
    UIViewController *viewController = [[NSClassFromString(obj[CLASS_NAME]) alloc] init];// 根據(jù)類名稱動態(tài)創(chuàng)建類
    viewController.title = obj[TITLE];
    viewController.tabBarItem.image = [UIImage imageNamed:obj[IMAGE]];
    viewController.tabBarItem.selectedImage = [[UIImage imageNamed:obj[SELECTED_IMAGE]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
    MainNavigationController *mainNav = [[MainNavigationController alloc] initWithRootViewController:viewController];
    [viewControllers addObject:mainNav];
    
}];
    
self.viewControllers = viewControllers;// 設置tabBar視圖集合

4.創(chuàng)建顯示的子視圖:FirstViewContoller、SecondViewController、ThirdViewController、FourthViewController

5.在 AppDelegate.m 文件中的 didFinishLaunchingWithOptions 方法中添加如下代碼:

// 隱藏頂部狀態(tài)欄設為NO
[UIApplication sharedApplication].statusBarHidden = NO;
// 設置頂部狀態(tài)欄字體為白色
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;

// 設置主window視圖
_window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
_window.backgroundColor = [UIColor clearColor];

_mainTabBarController = [[MainTabBarController alloc] init];
//_mainTabBarController.view.userInteractionEnabled = NO;// 歡迎動畫加載期間不允許永不與視圖交互,加載完畢后設置為YES即可

// 設置root視圖控制器
_window.rootViewController = _mainTabBarController;
[_window makeKeyAndVisible];

到這里就已經(jīng)完成了最基本的 UINavigationController與UITabBarController整合過程,如有不恰當?shù)牡胤竭€望各位指正,本試例代碼已經(jīng)放置Github

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,361評論 4 61
  • 搭建主流框架界面 導讀 我們玩iPhone應用的時候,有沒發(fā)現(xiàn)大部分的應用都是上圖差不多的結構,下面的TabBar...
    Coder_Long閱讀 802評論 0 1
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,058評論 25 709
  • 安安剛出生時,爺爺就撒手人寰了,所以對爺爺沒有什么印象。唯一留下爺爺痕跡的就是安安這個名字。安安是爺爺取的,爺爺希...
    晨一文閱讀 427評論 4 3
  • 無論是精釀酒吧還是其他餐館、實體店、甚至網(wǎng)店都遵從基本的商業(yè)規(guī)律,這就是:營業(yè)利潤=營業(yè)收入-營業(yè)成本;營業(yè)額...
    羅福釀酒閱讀 1,835評論 0 1

友情鏈接更多精彩內容