抽屜效果

一.RESideMenu

現(xiàn)在大多App的主框架都是UITabBarController加若干導(dǎo)航控制器或者是帶有抽屜效果的框架,抽屜效果最明顯的運(yùn)用就是在QQ上,之前項(xiàng)目中運(yùn)用到抽屜效果,運(yùn)用的是Git上的一個(gè)第三方庫RESideMenu(6000多star),當(dāng)時(shí)沒有太多的時(shí)間去研究其內(nèi)部代碼,如今有了點(diǎn)時(shí)間就研究了一下其內(nèi)部實(shí)現(xiàn),自己寫了一個(gè)簡單的demo.抽屜效果的實(shí)現(xiàn)看似簡單,感覺加上兩個(gè)手勢就可以搞定,其實(shí)其內(nèi)部實(shí)現(xiàn)是比較麻煩的,自己寫的demo也只是簡單實(shí)現(xiàn)了一下效果,遠(yuǎn)不及RESideMenu那樣封裝的出色.RESideMenu方便快捷,個(gè)人感覺封裝的極好.而且作者在Examples中提供了兩套解決方案,一套純代碼,一套StoryBoard,適用于不同情況的開發(fā)者.[RESideMenu下載地址]
(https://github.com/romaonthego/RESideMenu.git)

RESideMenu示例.gif

二.MYDemo

自己寫的小示例的整體思想是創(chuàng)建一個(gè)MenuController,在這個(gè)菜單控制器上添加一個(gè)左側(cè)菜單視圖和一個(gè)根視圖(MenController引用兩個(gè)控制器,取它們視圖添加到自己的view上,這樣方便把事件分模塊處理,特別是左側(cè)菜單控制器),在根視圖上添加左右滑動(dòng)的手勢(此處用的是UISwipeGestureRecognizer輕掃手勢,而RESideMenu用的是拖動(dòng)手勢UIPanGestureRecognizer,輕掃手勢一次勢觸發(fā)改變菜單視圖和根視圖frame的方法,而拖動(dòng)手勢可以連續(xù)實(shí)時(shí)拖動(dòng),觸發(fā)其改變frame的方法,它觸發(fā)變frame的方法代碼就有150多行,他是根據(jù)偏移量判斷拖動(dòng)的方向和狀態(tài),邏輯比較復(fù)雜,而我用的輕掃手勢觸發(fā)的改變frame的方法僅僅是一次性改變,沒有連續(xù)拖動(dòng)的效果,只實(shí)現(xiàn)了一個(gè)簡單的抽屜效果)

  • 創(chuàng)建MenuController類
    MenuController .h文件
    @interface MenuViewController : UIViewController
    /// 左側(cè)抽屜控制器
    @property (nonatomic, strong) UIViewController *leftVC;
    /// 根視圖控制器
    @property (nonatomic, strong) UIViewController *rootVC;
    /// 記錄是否打開抽屜,默認(rèn)是關(guān)閉
    @property (nonatomic, assign) BOOL isDisplayMenu;

    ///  根視圖控制器的初始化方法
- (instancetype)initWithRootViewController:(UIViewController *)controller;
@end

MenuController .m文件
#import "MenuViewController.h"

   @interface MenuViewController ()
  //向左輕掃手勢
  @property (nonatomic, strong) UISwipeGestureRecognizer *leftSwipe;
  //向右輕掃手勢
  @property (nonatomic, strong) UISwipeGestureRecognizer *rightSwipe;
  @end

  @implementation MenuViewController

   ///  根視圖控制器的初始化方法
  -(instancetype)initWithRootViewController:(UIViewController *)controller
  {
      if (self = [super init]) {
      self.rootVC = controller;
  }
        return self;
   }

  - (void)viewDidLoad {
      [super viewDidLoad];

  }

    #pragma mark 設(shè)置導(dǎo)航欄控制器左側(cè)按鈕

      ///  rootVC根控制器是導(dǎo)航欄控制器的時(shí)候才能設(shè)置 所以要加上判讀
     - (void)setLeftBarButton{
           if (self.rootVC == nil) {
    return;
    }
      //判斷根控制器是否為導(dǎo)航控制器 因?yàn)橹挥袑?dǎo)航控制器才有navigationBar
       if ([self.rootVC isKindOfClass:[UINavigationController class]]) {
           UIBarButtonItem *leftBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"bianji"] style:UIBarButtonItemStylePlain target:self action:@selector(leftBarbuttonAction:)];
    
           UINavigationController *naVC =(UINavigationController *) self.rootVC;
           naVC.navigationBar.tintColor = [UIColor lightGrayColor];
           //取出導(dǎo)航控制器管理的控制器數(shù)組中第一個(gè)控制器
           UIViewController *firstVC = [[naVC viewControllers]objectAtIndex:0];
           firstVC.navigationItem.leftBarButtonItem = leftBarButtonItem;
    
    }
  }

     #pragma mark 導(dǎo)航欄左側(cè)菜單按鈕點(diǎn)擊事件

    - (void)leftBarbuttonAction:(UIBarButtonItem *)button{
       //先判斷當(dāng)前狀態(tài)是打開還是關(guān)閉
       if (self.isDisplayMenu) {
           [self hiddenLeftMenu];
       }else{
           [self showLeftMenu];
       }
   }

   #pragma mark setter && getter

   - (UISwipeGestureRecognizer *)leftSwipe
   {
       if (_leftSwipe == nil) {
           _leftSwipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self        action:@selector(leftAction:)];
            _leftSwipe.direction = UISwipeGestureRecognizerDirectionLeft;
        }
       return _leftSwipe;
    }

    - (UISwipeGestureRecognizer *)rightSwipe
   {
       if (_rightSwipe == nil) {
           _rightSwipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self     action:@selector(rightAction:)];
           }
          return _rightSwipe;
   }

   - (void)setLeftVC:(UIViewController *)leftVC
   {
       _leftVC = leftVC;
   }

   - (void)setRootVC:(UIViewController *)rootVC
   {
       _rootVC = rootVC;
       if (_rootVC) {
            //取出根視圖控制器視圖 添加到MenuViewVC的view上
           UIView *view = rootVC.view;
           view.frame = self.view.bounds;
           [self.view addSubview:view];
    
           //添加左右手勢
          [view addGestureRecognizer:self.leftSwipe];
          [view addGestureRecognizer:self.rightSwipe];
    
           //設(shè)置導(dǎo)航欄左側(cè)按鈕
           [self setLeftBarButton];
     }
   }

  #pragma mark 手勢回調(diào)方法

   - (void)leftAction:(UISwipeGestureRecognizer *)left{
      [self hiddenLeftMenu];
    }

  - (void)rightAction:(UISwipeGestureRecognizer *)right{
       [self showLeftMenu];
   }

    #pragma mark 顯示和隱藏左側(cè)菜單

   ///  顯示左側(cè)菜單
  - (void)showLeftMenu{
     //拿到左側(cè)控制器視圖
     UIView *leftView = self.leftVC.view;
     CGRect frame = self.view.frame;
     frame.size.width = 100;
     //設(shè)置菜單的大小 寬度100
     leftView.frame = frame;

     [self.view insertSubview:leftView atIndex:0];

      //移動(dòng)菜單的根視圖
      frame = _rootVC.view.frame;
      frame.origin.x = 100;
      [UIView animateWithDuration:0.5 animations:^{
           _rootVC.view.frame = frame;
          self.isDisplayMenu = YES;
      }];
   }

  ///  隱藏左側(cè)菜單
  - (void)hiddenLeftMenu{
       CGRect frame = _rootVC.view.frame;
      frame.origin.x = 0;
      [UIView animateWithDuration:0.5 animations:^{
          _rootVC.view.frame = frame;
         self.isDisplayMenu = NO;
      }];
  }

  • 創(chuàng)建LeftViewController左側(cè)菜單類
    LeftViewController .h文件
    #import <UIKit/UIKit.h>

      @interface LeftViewController : UIViewController
  ///  標(biāo)題數(shù)組
  @property (nonatomic, strong) NSMutableArray *leftTitleArray;
  ///  控制器數(shù)組
  @property (nonatomic, strong) NSMutableArray *viewControllers;
  @end

