• iOS MMDrawerController源码解读(一)


      提前说好,本文绝对不是教你如何使用MMDrawerController这个第三方库,因为那太多人写了 ,也太简单了。这篇文章主要带你分析MMDrawerController是怎么实现抽屉效果,明白第三方库的内部原理。例外,本人也封装了一个FHSegmentControl的第三方库,欢迎大家去看看啊。

    1.MMDrawerController的实例化方法

      先明确几个变量的意义。

    // 中央控制器
    @property (nonatomic, strong) UIViewController * centerViewController;
    // 左侧控制器、右侧控制器,统称侧边控制器
    @property (nonatomic, strong) UIViewController * leftDrawerViewController;
    @property (nonatomic, strong) UIViewController * rightDrawerViewController;
    

    我分析第三方库,都是从实例化方法开始的。那么多类,方法更多,必须有一个开始。从实例化方法开始,可以找出作者的思考方式,这里也就是怎么实现抽屉效果的。

    //  1.
    -(instancetype)initWithCenterViewController:(UIViewController *)centerViewController leftDrawerViewController:(UIViewController *)leftDrawerViewController rightDrawerViewController:(UIViewController *)rightDrawerViewController{
        NSParameterAssert(centerViewController);
        self = [super init];
        if(self){
            [self setCenterViewController:centerViewController];
            [self setLeftDrawerViewController:leftDrawerViewController];
            [self setRightDrawerViewController:rightDrawerViewController];
        }
        return self;
    }
    // 2.
    -(instancetype)initWithCenterViewController:(UIViewController *)centerViewController leftDrawerViewController:(UIViewController *)leftDrawerViewController{
        return [self initWithCenterViewController:centerViewController leftDrawerViewController:leftDrawerViewController rightDrawerViewController:nil];
    }
    //3.
    -(instancetype)initWithCenterViewController:(UIViewController *)centerViewController rightDrawerViewController:(UIViewController *)rightDrawerViewController{
        return [self initWithCenterViewController:centerViewController leftDrawerViewController:nil rightDrawerViewController:rightDrawerViewController];
    }
    

      一共有3个实例方法,第2.3个实例方法,最后都得调用第1个实例方法,所以我们只要分析第1个实例方法就可以了。第一个实例方法调用了三个方法。

        // 4
        [self setCenterViewController:centerViewController];
        // 5
        [self setLeftDrawerViewController:leftDrawerViewController];
        // 6
        [self setRightDrawerViewController:rightDrawerViewController];
    

      我们先看第5、6个方法。

    -(void)setRightDrawerViewController:(UIViewController *)rightDrawerViewController{
       [self setDrawerViewController:rightDrawerViewController forSide:MMDrawerSideRight];
    }
    
    -(void)setLeftDrawerViewController:(UIViewController *)leftDrawerViewController{
       [self setDrawerViewController:leftDrawerViewController forSide:MMDrawerSideLeft];
    }
    

      这两个方法其实都是调用了同一个方法:

    - (void)setDrawerViewController:(UIViewController *)viewController forSide:(MMDrawerSide)drawerSide;
    

    综上所述,我们要明白MMDrawerController是怎样创建的,只要明白下面的两个方法就可以了,顿时感觉工作量少了很多有没有。

    // 1.添加中央控制器
    -(void)setCenterViewController:(UIViewController *)centerViewController;
    // 2.添加左右两边的控制器
    - (void)setDrawerViewController:(UIViewController *)viewController forSide:(MMDrawerSide)drawerSide;
    

    2.添加中央控制器

    // 1.
    -(void)setCenterViewController:(UIViewController *)centerViewController{
        [self setCenterViewController:centerViewController animated:NO];
    }
    //2.直接看这个方法就好了,因为第一个方法也是调用这个方法
    -(void)setCenterViewController:(UIViewController *)centerViewController animated:(BOOL)animated{
        // 如果将要添加的中央控制器和原来的一样,就不要再添加了
        // self.centerViewController 已经添加的中央内容控制器。第一次实例化,为nil。
       if ([self.centerViewController isEqual:centerViewController]) {
           
            return;
        }
      // 添加中央内容视图,也就是:往self.childControllerContainerView上添加self.centerContainerView
      if (_centerContainerView == nil) {
         // self.childControllerContainerView 是一个添加在self.view 上面和self.view位置和大小一样的UIView。
        CGRect centerFrame = self.childControllerContainerView.bounds;
        if(self.centerContainerView == nil){
            // MMDrawerCenterContainerView 先当做UIView,后面在慢慢分析
            self.centerContainerView = [[MMDrawerCenterContainerView alloc] initWithFrame:centerFrame];
            [self.centerContainerView setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];
            [self.centerContainerView setBackgroundColor:[UIColor clearColor]];
            //开始时: self.openSide = MMDrawerSideNone;因为我们实例化的时候,并没有展示左右边两边的抽屉视图
            [self.centerContainerView setOpenSide:self.openSide];
            //开始时: self.centerHiddenInteractionMode = MMDrawerOpenCenterInteractionModeNavigationBarOnly;设置响应模式
            [self.centerContainerView setCenterInteractionMode:MMDrawerOpenCenterInteractionModeNone];
            [self.childControllerContainerView addSubview:self.centerContainerView];
        }
      }
        // 因为要添加新的中央控制器,如果旧的存在,就要删除
        UIViewController * oldCenterViewController = self.centerViewController;
        if(oldCenterViewController){
            [oldCenterViewController willMoveToParentViewController:nil];
            if(animated == NO){
                [oldCenterViewController beginAppearanceTransition:NO animated:NO];
            }
            [oldCenterViewController.view removeFromSuperview];
            if(animated == NO){
                [oldCenterViewController endAppearanceTransition];
            }
            [oldCenterViewController removeFromParentViewController];
        }
        // 添加新的中央控制器
        _centerViewController = centerViewController;
        [self addChildViewController:self.centerViewController];
        [self.centerViewController.view setFrame:self.childControllerContainerView.bounds];
        [self.centerContainerView addSubview:self.centerViewController.view];
        // 把中央视图放在子视图容器最前面
        [self.childControllerContainerView bringSubviewToFront:self.centerContainerView];
        [self.centerViewController.view setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];
        // 设置阴影,以后讲
        [self updateShadowForCenterView];
        
        if(animated == NO){
           // 实例化的时候,这个方法不走
           // self.view.window 是判断是否添加到了手机屏幕上,也就是keyWindow上。
            if(self.view.window) {
                [self.centerViewController beginAppearanceTransition:YES animated:NO];
                [self.centerViewController endAppearanceTransition];
            }
            //告诉系统有一个视图控制器从容器中添加或者移除
            [self.centerViewController didMoveToParentViewController:self];
        }
    }
    

      其实这里一共有四个View,这四个View的大小和位置都是一样的。self 是MMDrawerController 的对象。它们的层级结构就是:
    self.view -> self.childControllerContainerView ->self.centerContainerView -> self.centerViewController.view。中央控制器的view在最上面,运行APP的时候,最先看到。

    3.添加侧边控制器

    - (void)setDrawerViewController:(UIViewController *)viewController forSide:(MMDrawerSide)drawerSide{
        // 如果你添加的是中央控制器,程序就会崩溃。因为这个方法只能添加左右两边的控制器。
        NSParameterAssert(drawerSide != MMDrawerSideNone);
        // 这个方法,可以获得当前的左边或右边的控制器
        UIViewController *currentSideViewController = [self sideDrawerViewControllerForSide:drawerSide];
       // 如果和原来的侧边视图控制器相同,就不必添加了
        if (currentSideViewController == viewController) {
            return;
        }
        // 如果原来已经有了侧边视图控制器,移除
        if (currentSideViewController != nil) {
            [currentSideViewController beginAppearanceTransition:NO animated:NO];
            [currentSideViewController.view removeFromSuperview];
            [currentSideViewController endAppearanceTransition];
            [currentSideViewController willMoveToParentViewController:nil];
            [currentSideViewController removeFromParentViewController];
        }
        // 添加新的侧边视图控制器
        // 左边
        UIViewAutoresizing autoResizingMask = 0;
        if (drawerSide == MMDrawerSideLeft) {
            _leftDrawerViewController = viewController;
            autoResizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight;
            
        }
        // 右边
        else if(drawerSide == MMDrawerSideRight){
            _rightDrawerViewController = viewController;
            autoResizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
        }
        // viewController不为空,代表你想添加侧边控制器
        if(viewController){
            [self addChildViewController:viewController];
            // 实例化的时候不走,直接看else里面的方法
            if((self.openSide == drawerSide) &&
               [self.childControllerContainerView.subviews containsObject:self.centerContainerView]){
                [self.childControllerContainerView insertSubview:viewController.view belowSubview:self.centerContainerView];
                [viewController beginAppearanceTransition:YES animated:NO];
                [viewController endAppearanceTransition];
            }
            else{
                // 添加新的侧边控制器
                [self.childControllerContainerView addSubview:viewController.view];
                [self.childControllerContainerView sendSubviewToBack:viewController.view];
                [viewController.view setHidden:YES];
            }
            [viewController didMoveToParentViewController:self];
            [viewController.view setAutoresizingMask:autoResizingMask];
            //侧边栏的最大宽度默认280.
            // H:代表self.view的高,W代表self.view的宽,w代表侧边栏的最大的宽度
            // 左侧视图的frame: (0,0,w,H);右侧视图的frame: (W-w,0,w,H);
            [viewController.view setFrame:viewController.mm_visibleDrawerFrame];
        }
    }
    

    视图控制器的层级.png

    侧边视图的位置和大小.png
      这篇文章介绍了MMDrawerController的实例化方法和各个控制器与视图的层级结构,下篇文章主要讲侧边栏的切换动画。如果喜欢就推荐一下吧!

  • 相关阅读:
    第十二篇 -- 如何向MFC对话框添加菜单
    第十一篇 -- 如何实现MFC窗口的最大化以及控件随最大化
    第二十三篇 -- 学习第二十四天打卡20190715
    第十篇 -- 学习C++宝典2005版
    第二十二篇 -- 学习第二十一天打卡20190711
    修改nginx日志格式为json
    centos7 脚本搭建SVN
    jenkin、SVN、archery集成openLDAP
    centos搭建OPENldap
    matomo 开源网站分析平台
  • 原文地址:https://www.cnblogs.com/doujiangyoutiao/p/6409108.html
Copyright © 2020-2023  润新知