美文网首页程序员
[纯代码]搭建UINavigationController与UI

[纯代码]搭建UINavigationController与UI

作者: 槿灬 | 来源:发表于2017-10-20 11:14 被阅读0次

UINavigationController与UITabBarController整合Demo(纯代码模式)

代码已经放置Github

效果预览GIF

效果预览

基本介绍

UINavigationController:同级页面之间的跳转,界面典型的特点就是页面上部有一UINavigationBar导航条,导航条可以设置标题、左上角的按钮(一般用于返回),右上角的按钮,也可以自定义这些元素。
UITabBarController:父子页面之间的嵌套关系,界面典型的特点是耍耍下部有一UITabBar选项组,通过点击Tab,可切换上面的视图的变换。
UIViewController、UINavigationController、UITabBarController三者的整合使用,可以开发出大部分的App应用页面框架。
本文就来介绍一下基本的搭建思路及步骤

思路

我们需要把 Navigation View 加到 Tab Bar View 的内容上去,Tab Bar View再加到 Window 上去。就是 Window 套 UITabBarController,UITabBarController 套 UINavigationController, UINavigationController 套 UIViewController。
但当页面使用 UITabBarController + UINavigationController 的时候,当跳转到详情页面的时候,如果 UITabBar 仍然存在的话就会造成逻辑混乱,用户体验也会下降,因此我们就有一个在详情页将 UITabBar 隐藏的需求,接下来就来介绍这个框架完美的搭建方式

步骤

1.打开Xcode创建一个 Single View App 工程,由于我们这里使用纯代码模式,固工程创建好后删除项目中生成的 ViewController.h、ViewController.m、Main.storyboard 这三个文件,并在 info.plist 文件中,将 Main storyboard file base name 对应的值 Main 删掉。

2.创建继承 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.创建继承 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];// 根据类名称动态创建类
    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.创建显示的子视图:FirstViewContoller、SecondViewController、ThirdViewController、FourthViewController

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

// 隐藏顶部状态栏设为NO
[UIApplication sharedApplication].statusBarHidden = NO;
// 设置顶部状态栏字体为白色
[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];

到这里就已经完成了最基本的 UINavigationController与UITabBarController整合过程,如有不恰当的地方还望各位指正,本试例代码已经放置Github

相关文章

  • [纯代码]搭建UINavigationController与UI

    UINavigationController与UITabBarController整合Demo(纯代码模式) 代码...

  • Day 3 - 播放本地视频,闭包,代理

    先看效果图 Day 2用的是拖线,这里使用纯代码完成 1、创建工程、搭建UI 创建工程不说了!直接搭建UI分析UI...

  • UITabBarController

    纯代码创建 UITabBarController : 和UINavigationController一样分为4个步...

  • tabbar隐藏问题

    ——.当UITabBarController 与UINavigationController 界面搭建时,从导航控...

  • tabbar 隐藏问题

    ——.当UITabBarController 与UINavigationController 界面搭建时,从导航控...

  • 02-项目搭建

    项目搭建 课程目标 熟悉 Swift 语法 搭建系统主体框架结构 对比与 OC 开发的异同 纯代码搭建框架 创建文...

  • RxSwift官方实例一(绑定)

    代码下载 数字相加 搭建UI 构建如下UI: 绑定UI 代码分析: 首先使用combineLatest操作符组合3...

  • Swift OC 购物车Demo

    采用纯代码UI,autolayout自动布局,core animation动画效果。 代码下载

  • 纯代码写UI

    1.Setting the background Color of a View Controller: 2.Ad...

  • iOS纯代码UI

    1.删除main.storyboard文件 2.TARGETS->工程名字->General->Deploymen...

网友评论

    本文标题:[纯代码]搭建UINavigationController与UI

    本文链接:https://www.haomeiwen.com/subject/hdnmuxtx.html