iOS 仿QQ抽屜效果

效果演示:


效果圖

代碼結(jié)構(gòu)
抽屜
XDDrawerViewController.h
XDDrawerViewController.m
左邊
XDLeftMenuTableViewController.h
XDLeftMenuTableViewController.m
使用
 XDmessageViewController.h
 XDmessageViewController.m
//
//  XDDrawerViewController.h
//  仿QQ抽屜效果
//
//  Created by 竇心東 on 16/9/25.
//  Copyright ? 2016年 竇心東. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XDDrawerViewController : UIViewController
/**
 *  快速獲得抽屜控制器
 *
 *  @return shareDrawerVc
 */
+ (instancetype)shareDrawerVc;
/**
 *  快速創(chuàng)建抽屜控制器
 *
 *  @param mainVc     主控制器-UITabBarController
 *  @param leftMenuVc 左邊菜單控制器
 *  @param leftWith 左邊控制器現(xiàn)實(shí)的最大寬度
 *  @return 抽屜控制器
 */
+ (instancetype)drawerVcWithMainVc:(UIViewController *)mainVc leftMenuVc:(UIViewController *)leftMenuVc leftWith:(CGFloat)leftWith;
/**
 *  打開(kāi)左邊控制器方法
 */
- (void)openLeftVc;
/**
 *  切換控制器的方法
 *
 *  @param destVc 目標(biāo)控制器
 */
- (void)switchViewController:(UIViewController *)destVc;
/**
 *  回到主界面
 */
- (void)backHomeViewController;
@end
//
//  XDDrawerViewController.m
//  仿QQ抽屜效果
//
//  Created by 竇心東 on 16/9/25.
//  Copyright ? 2016年 竇心東. All rights reserved.
//

#import "XDDrawerViewController.h"

@interface XDDrawerViewController ()
/**
 *  記錄當(dāng)前正在顯示的VC
 */
@property (nonatomic,strong) UIViewController *showingVc;
/**
 *  遮蓋按鈕
 */
@property (nonatomic,strong) UIButton *coverButton;
//跨方法訪問(wèn)的 要記錄一下屬性
/**
 *  主控制器
 */
@property (nonatomic,strong) UIViewController *mainVc;
/**
 *  左邊控制器
 */
@property (nonatomic,strong) UIViewController *leftMenuVc;
/**
 *  記錄一下左邊菜單控制器最大顯示范圍
 */
@property (nonatomic,assign) CGFloat leftWidth;


@end

@implementation XDDrawerViewController

/**
 *  快速獲得抽屜控制器
 *
 *  @return shareDrawerVc
 */
+ (instancetype)shareDrawerVc{
    return (XDDrawerViewController *)[UIApplication sharedApplication].keyWindow.rootViewController;
}
/**
 *  快速創(chuàng)建抽屜控制器
 *
 *  @param mainVc     主控制器-UITabBarController
 *  @param leftMenuVc 左邊菜單控制器
 *
 *  @return 抽屜控制器
 */
+ (instancetype)drawerVcWithMainVc:(UIViewController *)mainVc leftMenuVc:(UIViewController *)leftMenuVc leftWith:(CGFloat)leftWith{
    //創(chuàng)建抽屜控制器
    XDDrawerViewController *drawerVc = [[XDDrawerViewController alloc] init];
    drawerVc.mainVc = mainVc;
    drawerVc.leftMenuVc = leftMenuVc;
    drawerVc.leftWidth = leftWith;
    //將左邊菜單控制器的view添加到抽屜控制器的view上
    [drawerVc.view addSubview:leftMenuVc.view];
    [drawerVc.view addSubview:mainVc.view];
    //蘋果官方規(guī)定 如果“兩個(gè)控制器的view”互為父子關(guān)系版述,這“兩個(gè)控制器”與也必須互為父子關(guān)系
    [drawerVc addChildViewController:leftMenuVc];
    [drawerVc addChildViewController:mainVc];
    
    return drawerVc;
    
}
/**
 *  打開(kāi)左邊控制器方法
 */
