这篇文章主要介绍iOS如何实现模仿QQ侧边栏,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
分析:QQ侧边栏都用了哪些手势,有哪些效果?
QQ的主页是个UITabbarController,暂且称为MainVc左侧边缘添加的手势为边缘手势UIScreenEdgePanGestureRecognizer
当边缘手势滑动到屏幕中间时判断MainVc移动的距离超过屏幕中间,超过就显示侧边栏,没超过会自动归位。
MainVc移动的时候会有一层黑色的遮罩,遮罩的透明度和MainVc移动的距离有关。
当侧边栏出现的时候,此时MainVc添加的手势更换为平移手势UIPanGestureRecognizer。判断MainVc移动的距离和第二步一样。
添加的手势和系统的边缘手势冲突如何处理。
当侧边栏隐藏的时候,给MainVc一个很大的速度,会立即显示侧边栏。当侧边栏出现的时候,给侧边栏一个很大的速度,会立即显示MainVc。
层级关系如上图:MainVc 在侧边栏 上面,只需要添加手势来控制侧边栏的显示与隐藏即可。
代码
[self addChildViewController:self.leftVc]; [self addChildViewController:self.mainVc]; [self.mainVc didMoveToParentViewController:self]; [self.leftVc didMoveToParentViewController:self]; //添加屏幕边缘平移手势 [self.mainVc.view addGestureRecognizer:self.pan1]; //添加平移手势 [self.mainVc.view addGestureRecognizer:self.pan2]; //添加点击手势 [self.mainVc.view addGestureRecognizer:self.tap];
关于手势的处理,模拟一个侧滑的临界速度,姑且定位1000.
#pragma mark---手势处理 -(void)screenGesture:(UIPanGestureRecognizer *)pan{ //移动的距离 CGPoint point = [pan translationInView:pan.view]; //移动的速度 CGPoint verPoint = [pan velocityInView:pan.view]; self.mainVc.view.lx_x += point.x; //边界限定 if (self.mainVc.view.lx_x >= MAXLEFTSLIDEWIDTH) { self.mainVc.view.lx_x = MAXLEFTSLIDEWIDTH; } if (self.mainVc.view.lx_x <= 0) { self.mainVc.view.lx_x = 0; } //蒙版的阴影限定 self.maskView.alpha = self.mainVc.view.lx_x /MAXLEFTSLIDEWIDTH; if (pan.state == UIGestureRecognizerStateEnded) { //判断手势 if (pan == self.pan1) { if (verPoint.x > MAXSPEED) { [self showLeftVc]; }else{ if (self.mainVc.view.lx_x >= Device_Width/2) { [self showLeftVc]; }else{ [self hideLeftVc]; } } }else{ if (verPoint.x < - MAXSPEED) { [self hideLeftVc]; }else{ if (self.mainVc.view.lx_x >= Device_Width/2) { [self showLeftVc]; }else{ [self hideLeftVc]; } } } } [pan setTranslation:CGPointZero inView:pan.view]; }
关于添加的手势和系统的边缘手势冲突的问题,解决如下:
在子类化UINavigationController
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.navigationBar.translucent = YES; self.navigationBar.barTintColor = LXMainColor; self.interactivePopGestureRecognizer.delegate = self; } #pragma mark--防止与添加到tabbar的手势冲突-- -(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{ if (self.childViewControllers.count <= 1) { return NO; } return YES; }
发现QQ的二级页面添加了全屏手势,所以也把UINavigationController+FDFullscreenPopGesture.h添加了进去,发现原来冲突的手势也不冲突了。
效果图:
以上是“iOS如何实现模仿QQ侧边栏”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:iOS如何实现模仿QQ侧边栏-创新互联
浏览地址:https://www.cdcxhl.com/article40/doodho.html
成都网站建设公司_创新互联,为您提供服务器托管、响应式网站、网站内链、微信小程序、外贸建站、静态网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联