弹出抽屉效果

最近公司项目要加个抽屉效果,完成之后自己写了个demo,看下效果

功能实现很简单,直接上代码,里面都有注释

YYListView为抽屉类

//
//  YYListView.h
//  抽屉
//
//  Created by yyMae on 16/2/23.
//  Copyright © 2016年 yyMae. All rights reserved.
//

#import <UIKit/UIKit.h>
@interface YYListView : UIView<UITableViewDataSource,UITableViewDelegate>

@property (nonatomic, strong) UITableView *tabView;
@property (nonatomic, strong) NSMutableArray *dataSoure;
@property (nonatomic, assign) NSInteger menuIndex;
@end

//
//  YYListView.m
//  抽屉
//
//  Created by yyMae on 16/2/23.
//  Copyright © 2016年 yyMae. All rights reserved.
//

#import "YYListView.h"
@implementation YYListView

- (NSArray *)dataSoure
{
    if (_dataSoure == nil) {
        _dataSoure = [NSMutableArray array];

    }
    return _dataSoure;
}
- (UITableView *)tabView
{
    
    if (!_tabView) {
        _tabView = [[UITableView alloc]initWithFrame:CGRectMake(0, 50, self.frame.size.width, self.frame.size.height)];
        _tabView.backgroundColor = [[UIColor alloc]initWithRed:246/255.0 green:247/255.0 blue:248/255.0 alpha:1];
        _tabView.dataSource = self;
        _tabView.delegate = self;
        _tabView.separatorStyle = UITableViewCellSeparatorStyleNone;
        
    }
    return _tabView;
}

-(instancetype)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [[UIColor alloc]initWithRed:246/255.0 green:247/255.0 blue:248/255.0 alpha:1];
        self.menuIndex = 0;
        [self initData];
        [self initView];
    }
    
    return self;
}

//此处给你的数据源数组赋值
- (void)initData{
    NSArray *arr = @[@"颜色1",@"颜色2",@"颜色3"];
    self.dataSoure = (NSMutableArray *)arr;
}
- (void)initView{
    [self addSubview:self.tabView];
    [self.tabView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"leftCellIdent"];
    [self.tabView reloadData];
}

#pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.dataSoure.count;
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"leftCellIdent"];
    cell.backgroundColor = [[UIColor alloc]initWithRed:246/255.0 green:247/255.0 blue:248/255.0 alpha:1];
    UIView *backV =[[UIView alloc]initWithFrame:cell.frame];
    backV.backgroundColor = [[UIColor alloc]initWithRed:210/255.0 green:10/255.0 blue:30/255.0 alpha:1];
    cell.selectedBackgroundView = backV;
    NSString *title = [NSString stringWithFormat:@"    %@",self.dataSoure[indexPath.row]];
    cell.textLabel.font = [UIFont systemFontOfSize:22];
    cell.textLabel.text = title;
    cell.textLabel.highlightedTextColor = [UIColor whiteColor];//设置选中时候字体为白色
    return cell;
}
#pragma mark - UITableViewDelegate
- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 150)];
    view.backgroundColor = [[UIColor alloc]initWithRed:246/255.0 green:247/255.0 blue:248/255.0 alpha:1];
    UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(65, 40, 70, 70)];
    imgView.contentMode = UIViewContentModeScaleAspectFit;
    imgView.clipsToBounds = YES;
    imgView.image = [UIImage imageNamed:@"金馆长"];//添加头部图片
    [view addSubview:imgView];
    return view;
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 150;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 70;
}

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    self.menuIndex = indexPath.row;
    
}

 @end


//
//  ViewController.h
//  抽屉
//
//  Created by yyMae on 16/2/26.
//  Copyright © 2016年 yyMae. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

//
//  ViewController.m
//  抽屉
//
//  Created by yyMae on 16/2/26.
//  Copyright © 2016年 yyMae. All rights reserved.
//

#import "ViewController.h"
#import "YYListView.h"
@interface ViewController ()
//此处的aboveView和listView都是self.view的子视图,注意二者有先后顺序,先添加的必须是listView,当需要弹出抽屉(即listView)的时候,只要将aboveView的坐标改变就能实现了
@property (nonatomic, strong) UIView *aboveView;
@property (nonatomic, strong) YYListView *listView;