- (void)openLeftVc{
    [UIView animateWithDuration:0.25 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        self.mainVc.view.transform = CGAffineTransformMakeTranslation(self.leftWidth, 0);
        self.leftMenuVc.view.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
        //在滑倒右邊的mainVC主控制器view上邊添加一個(gè) “遮蓋按鈕”
        [self.mainVc.view addSubview:self.coverButton];
    }];
    
}
/**
 *  關(guān)閉左邊控制器方法
 */
- (void)covreButtonClick{
    [UIView animateWithDuration:0.25 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        /**
         *  清空踢代,還原view的transform
         */
        self.mainVc.view.transform = CGAffineTransformIdentity;
        self.leftMenuVc.view.transform = CGAffineTransformMakeTranslation(-self.leftWidth, 0);
    } completion:^(BOOL finished) {
        //在滑倒右邊的mainVC主控制器view上邊去除一個(gè) “遮蓋按鈕”
        [self.coverButton removeFromSuperview];
        self.coverButton = nil;
    }];
}
/**
 *  切換控制器的方法  切換到指定的控制器
 *
 *  @param destVc 目標(biāo)控制器
 */
- (void)switchViewController:(UIViewController *)destVc{
    destVc.view.frame = self.mainVc.view.bounds;
    destVc.view.transform = self.mainVc.view.transform;
    [self.view addSubview:destVc.view];
    [self addChildViewController:destVc];
    [self covreButtonClick];
    self.showingVc = destVc;
    //以動(dòng)畫(huà)形式 讓控制器回到最初狀態(tài)
    [UIView animateWithDuration:0.25 animations:^{
        destVc.view.transform = CGAffineTransformIdentity;
    }];
    
}
/**
 *  回到主界面
 */
- (void)backHomeViewController{
    //以動(dòng)畫(huà)形式 讓控制器回到最初狀態(tài)
    [UIView animateWithDuration:0.25 animations:^{
        self.showingVc.view.transform = CGAffineTransformMakeTranslation(self.view.frame.size.width, 0);
    }completion:^(BOOL finished) {
        [self.showingVc removeFromParentViewController];
        [self.showingVc.view removeFromSuperview];
        self.showingVc = nil;
    }];
    
    
}
- (void)viewDidLoad {
    [super viewDidLoad];
    //默認(rèn)左邊控制器的view向左偏移self.leftwidth
    self.leftMenuVc.view.transform = CGAffineTransformMakeTranslation(-self.leftWidth, 0);
    //給mainVc 設(shè)置陰影效果
    self.mainVc.view.layer.shadowColor = [UIColor blackColor].CGColor;
    self.mainVc.view.layer.shadowOffset = CGSizeMake(-3, -3);
    self.mainVc.view.layer.shadowOpacity=  1;
    self.mainVc.view.layer.shadowRadius = 5;
    //給tabBarVc的所有子控制器添加一個(gè)邊緣拖拽的手勢(shì)
    for (UIViewController *childVc in self.mainVc.childViewControllers) {
        [self addScreenEdgePanGestureRecognizerToView:childVc.view];
    }
    
    
    
}
/**
 *  給指定的view添加邊緣拖拽手勢(shì)
 */
- (void)addScreenEdgePanGestureRecognizerToView:(UIView *)View{
    //創(chuàng)建邊緣拖拽對(duì)象
    UIScreenEdgePanGestureRecognizer *pan = [[UIScreenEdgePanGestureRecognizer alloc]initWithTarget:self action:@selector(edgePanGestureRecognizer:)];
    //設(shè)置手勢(shì)方向,觸發(fā)左邊緣時(shí)才觸發(fā)
    pan.edges = UIRectEdgeLeft;
    [View addGestureRecognizer:pan];
}
/**
 *  手勢(shì)回調(diào)方法
 */
