iOS模仿QQ侧边栏的实现方法实例

2019-10-21 18:42:50

字体：大中小

来源：转载

供稿：网友

前言

新版QQ在UI方面做了不少更新，其中一个比较炫酷的效果就是其侧滑导航栏。虽然这种UI已经是被模仿来模仿去烂掉牙了，虽然有统计说这种设计的用户体验并不好。但是我本人还是非常喜欢这种效果的，下面就来一起看看详细的实现方法吧。

分析：QQ侧边栏都用了哪些手势，有哪些效果？

QQ的主页是个UITabbarController，暂且称为MainVc左侧边缘添加的手势为边缘手势UIScreenEdgePanGestureRecognizer
当边缘手势滑动到屏幕中间时判断MainVc移动的距离超过屏幕中间，超过就显示侧边栏，没超过会自动归位。
MainVc移动的时候会有一层黑色的遮罩，遮罩的透明度和MainVc移动的距离有关。
当侧边栏出现的时候，此时MainVc添加的手势更换为平移手势UIPanGestureRecognizer。判断MainVc移动的距离和第二步一样。
添加的手势和系统的边缘手势冲突如何处理。
当侧边栏隐藏的时候，给MainVc一个很大的速度，会立即显示侧边栏。当侧边栏出现的时候，给侧边栏一个很大的速度，会立即显示MainVc。

ios,qq侧边栏,仿qq侧边栏,侧边栏

层级关系如上图：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侧边栏,仿qq侧边栏,侧边栏