大概就是这么一个效果

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

那么我们可以通过加一个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. 如何修改文件的 “创建时间” 和 “修改时间”(Windows Linux macOS)

    请访问原文链接:https://sysin.org/blog/how-to-change-file-date,查看最新版.原创作品,转载请保留出处. 作者:gc(at)sysin.org,主页:www ...

  2. python 面向对象:类属性

    一.概念和使用 类属性就是给类对象定义的属性 类属性用于记录与这个类相关的特征 类属性不会用于记录具体对象的特征 使用赋值语句在  class  关键字下方可以定义类属性 二.代码演示 示例需求: 定 ...

  3. [Beyond Compare] 排除/忽略 .svn 文件夹

    [Beyond Compare] Exclude .svn folders Beyond Compare 3 Session >> Session Settings... >> ...

  4. webSocket 前端 js 加入 心跳机制 的基本写法

    1前言 websocket 一般 每隔 90 秒无操作则会自动断开  ,需要加入一个心跳机制 来防止 自断 2. 实验过程 (1)设定一个jsp 或html 文件都行 ,加入元素 (2)js 源码 , ...

  5. react中使用charles实现本地数据mock

    首先下载charles软件地址,更详细的使用方法都包含在操作文档里,包含汉化版补丁(下载后查看) 链接:https://pan.baidu.com/s/1Q5rMbcX0Wus7AwdGUWa-Wg ...

  6. 第51篇-SharedRuntime::generate_native_wrapper()生成编译入口

    当某个native方法被调用时,一开始它会从解释入口进入,也就是我之前介绍的.由InterpreterGenerator::generate_native_entry()函数生成的入口例程.在这个例程 ...

  7. TensorRT 开始

    TensorRT 是 NVIDIA 自家的高性能推理库,其 Getting Started 列出了各资料入口,如下: 本文基于当前的 TensorRT 8.2 版本,将一步步介绍从安装,直到加速推理自 ...

  8. lua中的三目运算符

    开头先说结论 1.简单版三目运算符(需要自我保证"b"不为"false") a and b or c 2.通用版三目运算符 (a and {b} or {c}) ...

  9. 开源数据可视化BI工具SuperSet(使用)

    上一篇介绍了Linux 下如何安装SuperSet ,本篇简单介绍一下如何使用 1.输入安装时设置的用户名密码登录控制台  2.控制界面如下  3.第一步添加数据源(已安装好的mysql) 点击 da ...

  10. Solon Web 开发

    Solon Web 开发 一.开始 二.开发知识准备 三.打包与运行 四.请求上下文 五.数据访问.事务与缓存应用 六.过滤器.处理.拦截器 七.视图模板与Mvc注解 八.校验.及定制与扩展 九.跨域 ...