- (void)edgePanGestureRecognizer:(UIScreenEdgePanGestureRecognizer *)pan{
    NSLog(@"%s",__FUNCTION__);
    CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
    //獲得x方向拖拽的距離
    CGFloat offset = [pan translationInView:pan.view].x;
    if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateCancelled) {
        //當(dāng)拖拽結(jié)束時(shí)或拖拽取消時(shí)传透,判斷主控制器的view的x值有沒(méi)有到達(dá)屏幕的一半
        if (self.mainVc.view.frame.origin.x > screenWidth/2) {
            [self openLeftVc];
        }else{
        
            [self covreButtonClick];
        }
    }else if (pan.state == UIGestureRecognizerStateChanged){
        //當(dāng)拖拽時(shí)使mainVc的view的x值隨著往x方向拖拽的距離的改變而變化
        self.mainVc.view.transform = CGAffineTransformMakeTranslation(offset, 0);
        self.leftMenuVc.view.transform= CGAffineTransformMakeTranslation(offset-self.leftWidth, 0);
    }
}
/**
 *  監(jiān)聽(tīng)遮蓋按鈕的拖拽手勢(shì)
 */
- (void)panCoverBtn:(UIPanGestureRecognizer *)pan{
    //獲得x方向拖拽的距離
    CGFloat offset = [pan translationInView:pan.view].x;
    if (offset > 0) return;
    CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
    CGFloat distance = self.leftWidth - ABS(offset);//減去絕對(duì)值
    if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateCancelled) {
        //當(dāng)拖拽結(jié)束時(shí)或拖拽取消時(shí)艾杏,判斷主控制器的view的x值有沒(méi)有到達(dá)屏幕的一半
        if (self.mainVc.view.frame.origin.x > screenWidth/2) {
            [self openLeftVc];
        }else{
            
            [self covreButtonClick];
        }
    }else if (pan.state == UIGestureRecognizerStateChanged){
        //當(dāng)拖拽時(shí)使mainVc的view的x值隨著往x方向拖拽的距離的改變而變化
        self.mainVc.view.transform = CGAffineTransformMakeTranslation(MAX(0, distance), 0);
        self.leftMenuVc.view.transform= CGAffineTransformMakeTranslation(offset, 0);
    }
}
#pragma mark -懶加載 遮蓋按鈕
-(UIButton *)coverButton{
    if (_coverButton == nil) {
        _coverButton = [[UIButton alloc] init];
        _coverButton.backgroundColor = [UIColor clearColor];
        _coverButton.frame = self.mainVc.view.bounds;
        [_coverButton addTarget:self action:@selector(covreButtonClick) forControlEvents:UIControlEventTouchUpInside];
        //創(chuàng)建一個(gè)拖拽手勢(shì)
        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panCoverBtn:)];
        [_coverButton addGestureRecognizer:pan];
    }
    return _coverButton;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end
//
//  XDLeftMenuTableViewController.h
//  仿QQ抽屜效果
//
//  Created by 竇心東 on 16/9/25.
//  Copyright ? 2016年 竇心東. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XDLeftMenuTableViewController : UITableViewController

@end

//
//  XDLeftMenuTableViewController.m
//  仿QQ抽屜效果
//
//  Created by 竇心東 on 16/9/25.
//  Copyright ? 2016年 竇心東. All rights reserved.
//

#import "XDLeftMenuTableViewController.h"
#import "XDDrawerViewController.h"
@interface XDLeftMenuTableViewController ()
/**
 *  tableView的頭部view
 */
@property (nonatomic,strong) UIView *headerView;
@end

@implementation XDLeftMenuTableViewController
#pragma mark - 懶加載創(chuàng)建tableView的頭部view
-(UIView *)headerView{
    if (_headerView == nil) {
        _headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0,0,200)];
        _headerView.backgroundColor = [UIColor orangeColor];
        
    }
    return _headerView;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    //隱藏分割線
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    //設(shè)置背景
    self.tableView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"chat_bg_default"]];
