iOS仿今日头条滑动导航
之前写了篇博客网易首页导航封装类、网易首页导航封装类优化,今天在前两个的基础上仿下今日头条。
1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的偏移量。
2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题。
今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanGestureRecognizer与ScrollView的手势冲突。

一、ViewController的层次
用上面的图来介绍,左侧的个人页面ViewController上面通过addChildViewController添加了一个以MainViewController为RootViewController的
UINavigationController,通过addSubview将UINavigationController的View添加到个人页面ViewController的View上。
二、仿今日头条滑动导航主要有4个问题:
1.UIPanGestureRecognizer与ScrollView的手势冲突
为了达到拖动滑动的效果,需要给MainViewController添加一个UIPanGestureRecognizer,由于底部是ScrollView和TableView组成的,所以会使UIPanGestureRecognizer与底部的冲突,和网易首页导航封装类优化类似需要在
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer中根据gestureRecognizer返回YES来使ScrolView和UIPanGestureRecognizer都识别。
2.UIPanGestureRecognizer滑动结束的位置不正确
用UIPanGestureRecognizer滑动根据偏移量来改变UINavigationController的View的位置,在今日头条中滑动结束时UINavigationController的View要么在原位要么在右侧,不会停在中间,这个问题让我想起了之前做的果冻效果,手势有状态state,根据手势的状态来改变UINavigationController的View的位置,特别是在手势结束时。
3.由于1使ScrolView和UIPanGestureRecognizer都识别,导致返回时ScrolView也会滑动
让底部的ScrolView能滑动的时间应该是UINavigationController的View在初始位置frame的x为0,所以在它的frame的x>0时,底部的bottomScrollView scrollEnabled=NO。
4.页面拖到右边时点击右边页面可以滑到初始位置
首先时点击滑到初始页面则需要给UINavigationController的View添加轻点手势,添加后就会与tableView的手势冲突,所以有出现了一个新的bug,解决这个bug还比较好解决,因为bottomScrollView的ScrollView只有Pan、pich手势,tap手势没有,所以只要设置tap轻点手势的状态就能解决. 在UINavigationController的View的frame的x>0时,tap手势的enable=NO,==0时为Yes即可(上周未将轻点加上,这周算是补上了,下面具体实现代码我就不改了)。
三、 主要实现代码(导航的代码就不贴了,只贴主要的)
1.声明一个拖动手势
@property(nonatomic,strong) UIPanGestureRecognizer *panGestureRecognizer;
2.为MainViewController添加手势
_panGestureRecognizer=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGesture:)];
_panGestureRecognizer.delegate=self;
[self.navigationController.view addGestureRecognizer:_panGestureRecognizer];
3.手势识别的方法
//平移
-(void)panGesture:(UIPanGestureRecognizer*)pan
{
//在View中的位置
// CGPoint point=[pan locationInView:self.navigationController.view];
//在View中的移动量 以手指按下的为原点
CGPoint point1=[pan translationInView:self.navigationController.view];
if (pan.state==UIGestureRecognizerStateChanged&&pan==_panGestureRecognizer) {
&&self.navigationController.view.frame.origin.x<self.navigationController.view.frame.size.width-) {
//下面if主要是解决tableView滑动会引起navigationController.View也滑动的bug
&&self.navigationController.view.frame.origin.x==) {
return;
}
?self.navigationController.view.frame.size.width-:self.navigationController.view.frame.origin.x+point1.x;
self.navigationController.view.frame=CGRectMake(x, self.navigationController.view.frame.origin.y, self.navigationController.view.frame.size.width, self.navigationController.view.frame.size.height);
NSLog(@"%@",NSStringFromCGRect(self.navigationController.view.frame));
}
)
{
NSLog(@"aaa %f",self.navigationController.view.frame.origin.x);
?:self.navigationController.view.frame.origin.x+point1.x;
self.navigationController.view.frame=CGRectMake(x, self.navigationController.view.frame.origin.y, self.navigationController.view.frame.size.width, self.navigationController.view.frame.size.height);
}
}
else if(pan.state==UIGestureRecognizerStateEnded)
{
) {
[UIView animateWithDuration:0.2 animations:^{
self.navigationController.view.frame=CGRectMake(self.navigationController.view.frame.size.width-, , self.navigationController.view.frame.size.width, self.navigationController.view.frame.size.height);
} completion:^(BOOL finished) {
self.bottomScrollView.scrollEnabled=YES;
}];
}
else
{
[UIView animateWithDuration:0.2 animations:^{
self.navigationController.view.frame=CGRectMake(, , self.navigationController.view.frame.size.width, self.navigationController.view.frame.size.height);
} completion:^(BOOL finished) {
self.bottomScrollView.scrollEnabled=YES;
}];
}
}
//偏移量是增加的应该设为0
[pan setTranslation:CGPointZero inView:self.navigationController.view];
}
4.手势冲突解决
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
if (self.bottomScrollView.contentOffset.x<=0.0&&gestureRecognizer==_panGestureRecognizer) {
) {
self.bottomScrollView.scrollEnabled=NO;
}
else
{
self.bottomScrollView.scrollEnabled=YES;
}
return YES;
}
return NO;
}
四、效果图


