大概就是这么一个效果

如图.大概可以看到,"筛选"视图后面有一层视图盖住了后面原来的视图

那么我们可以通过加一个view到导航栏控制器的view里面来实现

    //该view作为全局变量,后面关闭视图时要用
backColorView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
backColorView.backgroundColor = [UIColor blackColor];
backColorView.alpha = .0; //开始透明度为0,后面通过动画逐渐变黑
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction)];
[backColorView addGestureRecognizer:tap]; //加入触摸手势,点阴影区域时关闭右侧导航栏
[self.navigationController.view addSubview:backColorView];
/* 出现的动画 */
[UIView animateWithDuration:.5 animations:^{
backColorView.alpha = .3;
} completion:^(BOOL finished) {
}];

然后就可以再往里面添加视图控制器了.

    /* 创建第二页对象 */
sec = [[SecondViewController alloc]init];
/* 传递seletor过去给第二个页面的vc */
sec.sel = @selector(tapAction);
/* 同上.这里要在第二个页面触发首页的关闭事件*/
sec.target = self;
/* 创建第二页的导航栏控制器 */
navi = [[UINavigationController alloc]initWithRootViewController:sec];
/* 仿京东的 导航栏视图不占全屏 */
navi.view.frame = CGRectMake(ScreenWidth, 0, ScreenWidth-100, ScreenHeight);
/* 把创建的第二个的导航栏控制器作为本导航栏控制器的子控制器 */
[self.navigationController addChildViewController:navi];
/* 把第二个导航栏控制器的视图加到本导航栏控制器的view上(事实上导航栏控制器的view是包含了导航栏,视图控制器的视图 */
[self.navigationController.view addSubview:navi.view];
/* 出现的动画 */
[UIView animateWithDuration:.5 animations:^{
backColorView.alpha = .3;
navi.view.frame = CGRectMake(100, 0, ScreenWidth-100, ScreenHeight);
} completion:^(BOOL finished) { }];

  

  移除/关闭视图:

-(void)tapAction{

    NSLog(@"关闭");

    /* 关闭操作,先动画后移除 */

    [UIView animateWithDuration:.5 animations:^{

        backColorView.alpha  = 0;

        navi.view.frame = CGRectMake(ScreenWidth, 0, ScreenWidth-100, ScreenHeight);

    } completion:^(BOOL finished) {

        [backColorView removeFromSuperview];

        [navi.view removeFromSuperview];

        [navi removeFromParentViewController];

    }];

}

  

  然后效果就这样了..当然还有其他的设置这里没有列出来,也只是简单的交互操作,看下demo就知道原理了

DEMO下载

简单仿京东"筛选"界面 双导航栏控制器共存 by Nicky.Tsui的更多相关文章

  1. 导航栏控制器和标签栏控制器(UINavigationController和UITabBarController)混用

    很多时候,在UI设计方面同时需要使用导航控制器和标签栏控制器,这时,需要掌握如何设计结合使用这两种不同控制器.比如手机QQ,程序有三个标签 栏(分别为消息.联系人.动态),同时在选择某个联系人或者会话 ...

  2. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

  3. JQuery实现仿腾讯的固定导航栏

    1.描述 窗口滚动一定高度之后才让导航栏固定 2.要点 浏览器滚动的事件:$(window).scroll(functiuon(){ 文档滚过的高度: $(doucment).scrollTop(); ...

  4. iOS开发-仿大众点评iPad侧边导航栏

    昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,iPad上看了大众点评的侧边栏,基本上百分之九十类似,具体效果可参考下图: 对比昨天主要做了两个修改,一个是图片和文字的显示 ...

  5. iOS:视图切换的第二种方式:UINavigationController导航栏控制器

    UINavigationController:一个以栈的形式管理多视图的容器,负责子控制器之间的跳转.由于以栈的方式管理视图,各个视图的切换就是压栈和出栈操作,所以出栈后的视图会立即销毁. 介绍: & ...

  6. 简单仿京东导航下拉菜单 javascript

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  7. 仿淘宝左侧菜单导航栏纯Html + css 写的

    这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考 废话不多说先来个效果图 接下来直接上代 ...

  8. Android:简单实现ViewPager+TabHost+TabWidget实现导航栏导航和滑动切换

    viewPager是v4包里的一个组件,可以实现滑动显示多个界面. android也为viewPager提供了一个adapter,此adapter最少要重写4个方法: public int getCo ...

  9. ViewPager + Fragment 实现主界面底部导航栏

    1. 四个类似的Frament布局 tab_main_fragment.xml <LinearLayout xmlns:android="http://schemas.android. ...

随机推荐

  1. 物联网大赛 - Android学习笔记(二)Andriod 应用界面编程

    学习目标: Android的程序界面和View组件 View组件和ViewGroup组件 常见的布局管理器 文本框组件TextView和EditView 按钮组件Button 和ImageButton ...

  2. Kafka单机安装Version1.0.1(自带Zookeeper)

    1.说明 Kafka单机安装,基于版本1.0.1, 使用kafka_2.12-1.0.1.tgz安装包, 其中2.12是编译工具Scala的版本. 而且不需要另外安装Zookeeper服务, 使用Ka ...

  3. Zookeeper基础教程(四):C#连接使用Zookeeper

    Zookeeper作为分布式的服务框架,虽然是java写的,但是强大的C#也可以连接使用. C#要连接使用Zookeeper,需要借助第三方插件,而现在主要有两个插件可供使用,分别是ZooKeeper ...

  4. centos6.5-Apache优化

    Apache的网页压缩功能 一.配置网页压缩功能 在配置压缩功能以前访问网页的响应头部 Response Headers view source Accept-Ranges:bytes Connect ...

  5. Java--Map的使用认知

    Java里面的Map是一个抽象接口,有一些类实现的该接口比如HashMap.TreeMap等 HashMap 是一个散列表,存储的内容是靠键值对来映射的(key-value). 基本认识 HashMa ...

  6. 虚拟机上CentOS7环境配置

    原文链接:https://www.toutiao.com/i6493449649939022350/ 之前网络和基本环境以及完成,现在我们再配置一些内容,方便我们之后的学习. 设置网络YUM源 下载我 ...

  7. Mybatis-Plus的引用

    一.依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-b ...

  8. Keil MDK STM32系列(三) 基于标准外设库SPL的STM32F407开发

    Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...

  9. GIL全局解释器锁、死锁现象、python多线程的用处、进程池与线程池理论

    昨日内容回顾 僵尸进程与孤儿进程 # 僵尸进程: 所有的进程在运行结束之后并不会立刻销毁(父进程需要获取该进程的资源) # 孤儿进程: 子进程正常运行 但是产生该子进程的父进程意外死亡 # 守护进程: ...

  10. [硬拆解]拆解一个USB转CAN-FD总线设备-PCAN-USB FD

    描述 CAN FD适配器PCAN-USB FD允许通过USB将CAN FD和CAN网络连接到计算机.高达500伏的电流隔离将PC与CAN总线分离.简单的操作及其紧凑的塑料外壳使该适配器适用于移动应用. ...