LeftViewController .m文件
#import "LeftViewController.h"
#import "AppDelegate.h"
static NSString *reuseID = @"cell";

    @interface LeftViewController ()<UITableViewDelegate,UITableViewDataSource>
    @property (nonatomic, strong) UITableView *tableView;
    @end

    @implementation LeftViewController

   - (void)viewDidLoad {
       [super viewDidLoad];
       [self prepareForTableView];
   }

   - (void)prepareForTableView{
         CGRect frame = self.view.bounds;
         frame.origin.y = 64;
         self.tableView.frame = frame;
         self.tableView.delegate = self;
         self.tableView.dataSource = self;
         self.tableView.backgroundColor = [UIColor lightGrayColor];
        [self.view addSubview:self.tableView];
        [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:reuseID];
  }

    #pragma mark - UItabelViewDelegate && DataSource

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section
     {
         return self.leftTitleArray.count;
     }

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
         UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseID  forIndexPath:indexPath];
         cell.textLabel.text = self.leftTitleArray[indexPath.row];
         return cell;
    }

    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
            //判斷控制器數(shù)組是否存在 并且個(gè)數(shù)是否與標(biāo)題個(gè)數(shù)一致
           if (self.viewControllers && self.leftTitleArray.count == self.viewControllers.count) {
                 AppDelegate *appDelegate = [[UIApplication sharedApplication] delegate];
                 //取到根視圖控制器
                 MenuViewController *menuVC = appDelegate.menuVC;
                 menuVC.isDisplayMenu = NO;
                 UINavigationController *naVC = [[UINavigationController   alloc]initWithRootViewController:self.viewControllers[indexPath.row]];
                //重新設(shè)置菜單控制器的根控制器
                [menuVC setRootVC:naVC];
              }
       }

    - (UITableView *)tableView
       {
              if (_tableView == nil) {
               _tableView = [[UITableView alloc]init];
        }
           return _tableView;
       }

  • 至此關(guān)于抽屜效果的兩個(gè)類完成了,在APPDelegate中引用
    AppDelegate.h文件
    #import <UIKit/UIKit.h>
    #import "MenuViewController.h"

    @interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property (nonatomic, strong) MenuViewController *menuVC;

