彈出抽屜效果

最近公司項(xiàng)目要加個(gè)抽屜效果,完成之后自己寫了個(gè)demo,看下效果

抽屜.gif

功能實(shí)現(xiàn)很簡(jiǎn)單,直接上代碼,里面都有注釋

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;
}

//此處給你的數(shù)據(jù)源數(shù)組賦值
- (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];//設(shè)置選中時(shí)候字體為白色
    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:@"金館長(zhǎng)"];//添加頭部圖片
    [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,當(dāng)需要彈出抽屜(即listView)的時(shí)候,只要將aboveView的坐標(biāo)改變就能實(shí)現(xiàn)了
@property (nonatomic, strong) UIView *aboveView;
@property (nonatomic, strong) YYListView *listView;

@property (nonatomic, assign) BOOL isLeft;//此屬性判斷是否已經(jīng)彈出抽屜界面,初值設(shè)為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];//此處必須設(shè)置顏色,否則默認(rèn)為透明色
    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,每當(dāng)值改變的時(shí)候變化aboveView的顏色
    [self.listView addObserver:self forKeyPath:@"menuIndex" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil];
    
}

- (void)addListView{
    //如果沒(méi)有彈出抽屜則彈出,如果已經(jīng)彈出則關(guān)閉抽屜
    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觀察的值改變時(shí)候會(huì)執(zhí)行此方法
- (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

當(dāng)然大家也可以在viewController中添加手勢(shì)來(lái)控制抽屜效果

update:
添加手勢(shì),emptyView僅為實(shí)例

點(diǎn)擊空白處抽屜回收
- (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;
    }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,251評(píng)論 4贊 61
  • 轉(zhuǎn)載自：https://github.com/Tim9Liu9/TimLiu-iOS 目錄 UI下拉刷新模糊效果A...
    袁俊亮技術(shù)博客閱讀 11,972評(píng)論 9贊 105
  • 也許是前幾天太累了，早上6點(diǎn)38分才醒過(guò)來(lái)。天還是那么黑，外面有淅淅瀝瀝的雨聲。原來(lái)，下雨了，秋雨。 喜歡下雨時(shí)的...
    HCW_7f9c閱讀 470評(píng)論 0贊 7
  • 提起特工，你能想到什么呢？ 超群的雙商，一步跨越圍欄的大長(zhǎng)腿，還是帥氣且多金的特質(zhì)？ 小p推出了線上App“征文活...
    旁趣PUNCH閱讀 299評(píng)論 0贊 0
  • 第十章 無(wú)名陷阱 發(fā)音縮寫 發(fā)音首字母縮寫原則 客戶選擇公司名稱，傾向于發(fā)音導(dǎo)向。公司是視覺(jué)導(dǎo)向，為了提升名字的視...
    獅子座秋秋閱讀 343評(píng)論 0贊 0