弹出抽屉效果
2016-02-26 本文已影响1104人
yyMae
最近公司项目要加个抽屉效果,完成之后自己写了个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;
}
}
