转载

iOS 仿QQ侧边栏

分析:QQ侧边栏都用了哪些手势,有哪些效果?

  1. QQ的主页是个UITabbarController,暂且称为MainVc左侧边缘添加的手势为边缘手势UIScreenEdgePanGestureRecognizer

  2. 当边缘手势滑动到屏幕中间时判断MainVc移动的距离超过屏幕中间,超过就显示侧边栏,没超过会自动归位。

  3. MainVc移动的时候会有一层黑色的遮罩,遮罩的透明度和MainVc移动的距离有关。

  4. 当侧边栏出现的时候,此时MainVc添加的手势更换为平移手势UIPanGestureRecognizer。判断MainVc移动的距离和第二步一样。

  5. 添加的手势和系统的边缘手势冲突如何处理。

  6. 当侧边栏隐藏的时候,给MainVc一个很大的速度,会立即显示侧边栏。当侧边栏出现的时候,给侧边栏一个很大的速度,会立即显示MainVc。

iOS 仿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侧边栏

demo地址:仿QQ侧边栏

博客推荐:https://4xx.me

正文到此结束
Loading...