iOS 抽屉效果

作者: Hardy_Hu | 来源:发表于2017-06-08 16:28 被阅读148次

效果图

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


抽屉效果.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

相关文章

  • iOS 抽屉效果

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

  • iOS 抽屉效果

    抽屉效果思路: 三个View叠加,一个作为左View,一个作为右View,一个主View,在主View上添加拖动手...

  • iOS抽屉效果

    我们在用QQ时都会发现,消息列表向左滑动时,左侧的功能界面被显示出来,消息列表会拉到最右侧, 就像一个抽屉拉出来一...

  • ios抽屉效果

    #import @interfaceDragViewController :UIViewController @p...

  • iOS 抽屉效果 ViewDeck

    抽屉效果目前比较有名的有第三方RESideMenu和MMDrawerController。但是项目要求抽屉效果为拉...

  • iOS抽屉效果封装

    一个简单的抽屉效果,简单实用!整体思路:主要是在控制器的View上添加了两个View,一个左侧leftView和一...

  • iOS笔记--抽屉效果

  • iOS开发-抽屉效果

    抽屉效果以前比较多,现在看到的比较少,手Q和今日头条现在侧边滑动通过抽屉的方式实现,关于第三方的抽屉效果有很多,稍...

  • iOS 仿QQ抽屉效果

    效果演示:效果图代码结构 项目地址:https://github.com/douxindong/Drawer-QQ...

  • iOS 侧滑抽屉效果

    项目改版新需求要求实现类似QQ侧滑效果。 讲下思路:1.使用一个UIViewController作为容器(Demo...

网友评论

    本文标题:iOS 抽屉效果

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