//     self.tableView.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"chat_bg_default"]];
    //設(shè)置tableview 的頭部控件
    self.tableView.tableHeaderView = self.headerView;
    
    
    UIButton *addbutton = [UIButton buttonWithType:UIButtonTypeContactAdd];
    addbutton.center = CGPointMake(101, 100);
    [addbutton addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
    [self.headerView addSubview:addbutton];
    
}
//headerView上邊的按鈕點(diǎn)擊事件
- (void)btnClick{
    NSLog(@"%s",__FUNCTION__);
    //創(chuàng)建控制器
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view.backgroundColor = [UIColor redColor];
    vc.title = @"增加按鈕點(diǎn)擊進(jìn)來(lái)的控制器";
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
    vc.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStyleDone target:[XDDrawerViewController shareDrawerVc] action:@selector(backHomeViewController)];
    //把我的nav傳過(guò)去拦止,來(lái)切換控制器
    [[XDDrawerViewController shareDrawerVc]switchViewController:nav];
    
}

@end

//
//  XDmessageViewController.h
//  仿QQ抽屜效果
//
//  Created by 竇心東 on 16/9/25.
//  Copyright ? 2016年 竇心東. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XDmessageViewController : UIViewController

@end

//
//  XDmessageViewController.m
//  仿QQ抽屜效果
//
//  Created by 竇心東 on 16/9/25.
//  Copyright ? 2016年 竇心東. All rights reserved.
//

#import "XDmessageViewController.h"
#import "XDDrawerViewController.h"
@interface XDmessageViewController ()

@end

@implementation XDmessageViewController
/**
 *  堅(jiān)聽(tīng)按鈕的點(diǎn)擊
 *
 *  @param sender drawerButtonClick
 */
- (IBAction)ButtonClick {
    NSLog(@"%s",__FUNCTION__);
    [[XDDrawerViewController shareDrawerVc] openLeftVc];
}


- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor brownColor];
}


@end

項(xiàng)目地址:https://github.com/douxindong/Drawer-QQ.git

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子汹族,更是在濱河造成了極大的恐慌萧求,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件顶瞒,死亡現(xiàn)場(chǎng)離奇詭異夸政,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)榴徐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門守问,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人坑资,你說(shuō)我怎么就攤上這事耗帕。” “怎么了袱贮?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵仿便,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我攒巍,道長(zhǎng)嗽仪,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任柒莉,我火速辦了婚禮闻坚,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘兢孝。我一直安慰自己窿凤,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布跨蟹。 她就那樣靜靜地躺著卷玉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪喷市。 梳的紋絲不亂的頭發(fā)上相种,一...
    開(kāi)封第一講書(shū)人閱讀 51,443評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音品姓,去河邊找鬼寝并。 笑死,一個(gè)胖子當(dāng)著我的面吹牛腹备,可吹牛的內(nèi)容都是我干的衬潦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼植酥,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼镀岛!你這毒婦竟也來(lái)了弦牡?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤漂羊,失蹤者是張志新(化名)和其女友劉穎驾锰,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體走越,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡椭豫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了旨指。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赏酥。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖谆构,靈堂內(nèi)的尸體忽然破棺而出裸扶,到底是詐尸還是另有隱情,我是刑警寧澤搬素,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布呵晨,位于F島的核電站,受9級(jí)特大地震影響蔗蹋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜囱淋,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一猪杭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧妥衣,春花似錦皂吮、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至芦倒,卻和暖如春艺挪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背兵扬。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工麻裳, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人器钟。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓津坑,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親傲霸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子疆瑰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • afinalAfinal是一個(gè)android的ioc眉反,orm框架 https://github.com/yangf...
    passiontim閱讀 15,429評(píng)論 2 45
  • 原文鏈接作者:Arthur Knopper原文日期:2017/04/05譯者:Crystal Sun picker...
    sing_crystal閱讀 2,905評(píng)論 1 0
  • 文 / 西夏 榴蓮是大家公認(rèn)的果中之王寸五。可是對(duì)誰(shuí)是王后卻一直持有不同的意見(jiàn)孵睬。有人認(rèn)為山竹性涼播歼,能中和榴蓮的燥熱;但...
    壹路吃閱讀 1,364評(píng)論 1 15