@end

AppDelegate.m文件
#import "AppDelegate.h"
#import "MenuViewController.h"
#import "LeftViewController.h"
@interface AppDelegate ()

  @end

  @implementation AppDelegate

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:     (NSDictionary *)launchOptions {
        self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
        UITableViewController *tableVC = [[UITableViewController alloc]init];
        UINavigationController *naVC = [[UINavigationController  alloc]initWithRootViewController:tableVC];
        //設(shè)置菜單控制器根控制器
        self.menuVC = [[MenuViewController alloc]initWithRootViewController:naVC];
        //設(shè)置菜單控制器的左側(cè)控制器
        LeftViewController *leftVC = [[LeftViewController alloc]init];
        leftVC.leftTitleArray = [NSMutableArray arrayWithObjects:@"個(gè)人",@"共享", nil];
        UIViewController *firstVC = [[UIViewController alloc]init];
        firstVC.view.backgroundColor = [UIColor brownColor];
        UIViewController *secondVC = [[UIViewController alloc]init];
        secondVC.view.backgroundColor = [UIColor orangeColor];
        leftVC.viewControllers = [NSMutableArray arrayWithObjects:firstVC,secondVC, nil];
        _menuVC.leftVC = leftVC;
        leftVC.view.backgroundColor = [UIColor grayColor];
        //設(shè)置window的根控制器為菜單控制器
        self.window.rootViewController = _menuVC;
        [self.window makeKeyAndVisible];
        return YES;
    }
Mydemo.gif
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 先看下效果 1:新建一個(gè)項(xiàng)目,名字隨便起,在項(xiàng)目下新建一個(gè)實(shí)體文件夾,這個(gè)文件件就是存放封裝好的抽屜效果類(只有兩...
    qiongyong閱讀 808評論 2贊 0
  • 思路：跟控制器（rootVc）添加子控制器(下面三個(gè))的view在跟控制器的 view 上面。（注意三個(gè)子控制器的...
    碼農(nóng)耕閱讀 405評論 0贊 0
  • *7月8日上午 N:Block ：跟一個(gè)函數(shù)塊差不多，會(huì)對里面所有的內(nèi)容的引用計(jì)數(shù)+1，想要解決就用__block...
    炙冰閱讀 2,737評論 1贊 14
  • 原來我們也可以打開任督二脈了！快來學(xué)習(xí) 打開任督二脈，我們都在武俠小說中見過。一般情況下打開任督二脈之后，真氣就會(huì)...
    DABO_ce35閱讀 277評論 0贊 0
  • 哲思·當(dāng)代年輕人的撕扯人生：一邊是雞湯，一邊是毒藥 作者：甘球 《新周刊》曾經(jīng)有過一期主題叫“中產(chǎn)階層的撕扯人生”...
    簡黛玉閱讀 9,795評論 8贊 146

友情鏈接更多精彩內(nèi)容