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配置好以及实现相应的代码,运行效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

C# 从零开始写 SharpDx 应用 控制台创建 Sharpdx 窗口 下载创建窗口

本文告诉大家如何在控制台使用 SharpDx 创建窗口,这是一个底层的博客,我会用很多博客告诉大家如何从控制台创建一个高性能渲染程序

14420
来自专栏滕先生的博客

SDWebImage 图片下载缓存框架 常用方法及原理

46940
来自专栏更流畅、简洁的软件开发方式

【开源】QuickPager ASP.NET2.0分页控件——使用示例、基本应用和查询功能

    myPage分页控件发出来之后,虽然开源了,但是没有给一个简单一点的 demo,真是漏掉了一个很重要的部分。     先说明一下使用myPage分页...

256100
来自专栏前端布道

Angular开发实践(六):服务端渲染

Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务...

656100
来自专栏Danny的专栏

机房收费系统(VB.NET)——超详细的报表制作过程

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

30730
来自专栏Java成神之路

GEF入门实例_总结_04_Eclipse插件启动流程分析

这6个文件对RCP应用程序而言非常重要,可能我们现在对这几个文件的理解还是云里雾里,这一节我们将通过这几个文件来了解Eclipse插件的启动过程。

14240
来自专栏Objective-C

Xcode8.0 控制台打印输出问题

40770
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增、编辑...

33650
来自专栏腾讯移动品质中心TMQ的专栏

基于自定义向导的C++单元测试环境自动化配置

导语:相信使用过Visual Studio的小伙伴都感受过VS向导的强大,通过应用程序向导,我们可以很方便地搭建应用程序,通过代码向导,可以大大提高我们编写代码...

224100
来自专栏CRPER折腾记

Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)

不推荐完全copy过去,可以看看我是如何针对我这边业务; 做的一个axios的封装及实现的思路

55320

扫码关注云+社区

领取腾讯云代金券