美文网首页
用 MMDrawerController 制作抽屉效果

用 MMDrawerController 制作抽屉效果

作者: 小冰山口 | 来源:发表于2016-10-09 08:20 被阅读0次

    本人有若干成套学习视频, 可试看! 可试看! 可试看, 重要的事情说三遍 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.

    MMDrawerController是一个封装好的简易制作抽屉效果的第三方框架, 简单说下导入该框架后的使用步骤

    • 用 center以及 left/right 初始化 drawerController
      • 初始化中间的控制器center
      • 初始化左右两边的控制器(可以按需求任选其一)left/right
    • 给 drawerController设置属性
      • 抽屉打开的幅度
      • 抽屉打开和关闭的手势

    具体的实现代码如下

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        
        // -------- 初始化中间控制器 --------
        UIStoryboard *board = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
        
        UIViewController *viewController = [board instantiateViewControllerWithIdentifier:@"ViewController"];
        
        UINavigationController *navi = [[UINavigationController alloc]initWithRootViewController:viewController];
        
        // -------- 初始化左控制器 --------
        
        _leftTableVC = [board instantiateViewControllerWithIdentifier:@"LeftTableViewController"];
        
        UINavigationController *tableNavi = [[UINavigationController alloc]initWithRootViewController:_leftTableVC];
        
        // -------- 最后, 用中间控制器和左控制器初始化最大的 drawerController --------
        MMDrawerController *drawerController = [[MMDrawerController alloc]initWithCenterViewController:navi leftDrawerViewController:tableNavi];
        drawerController.showsShadow = YES;
        
        _leftTableVC.widthBlock = ^(CGFloat width){
            
            [UIView animateWithDuration:0.5 animations:^{
                // -------- 设置drawerController的属性 --------
                drawerController.maximumLeftDrawerWidth = width;
            }];
        };
        
        // -------- 设置drawerController的属性 --------
        drawerController.openDrawerGestureModeMask = MMOpenDrawerGestureModeAll;
        drawerController.closeDrawerGestureModeMask = MMCloseDrawerGestureModeAll;
        
        // -------- 设为窗口的根控制器 --------
        self.window.rootViewController = drawerController;
        return YES;
    }
    
    

    可以看到的是, 我在设置抽屉宽度的属性的时候, 用的是 block, 模拟我在左控制器中拿到宽度的值之后, 用 block 回调来更新抽屉的宽度(自从用了几次 block 之后,发现超好用, 简直不能停了), 具体实现代码如下:

    • 左控制器设置一个公开的 block 属性,方便赋值
    #import <UIKit/UIKit.h>
    
    @interface LeftTableViewController : UITableViewController
    
    @property (nonatomic,copy)void (^widthBlock)(CGFloat width);
    
    @end
    
    • 在左控制器中获取抽屉宽度的值, 并完成 block 回调
    #import "LeftTableViewController.h"
    
    @interface LeftTableViewController ()
    
    
    /* 数据展示 */
    @property (nonatomic,strong) NSArray *dataArray;
    @end
    
    @implementation LeftTableViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        CGFloat width = [UIScreen mainScreen].bounds.size.width;
        
        self.dataArray = @[@{@"showTableData":@"with = 0.8 * 屏宽",@"width":@(0.8 * width)},
                           @{@"showTableData":@"with = 0.7 * 屏宽",@"width":@(0.7 * width)},
                           @{@"showTableData":@"with = 0.6 * 屏宽",@"width":@(0.6 * width)},
                           @{@"showTableData":@"with = 0.5 * 屏宽",@"width":@(0.5 * width)},
                           @{@"showTableData":@"with = 0.4 * 屏宽",@"width":@(0.4 * width)},
                           ];
    }
    
    #pragma mark *** Table view data source ***
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
        return self.dataArray.count;
    }
    
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"LeftTableViewControllerCell" forIndexPath:indexPath];
        
        cell.textLabel.text = self.dataArray[indexPath.row][@"showTableData"];
        return cell;
    }
    
    #pragma mark *** Table view delegate ***
    
        // -------- 在代理方法里传值给 block 完成回调 --------
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {                                        
        CGFloat width = [self.dataArray[indexPath.row][@"width"] doubleValue];
        self.widthBlock(width);
    }
    
    @end
    

    让我们来看一下具体的实现效果

    用第三方框架实现抽屉效果

    PS. 本人有若干成套学习视频, 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.

    相关文章

      网友评论

          本文标题:用 MMDrawerController 制作抽屉效果

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