ios开发-3D折叠菜单的简单实现

在Github看到一个老外写的一个3D折叠效果的侧滑菜单demo，效果很不错，想收藏起来为以后项目开发所用。老外的demo是Swift版的，趁最近比较有时间安静下来学习，于是，我决定把它封装成OC版的。

---

先看看效果

LeftMenuGif.gif

---

原理

1、使用storyboard来创建整个UI框架，能比较直观地看到这个结构其实很简单

UI框架.png

---

2、主要由左侧列表控制器MenuViewController 和右边的内容控制器DetailViewController构成，这两个控制器分别接上一个导航控制器后分别连到ContainerviewController上。

• 下面是ContainerviewController视图布局，通过scrollView作为容器来操作左右滑动
  主视图.png
• scrollView记得打开PagingEnabled

PagingEnabled

• 其中右边的Container宽度为屏幕的宽度，这样就能通过左右滑动改变scrollView的contentOffset值来显示或者隐藏左边的菜单

ContainerviewController.png

代码（部分关键代码）

1、ContainerViewController.m

在storyboard里面拖出scrollview和左边的menuContainerView这个两个属性，在viewDidLayoutSubviews里面设置menuContainerView的anchorPoint

-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    
    self.menuContainView.layer.anchorPoint = CGPointMake(1.0, 0.5);
    
    [self hideOrShowMenu:NO animated:NO]; //初始化为隐藏菜单

}

控制menuContainerView展开或者隐藏，并且在上面的viewDidLayoutSubviews方法里面初始化为隐藏状态

- (void)hideOrShowMenu:(BOOL)isShow animated:(BOOL)isAnimated
{
    CGFloat xOffset = CGRectGetWidth(self.menuContainView.bounds);

    CGPoint contentOffset = isShow?CGPointZero:CGPointMake(xOffset, 0);
    
    //通过设置contentOffset来隐藏或者显示菜单
    [self.scorllView setContentOffset:contentOffset animated:isAnimated];

    _isShow = isShow;

}

在scrollView的scrollViewDidScroll代理方法里面设置左右滑动的判断以及3D效果

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    
    CGFloat multiplier = 1.0 / CGRectGetWidth(self.menuContainView.bounds);
    
    CGFloat offset = scrollView.contentOffset.x * multiplier;
    
    CGFloat fraction = 1.0 - offset;

    self.menuContainView.layer.transform = [self transformForFraction:fraction];
    
    self.menuContainView.alpha = fraction;
    

    HamburgerView *rotatingView = (HamburgerView *)_detailVC.hamburger;
    
    [rotatingView rotateWithFraction:fraction];
    
    scrollView.pagingEnabled = scrollView.contentOffset.x < (scrollView.contentSize.width - CGRectGetWidth(scrollView.frame));
    
    CGFloat menuOffset = CGRectGetWidth(self.menuContainView.bounds);
    
    _isShow = !CGPointEqualToPoint(CGPointMake(menuOffset, 0), scrollView.contentOffset);
    
}

- (CATransform3D)transformForFraction:(CGFloat)fraction
{
    
    CATransform3D identity = CATransform3DIdentity;
    
    identity.m34 = -1.0 / 1000.0;
    
    double angle = (1.0 - fraction) * -M_PI_2;
    
    CGFloat xOffset = CGRectGetWidth(self.menuContainView.bounds) * 0.5;
    
    CATransform3D rotateTransform = CATransform3DRotate(identity, angle, 0.0, 1.0, 0.0);
    
    CATransform3D translateTransform = CATransform3DMakeTranslation(xOffset, 0.0, 0.0);
    
    return CATransform3DConcat(rotateTransform, translateTransform);
    
}

2、MenuViewController.m

这是菜单tableview控制器，主要控制菜单每一项的背景图片和颜色以及点击事件

///加载plist文件中的数据资源
- (void)viewDidLoad {
    [super viewDidLoad];
 
    NSString *path = [[NSBundle mainBundle]pathForResource:@"MenuItems" ofType:@"plist"];
    
    _dataArray = [NSArray arrayWithContentsOfFile:path];
    
}

///tableViewCell点击响应，这里用通知的方法来通知detailView控制器
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    
    NSDictionary *dict = _dataArray[indexPath.row];
    
    [[NSNotificationCenter defaultCenter]postNotificationName:@"KCallToShowInDetailViewNotification" object:dict];
}

3、HamburgerView.m

展开菜单的点击按钮，这里叫‘汉堡包’，哈。这个view里面需要创建一个imageView视图，还需要一个控制imageView旋转的方法，如下, （这个方法在scrollViewDidScroll中会调用到）

- (void)rotateWithFraction:(CGFloat)fraction
{
    CGFloat angle = fraction * M_PI_2;
    _imageView.transform = CGAffineTransformMakeRotation(angle);
}

小结

小结一下：这个侧滑菜单的demo，个人感觉效果还可以，灵活运用scrollview的特性，实现起来也不复杂，以后的项目中可以参照这种UI框架来实现该功能。
附上项目代码：
老外的demo：https://github.com/chris-pilcher/3D-Sidebar-Animation
我的demo：https://github.com/RanYeee/RNLeftSildeMenu

*请各位大神多多指导！