@property (nonatomic, assign) BOOL isLeft;//此属性判断是否已经弹出抽屉界面,初值设为NO
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.isLeft = NO;
    self.view.backgroundColor = [UIColor whiteColor];
    self.aboveView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.aboveView.backgroundColor = [UIColor whiteColor];//此处必须设置颜色,否则默认为透明色
    self.listView = [[YYListView alloc]initWithFrame:CGRectMake(0, 0, 200, self.view.bounds.size.height)];
    //首先将listView添加到self.view
    [self.view addSubview:self.listView];
    //然后将aboveView加到self.view
    [self.view addSubview:self.aboveView];//其他子控件都添加到aboveView就可以了
    
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
    btn.frame = CGRectMake(10, 10, 50, 50);
    [btn setTitle:@"抽屉" forState:UIControlStateNormal];
    [btn addTarget:self action:@selector(addListView) forControlEvents:UIControlEventTouchUpInside];
    [self.aboveView addSubview:btn];
    
    //给listView的menuIndex属性添加KVO,每当值改变的时候变化aboveView的颜色
    [self.listView addObserver:self forKeyPath:@"menuIndex" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil];
    
}

- (void)addListView{
    //如果没有弹出抽屉则弹出,如果已经弹出则关闭抽屉
    if (self.isLeft == NO) {
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:10 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveLinear animations:^{
            
            self.aboveView.frame = CGRectMake(200, 0, self.view.frame.size.width, self.view.frame.size.height);
            
        } completion:^(BOOL finished) {
            self.isLeft = YES;

        }];
        
        
    }else {
        
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:10 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveLinear animations:^{
            
            self.aboveView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
            
        } completion:^(BOOL finished) {
            self.isLeft = NO;
        }];
        
    }
}

//KVO观察的值改变时候会执行此方法
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
    
    if (self.listView.menuIndex == 1) {
        self.aboveView.backgroundColor = [UIColor greenColor];
    }else if (self.listView.menuIndex == 2){
        self.aboveView.backgroundColor = [UIColor purpleColor];
    }else{
        self.aboveView.backgroundColor = [UIColor whiteColor];
    }
    
}

@end

当然大家也可以在viewController中添加手势来控制抽屉效果

update:
添加手势,emptyView仅为实例

点击空白处抽屉回收
- (void)tapRecognized:(UITapGestureRecognizer*)recognizer{
if (self.isLeft == YES) {
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:10 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveLinear animations:^{
self.emptyView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
} completion:^(BOOL finished) {
}];

        self.isLeft = NO;
    }
}

右滑弹出,左滑消失
- (void)panRecognized:(UIPanGestureRecognizer*)recognizer
{
CGPoint translation = [recognizer translationInView:recognizer.view];
switch (recognizer.state) {
case UIGestureRecognizerStateBegan: {
break;
}
case UIGestureRecognizerStateChanged: {
if (translation.x <= 200 && self.isLeft == NO && translation.x >= 0) {
self.emptyView.frame = CGRectMake(translation.x, 0, self.view.frame.size.width, self.view.frame.size.height);
}
if (translation.x >= -200 && self.isLeft == YES && translation.x <= 0) {
self.emptyView.frame = CGRectMake(200 + translation.x, 0, self.view.frame.size.width, self.view.frame.size.height);

            }
            break;
        }
        case UIGestureRecognizerStateEnded:
        case UIGestureRecognizerStateCancelled: {
            if (translation.x > 5) {
                self.emptyView.frame = CGRectMake(200, 0, self.view.frame.size.width, self.view.frame.size.height);
                for (UIView *view in self.emptyView.subviews) {
                    view.userInteractionEnabled = NO;
                }
                self.isLeft = YES;
            }
            if (translation.x < -5) {
                self.emptyView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
                for (UIView *view in self.emptyView.subviews) {
                    view.userInteractionEnabled = YES;
                }
               
                self.isLeft = NO;
            }
        }
        default:
            break;
    }
}