iOS中SideMenu侧边栏的实现,简易速成

iOS中SideMenu侧边栏的实现,简易速成

卤煮一时心血来潮,想实现个类似QQ那种侧边栏的效果,基于卤煮一向懒惰的天性,想急于实现效果又不想动脑筋使用系统的框架去实现,于是开始各种百度,结果却大失所望,不得已卤煮开始去找优秀的demo来研究了,这里卤煮推荐一下MMDrawerController这个框架,卤煮有时间会去研究一下框架,但是现在我们来切入正题,简易速成的实现我们想要的效果:

1.首先我们先导入下系统的框架
这里写图片描述

2.第二步,再导入一下MMDrawerController这个框架,可以去github搜索,搜索不到的可以联系卤煮发给你

3.第三步,咋们来到AppDelegate.m文件中 #import这几个类:

#import "RootTabbarController.h"
#import "MMDrawerController.h"
#import "MMDrawerVisualState.h"
#import <QuartzCore/QuartzCore.h>
#import "LeftSettingVC.h"  //左侧弹出的控制器

接着便来实现根视图的切换,由于此框架已经帮我们实现了根试图的设置,所以我们只需要简单地写下如下几行代码便可:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    LeftSettingVC *leftSideVC = [[LeftSettingVC alloc] init];
    UINavigationController *leftNav  = [[UINavigationController alloc] initWithRootViewController:leftSideVC];

    self.drawerController = [[MMDrawerController alloc] initWithCenterViewController:[RootTabbarController new] leftDrawerViewController:leftNav];

    [self.drawerController setShowsShadow:NO];
    [self.drawerController setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeAll];
    [self.drawerController setCloseDrawerGestureModeMask:MMCloseDrawerGestureModeAll];

        self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
        self.window.backgroundColor = [UIColor whiteColor];
        self.window.rootViewController = self.drawerController;
        [self.window makeKeyAndVisible];
    return YES;
}

4.根试图的切换码好了,你会发现当你左滑时,已经可以实现侧边栏的效果了,然后我们想要的效果还是没有实现,当点击RootTabbarController的子视图控制器的barItem时实现侧边栏的切换效果,好,我们来到RootTabbarController的子视图控制器中导入如下几个类:

#import "LeftSettingVC.h"
#import "MMDrawerBarButtonItem.h"
#import "UIViewController+MMDrawerController.h"

接着在navigationBarItem的点击事件中,只需要写下如下一行代码:

[self.mm_drawerController toggleDrawerSide:MMDrawerSideLeft animated:YES completion:nil];

此时,哦凑,你会发现你想要的效果已经实现一大半了,可以点击弹出侧边栏了,也可以滑动出现侧边栏了,但是还没完,还有一步。

5.你可以看看QQ的实现效果,但你点击左侧边栏中得cell时,它会跳到一个新的视图控制器,而这个控制器也是可以滑动返回,点击返回的,而且在返回的瞬间,你会发现侧边栏效果的中间的根视图瞬间被切换了,那这个我们要怎么实现呢,其实很简单,我们来到LeftSettingVC中,导入如下的类:

#import "RightVC.h"//点击cell时出现的其他页面,可以任由我们自定义的
#import "UIViewController+MMDrawerController.h"

然后在tableView的didSelectRow方法中,写下如下的代码:

 RightVC *right = [[RightVC alloc] init];
   UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:right];
    [self.mm_drawerController setCenterViewController:nav withCloseAnimation:YES completion:nil];

这时候点击左侧边栏的cell所出现的页面已经可以出现了,然而咋们的RightVC的返回还没有写,好,继续码:
来到RightVC中,导入如下几个类:

#import "MMDrawerBarButtonItem.h"
#import "RootTabbarController.h"
#import "UIViewController+MMDrawerController.h"

在这里我要插一句,这个框架呢是有一个已经设置好的icon图标的,也就是Navigation的BarItem,但我们最好还是使用自定义的,因为我发现它的icon并不能完全适配我们自己的项目,这里我就将代码一块儿码下:

- (void)setUpNavigation{

    MMDrawerBarButtonItem  *leftBarItem = [[MMDrawerBarButtonItem alloc] initWithTarget:self action:@selector(back)];//也就是这句,如果是我的话 ,我会使用自定义的UIBarButtonItem *leftBarItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"399-list1"] style:UIBarButtonItemStyleDone target:self action:@selector(back)];

    leftBarItem.tintColor = [UIColor whiteColor];
    [self addNavigationWithTitle:@"设置" leftItem:leftBarItem rightItem:nil titleView:nil]; //这是我自定义的方法,层煮们按自己的方法设置navigation即可

}
//主要就是这个点击事件中的视图的切换
- (void)back{  
    RootTabbarController *rootTab = [RootTabbarController new];
//记住以下两段代码的顺序不能颠倒,否则将会瞬间切换视图,无法回弹到左侧边栏的控制器
    [self.mm_drawerController toggleDrawerSide:MMDrawerSideLeft animated:YES completion:nil];
    [self.mm_drawerController setCenterViewController:rootTab withCloseAnimation:YES completion:nil];
}

其实借助三方框架实现侧边栏就是这么简单,主要是网上逛了一圈都是一样的没有实质性的解决问题的,都是转来转去难懂,甚至敷衍的办法,譬如卤煮看到的某一篇个人工具类放进去说是要导入的三方框架,气的卤煮差点没砸电脑。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值