最近公司項目要加個抽屜效果,完成之后自己寫了個demo,看下效果
抽屜.gif
功能實現很簡單,直接上代碼,里面都有注釋
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;
}
}