时间:2021-05-20
之前在平台给大家分享了网易首页导航封装类、网易首页导航封装类优化,今天在前两个的基础上仿下今日头条。
1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的便宜量。
2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题。
今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanGestureRecognizer与ScrollView的手势冲突。
一、ViewController的层次
用上面的图来介绍,左侧的个人页面ViewController上面通过addChildViewController添加了一个以MainViewController为RootViewController的
UINavigationController,通过addSubview将UINavigationController的View添加到个人页面ViewController的View上。
二、仿今日头条滑动导航主要有3个问题:
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。
三、 主要实现代码(导航的代码就不贴了,只贴主要的)
1.声明一个拖动手势
@property(nonatomic,strong) UIPanGestureRecognizer *panGestureRecognizer;
2.为MainViewController添加手势
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) {if (point1.x>0&&self.navigationController.view.frame.origin.x<self.navigationController.view.frame.size.width-100) {float x= self.navigationController.view.frame.origin.x+point1.x>self.navigationController.view.frame.size.width-100?self.navigationController.view.frame.size.width-100: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));}else if(point1.x<0){NSLog(@"aaa %f",self.navigationController.view.frame.origin.x);float x=self.navigationController.view.frame.origin.x+point1.x<0?0: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){if (self.navigationController.view.frame.origin.x>self.navigationController.view.frame.size.width/3) {[UIView animateWithDuration:0.2 animations:^{self.navigationController.view.frame=CGRectMake(self.navigationController.view.frame.size.width-100, 0, 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(0, 0, 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.手势冲突解决
四、效果图
以上所述是小编给大家分享的IOS仿今日头条滑动导航栏,希望对大家有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
简介看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能像商城类商品类目如
近日,今日头条App重磅更新,底部导航栏的中心位置出现核心功能“常用”。进入“常用”出现头条小程序桌面和用户的常用功能。页面可以上拉,形成全屏页面。这与前不久微
项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/
据媒体报道,今日头条APP在几个月前上线的小程序目前已在iOS版本中下线。用户在iOS版本的今日头条APP中搜索猫眼电影、小米商城和58同城生活助手均不能搜索到
前言今日头条iOS端从2016年起就关注到了安装包大小的问题,并启动了包大小优化。2017年,我们将当时的经验发表为技术文章《干货|今日头条iOS端安装包大小优