iOS 抽屉效果 ViewDeck

抽屉效果目前比较有名的有第三方RESideMenu和MMDrawerController。但是项目要求抽屉效果为拉出形式，并且要有黑色透明遮罩层，然后在GitHub发现了一个更好用的库ViewDeck

ViewDeck

• 支持左边和右边侧边栏
• 抽屉拉出效果，带有黑色透明遮罩层
• 侧边栏显示内容尺寸可以控制
• 在首页跳转页面时不用设置侧边栏是否可以滑动
• 省心省力，快速集成
• 核心缺点：关闭时默认为点击事件

ViewDeck抽屉效果.gif

1.配置侧边栏

    UITabBarController *tarBarCtr=[[UITabBarController alloc]init];
    [tarBarCtr setViewControllers:[NSArray arrayWithObjects:centNvi,centSecNvi, nil]];
    _rootTabbarCtrV=tarBarCtr;
 //左边view 采用xib多种形式研究
    LeftSideViewController *leftView =[[LeftSideViewController alloc]initWithNibName:@"LeftSideViewController" bundle:[NSBundle mainBundle]];
    UINavigationController *leftNvi=[[UINavigationController alloc]initWithRootViewController:leftView];
    //右边
    RightSideViewController *rightView=[[RightSideViewController alloc]init];
    UINavigationController *rightNvi=[[UINavigationController alloc]initWithRootViewController:rightView];
    //初始化ViewDeck
    IIViewDeckController *viewDeckController =[[IIViewDeckController alloc]initWithCenterViewController:_rootTabbarCtrV leftViewController:leftNvi rightViewController:rightNvi];
    viewDeckController.delegate=self;
    self.window.rootViewController=viewDeckController;

2.首页点击侧边栏按钮和跳转下一页

通过openSide:(IIViewDeckSide)方法可以左、右侧边栏

typedef NS_ENUM(NSInteger, IIViewDeckSide) {
    IIViewDeckSideNone = 0, /// This identifies no side, basically meaning that neither the left nor the right side is relevant.
    IIViewDeckSideLeft, /// This identifies the left view controller of an IIViewDeckController
    IIViewDeckSideRight, /// This identifies the right view controller of an IIViewDeckController

    IIViewDeckSideUnknown = IIViewDeckSideNone, /// This has the same logic as IIViewDeckSideNone but means that the side is yet unknown.

    IIViewDeckLeftSide __deprecated_enum_msg("Use IIViewDeckSideLeft instead.") = IIViewDeckSideLeft,
    IIViewDeckRightSide __deprecated_enum_msg("Use IIViewDeckSideRight instead.") = IIViewDeckSideRight,
};

//点击打开左侧侧边栏
-(void)actionOfTapLeftEvent{
    [self.viewDeckController openSide:IIViewDeckSideLeft animated:YES];
}
//跳转下一页
-(void)actionOfTapRightEvent{
    InfoViewController *infoView=[[InfoViewController alloc]init];
    [infoView setHidesBottomBarWhenPushed:YES];
//不需要类似RESideMenu把panGestureEnabled关闭
    [self.navigationController pushViewController:infoView animated:YES];
}

3.侧边栏显示内容宽度设置和跳转

通过preferredContentSize属性设置侧边栏的内容宽度尺寸

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
   //ViewDeck默认高度始终是视图控制器本身的高度上
    self.preferredContentSize = CGSizeMake(ScreenWidth/3*2, ScreenHeight);
    self.view.backgroundColor=[UIColor whiteColor];
    
}
- (IBAction)goNextView:(UIButton *)sender {
    /**
     关闭侧边栏
     */
    [self.viewDeckController closeSide:YES];
    UINavigationController *navCtr= ((AppDelegate*)[UIApplication sharedApplication].delegate).rootTabbarCtrV.selectedViewController;
    InfoViewController *infoView=[[InfoViewController alloc]init];
    [infoView setHidesBottomBarWhenPushed:YES];
    [navCtr pushViewController:infoView animated:YES];
}

4.关闭侧边栏时，默认为点击关闭，非滑动关闭

IIViewDeckController.mm 源码文件中，decorationTapGestureRecognizer是关闭侧边栏手势，为UITapGestureRecognizer类型

