iOS 抽屉效果

效果图

平时开发中经常会用到抽屉效果，关于抽屉的实现有许多三方库，读者可以根据需要选用，本节内容主要简单的实现一个抽屉。

抽屉效果.png

抽屉原理

如下图所示：

抽屉原理.png

我们首先将Side页面添加到Root页面上，再将Show页面添加到Side页面上，这样就构成了一个抽屉。

Show页面（设置背景色为Green）就是我们首先看到的页面；Side页面（设置背景色为Red）开始时隐藏在Show页面下面，当打开侧边栏时就会显现出来，如上图“抽屉效果”所示；Root页面（设置背景色为yellow）是根视图，我们的Side页面和Show页面都被添加到Root上。

我们借助Xcode工具可以看到3个颜色的视图页面，yellow在最下面，Green在中间，Red在最上面，这和我们上面添加的顺序是一致的。

3层视图页面.png

代码实现

代码很简单， 只需要将两个试图添加到我们的根试图中

-(void)setSideVC:(UIViewController*)side
      andContatinerVC:(UIViewController*)contatin
{
    self.leftVC = side;
    self.mainVC = contatin;
    [self.view addSubview:self.leftVC.view];
    [self addChildViewController:contatin];
    [self.view addSubview:self.mainVC.view];
}

当打开侧边栏，显示隐藏的试图时，移动我们当前显示试图的Frame即可。

- (void)openSide
{
    [UIView beginAnimations:nil context:nil];
    self.mainVC.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1,1);
    self.mainVC.view.center =  CGPointMake([UIScreen mainScreen].bounds.size.width + [UIScreen mainScreen].bounds.size.width * 1 /2 -100, [UIScreen mainScreen].bounds.size.height / 2);
    [UIView commitAnimations];
    
//    [UIView animateWithDuration:1.5 animations:^{
//        self.mainVC.view.frame = CGRectMake([UIScreen mainScreen].bounds.size.width -100, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);  
//    }];
}

关闭侧边栏时将我们的当前显示的视图Frame改会原来的值。

-(void)closeSide
{
    [UIView beginAnimations:nil context:nil];
    self.mainVC.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1.0,1.0);
    self.mainVC.view.center = CGPointMake([UIScreen mainScreen].bounds.size.width / 2, [UIScreen mainScreen].bounds.size.height / 2);
    [UIView commitAnimations];
}

最后我将代码上传到GitHub，给需要参考的同学看看。
抽屉效果

错误实例

展示一种容易犯的错误示例，在添加显示视图到Root中时容易将代码写成

rvc = [[RightVc alloc] init];
    UINavigationController *nvc = [[UINavigationController alloc] initWithRootViewController:rvc];
    [self addChildViewController:nvc];
    [self.view addSubview:rvc.view];

结果就会发现不管怎么样都不会显示导航栏

错误代码效果.png

错误的原因代码是这一句

  [self.view addSubview:rvc.view];

正确的应该是

[self.view addSubview:nvc.view];

同时也需要注意将openSide和closeSide方法中的对应的rvc.view改为nvc.view

我把错误的是否代码也上传到GitHub。