美文网首页iOS开发杂货铺
iOS左侧滑抽屉效果

iOS左侧滑抽屉效果

作者: 遥远不是北_ | 来源:发表于2017-07-14 12:44 被阅读224次

近期由于公司新的项目需要实现左侧滑展示用户登录注册和设置等界面,之前也在网上看到过不少封装好的侧滑框架几乎都是右侧滑效果,于是自己动手封装了一个简单的左侧滑框架,现分享出来共有同样需求的朋友使用.
你需要做的是将VVSliderController文件夹导入项目中 (注:demo只是对左侧滑功能的展示简单添加了背景色并没有实现界面布局),好了先上demo效果~~

GitHub下载地址:https://github.com/Will-whp/CeHua-Demo

侧滑.gif
  • 方法声明 VVSliderController.h
- (instancetype)initWithLeftViewController:(UIViewController *)leftVc withRightViewController:(UIViewController *)rightVc;
  • 方法实现 AppDelegate.m
VVTabBarController *tabBarVc = [[VVTabBarController alloc]init];
VVOneViewController *leftVc = [[VVOneViewController alloc] init];
    
VVSliderController *sliderVc = [[VVSliderController alloc] initWithLeftViewController:leftVc withRightViewController:tabBarVc];
  • 具体实现思路
- (instancetype)initWithLeftViewController:(UIViewController *)leftVc withRightViewController:(UIViewController *)rightVc {
    
    if (self = [super init]) {
        
        //1.addCHild
        [self addChildViewController:leftVc];
        [self addChildViewController:rightVc];
        
        //2.添加子VIew
        [self.view addSubview:leftVc.view];
        [self.view addSubview:rightVc.view];
        
        //3.didmove
        [leftVc didMoveToParentViewController:self];
        [rightVc didMoveToParentViewController:self];
        
        //4.添加拖拽手势
        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
        
        [self.view addGestureRecognizer:pan];
        
        //关联
        _rightVc = rightVc;

    }
    
    return self;
}

//轻点 关闭
- (void)tapAction:(UITapGestureRecognizer *)sender {
    
    //NSLog(@"tap---");
    
    [self close];
}

- (void)panAction:(UIPanGestureRecognizer *)sender {
    
    //1.获取移动的偏移量
    CGPoint offset = [sender translationInView:sender.view];
    
    //2.清零
    [sender setTranslation:CGPointZero inView:sender.view];
    
    
    //判断范围
    //NSLog(@"%f",offset.x);
    
    //offset.x 只要左滑就是负的
    if ((offset.x  + _rightVc.view.frame.origin.x) > 0) {
        
        return;
    }
    
    //判断手势的状态
    switch (sender.state) {
        case UIGestureRecognizerStateBegan:
        case UIGestureRecognizerStateChanged:
            
            //3.改变形变属性
            _rightVc.view.transform = CGAffineTransformTranslate(_rightVc.view.transform, offset.x, 0);
           
            break;
        case UIGestureRecognizerStateFailed:
        case UIGestureRecognizerStateCancelled:
        case UIGestureRecognizerStateEnded:
        {
            
            //判断 是否超过了 屏幕的一半
            CGFloat width = [UIScreen mainScreen].bounds.size.width;
            
            if (ABS(_rightVc.view.frame.origin.x) > width * 0.5) {
                
                [self open];
                
            }else if ((_rightVc.view.frame.origin.x + width) > width * 0.5){
                
                [self close];
            }
        }
            break;
            
        default:
            break;
    }
    
}

//关闭侧滑
- (void)close{
    
    [UIView animateWithDuration:.5 animations:^{
        
        _rightVc.view.transform = CGAffineTransformIdentity;
    }];
    
    //删除 tap手势
    [_rightVc.view removeGestureRecognizer:_tap];
    _tap = nil;
    
}

//打开侧滑
- (void)open {
    
    //判断 是否超过了 屏幕的一半
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    CGFloat margin = 64;
    
    [UIView animateWithDuration:.5 animations:^{
        
        _rightVc.view.transform = CGAffineTransformMakeTranslation(margin - width, 0);
    }];
    
    //如果tap手势存在 不重复添加
    //    if(![_rightVc.view.gestureRecognizers containsObject:_tap]){
    //
    //
    //    }
    
    if (_tap == nil) {
        
        //5.添加tap
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
        
        [_rightVc.view addGestureRecognizer:tap];
        
        //关联
        _tap = tap;
    }
    
}

相关文章

网友评论

    本文标题:iOS左侧滑抽屉效果

    本文链接:https://www.haomeiwen.com/subject/ujxuhxtx.html