- (UITapGestureRecognizer *)decorationTapGestureRecognizer {
    if (_decorationTapGestureRecognizer) {
        return _decorationTapGestureRecognizer;
    }

    let recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(closeGestureRecognized:)];
    _decorationTapGestureRecognizer = recognizer;
    return _decorationTapGestureRecognizer;
}
- (nullable UIView *)decorationViewForTransitionWithContext:(id<IIViewDeckTransitionContext>)context {
    if (let decorationView = self.currentDecorationView) {
        return decorationView;
    }

    let decorationView = [[UIView alloc] initWithFrame:self.view.bounds];
    decorationView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.75];
    [decorationView addGestureRecognizer:self.decorationTapGestureRecognizer];
    self.currentDecorationView = decorationView;
    return decorationView;
}

对于项目强制要求为滑动关闭的童鞋，这个库本身无法满足需求，需要自己手动实现，把decorationTapGestureRecognizer修改为滑动手势。
如果项目紧急或嫌实现麻烦，可以继续浏览，看下面这个库是否满足你的项目需求 REFrostedViewController

REFrostedViewController

• 侧边栏显示内容尺寸可以控制
• 抽屉拉出效果，带有黑色透明遮罩层
• 可以侧滑关闭(重点)
• 缺点：仅支持单边侧边栏(左边或右边)
• 缺点：显示侧边栏时需要手动实现滑动手势，会有隐藏隐患
• 缺点：拉出和关闭时，黑色遮罩并不完美
• 缺点：已经停止维护了三四年了(老古董了)

1.配置侧边栏

    //侧边栏
    REFMenuViewController *menuView = [[REFMenuViewController alloc]init];
   REFrostedViewController *rostedViewController = [[REFrostedViewController alloc] initWithContentViewController:tarBarCtr menuViewController:menuView];
    rostedViewController.direction = REFrostedViewControllerDirectionLeft;
    rostedViewController.liveBlurBackgroundStyle = REFrostedViewControllerLiveBackgroundStyleDark;
    rostedViewController.liveBlur = YES;
    rostedViewController.limitMenuViewSize = YES;
    rostedViewController.backgroundFadeAmount=0.5;
    rostedViewController.delegate = self;
    rostedViewController.menuViewSize=CGSizeMake(leftSideMeunWidth, ScreenHeight);

2.首页点击侧边栏按钮和跳转下一页

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.navigationItem.title=@"首页";
    UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc]initWithTitle:@"左边栏" style:UIBarButtonItemStylePlain target:self action:@selector(actionOfTapLeftEvent:)];
    self.navigationItem.leftBarButtonItem=leftBarButton;
    UIBarButtonItem *rightBarButton=[[UIBarButtonItem alloc]initWithTitle:@"下一页" style:UIBarButtonItemStylePlain target:self action:@selector(actionOfTapRightEvent)];
    self.navigationItem.rightBarButtonItem=rightBarButton;
    /**
     如需要侧滑显示侧边栏，则要实现滑动手势
     */
    [self.view addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureRecognized:)]];
    [self creatVC];
}
//点击显示侧边栏
-(void)actionOfTapLeftEvent:(UIButton *)sender{
    [self.frostedViewController presentMenuViewController];
}
//滑动显示侧边栏
- (void)panGestureRecognized:(UIPanGestureRecognizer *)sender{
    [self.frostedViewController panGestureRecognized:sender];
}

3.侧边栏关闭和跳转

//跳转下一页
-(void)actionOfTapRightEvent{
    /**
     关闭右侧侧边栏
     */
    [self.frostedViewController hideMenuViewController];
    
    UINavigationController *navCtr= ((AppDelegate*)[UIApplication sharedApplication].delegate).rootTabbarCtrV.selectedViewController;
    REFInfoViewController *infoView=[[REFInfoViewController alloc]init];
    [infoView setHidesBottomBarWhenPushed:YES];
    [navCtr pushViewController:infoView animated:YES];
}

4.当视图内含有UIScrollView时，会导致侧滑失效，解决方案之一可以继承UIScrollView并实现如下：

/**
 *  重写手势，如果是左滑，则禁用掉scrollview自带的；右滑很少出现，此处未实现
 */
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
    if([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]])
    {
        UIPanGestureRecognizer *pan = (UIPanGestureRecognizer *)gestureRecognizer;
        if([pan translationInView:self].x > 0.0f && self.contentOffset.x == 0.0f)
        {
            return NO;
        }
    }
    return [super gestureRecognizerShouldBegin:gestureRecognizer];
}

最后小demo附上：ViewDeckStudy 内含ViewDeck和REFrostedViewController使用