iOS仿今日头条滑动导航的更多相关文章
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
- 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)
TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...
- vue 仿今日头条
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- vue2.0仿今日头条开源项目
vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...
- [Android] Android 手机下 仿 今日头条 新闻客户端
利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意 开发了这个 仿 今日头条 新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻 预览演示如下: 功能说明: 1)底部 ...
- Android 仿今日头条频道管理(下)(GridView之间Item的移动和拖拽)
前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...
- android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码
Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...
- 仿今日头条最强顶部导航指示器,支持6种模式-b
项目中经常会用到类似今日头条中顶部的导航指示器,我也经常用一个类似的库PagerSlidingTabStrip,但是有时并不能小伙伴们的所有需求,所以我在这个类的基础上就所有能用到的情况做了一个简单的 ...
- Android 仿今日头条频道管理(上)(GridView之间Item的移动和拖拽)
前言 常常逛今日头条.发现它的频道管理功能做的特别赞.交互体验很好.如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fo ...
随机推荐
- 基于 Raphael 的 Web UI 设计 - 初稿
基于 Raphael 的 UI 设计 - 初稿 还有很多地方需要完善,这次要把 Raphael 彻底用起来,^_^, 一定要150字哦,一图抵千字啊,^_^,不喜欢写字的,那么怎么凑够150字呢,说说 ...
- C#递归例程
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- Spring @SCHEDULED(CRON = "0 0 * * * ?")实现定时任务
Spring配置文件xmlns加入 xmlns:task="http://www.springframework.org/schema/task" xsi:schemaLocati ...
- 在 Cef 中实现 C++ 与 JavaScript 交互场景分析
此文已由作者邓佳佳授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 本文主要介绍 CEF 场景中 C++ 和 JavaScript 交互(以下简称 JS Bridge)中的一些重 ...
- nova network-vif-plugged 事件分析1
在创建虚机过程中,nova-compute会调用wait_for_instance_event函数(nova/compute/manage.py)进行network-vif-plugged的事件等待, ...
- KindEditor的使用
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
- Java50道经典习题-程序14 求日期
题目:输入某年某月某日,判断这一天是这一年的第几天?分析:(1)以3月5日为例,应该先把前两个月的加起来,然后再加上5天即本年的第几天 (2)特殊情况,闰年2月份的天数是29天,否则是28天 impo ...
- leecode刷题(18)-- 报数
leecode刷题(18)-- 报数 报数 描述: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 1112 ...
- LOJ#2070. 「SDOI2016」平凡的骰子(计算几何)
题面 传送门 做一道题学一堆东西不管什么时候都是美好的体验呢-- 前置芝士 混合积 对于三个三维向量\(a,b,c\),定义它们的混合积为\((a\times b)\cdot c\),其中$\time ...
- Docker的安装与启动教程
一.安装Docker Docker官方建议在Ubuntu中安装,因为Docker是基于Ubuntu发布的,而且一般Docker出现的问题Ubuntu是最先更新或者打补丁的.在很多版本的CentOS中是 ...