实现IOS版的抽屉效果（点击，拖拽滑动）
好像最近，看到好多Android上的抽屉效果，也忍不住想要自己写一个。在Android里面可以用SlidingDrawer，很方便的实现。IOS上面就只有自己写了。其实原理很简单就是 UIView 的移动，和一些手势的操作。
1 // 2 // DrawerView.h 3 // DrawerDemo 4 // 5 // Created by Zhouhaifeng on 12-3-27. 6 // Copyright (c) 2012年 CJLU. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h> 10 11 typedef enum 12 { 13 DrawerViewStateUp = 0, 14 DrawerViewStateDown 15 }DrawerViewState; 16 17 @interface DrawerView : UIView<UIGestureRecognizerDelegate> 18 { 19 UIImageView *arrow; //向上拖拽时显示的图片 20 21 CGPoint upPoint; //抽屉拉出时的中心点 22 CGPoint downPoint; //抽屉收缩时的中心点 23 24 UIView *parentView; //抽屉所在的view 25 UIView *contentView; //抽屉里面显示的内容 26 27 DrawerViewState drawState; //当前抽屉状态 28 } 29 30 - (id)initWithView:(UIView *) contentview parentView :(UIView *) parentview; 31 - (void)handlePan:(UIPanGestureRecognizer *)recognizer; 32 - (void)handleTap:(UITapGestureRecognizer *)recognizer; 33 - (void)transformArrow:(DrawerViewState) state; 34 35 @property (nonatomic,retain) UIView *parentView; 36 @property (nonatomic,retain) UIView *contentView; 37 @property (nonatomic,retain) UIImageView *arrow; 38 @property (nonatomic) DrawerViewState drawState; 39 40 @end
1 // 2 // DrawerView.m 3 // DrawerDemo 4 // 5 // Created by Zhouhaifeng on 12-3-27. 6 // Copyright (c) 2012年 CJLU. All rights reserved. 7 // 8 9 #import "DrawerView.h" 10 11 @implementation DrawerView 12 @synthesize contentView,parentView,drawState; 13 @synthesize arrow; 14 15 - (id)initWithView:(UIView *) contentview parentView :(UIView *) parentview; 16 { 17 self = [super initWithFrame:CGRectMake(0,0,contentview.frame.size.width, contentview.frame.size.height+40)]; 18 if (self) { 19 // Initialization code 20 contentView = contentview; 21 parentView = parentview; 22 23 //一定要开启 24 [parentView setUserInteractionEnabled:YES]; 25 26 //嵌入内容区域的背景 27 UIImage *drawer_bg = [UIImage imageNamed:@"drawer_content.png"]; 28 UIImageView *view_bg = [[UIImageView alloc]initWithImage:drawer_bg]; 29 [view_bg setFrame:CGRectMake(0,40,contentview.frame.size.width, contentview.bounds.size.height+40)]; 30 [self addSubview:view_bg]; 31 32 //头部拉拽的区域背景 33 UIImage *drawer_handle = [UIImage imageNamed:@"drawer_handlepng.png"]; 34 UIImageView *view_handle = [[UIImageView alloc]initWithImage:drawer_handle]; 35 [view_handle setFrame:CGRectMake(0,0,contentview.frame.size.width,40)]; 36 [self addSubview:view_handle]; 37 38 //箭头的图片 39 UIImage *drawer_arrow = [UIImage imageNamed:@"drawer_arrow.png"]; 40 arrow = [[UIImageView alloc]initWithImage:drawer_arrow]; 41 [arrow setFrame:CGRectMake(0,0,28,28)]; 42 arrow.center = CGPointMake(contentview.frame.size.width/2, 20); 43 [self addSubview:arrow]; 44 45 //嵌入内容的UIView 46 [contentView setFrame:CGRectMake(0,40,contentview.frame.size.width, contentview.bounds.size.height+40)]; 47 [self addSubview:contentview]; 48 49 //移动的手势 50 UIPanGestureRecognizer *panRcognize=[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]; 51 panRcognize.delegate=self; 52 [panRcognize setEnabled:YES]; 53 [panRcognize delaysTouchesEnded]; 54 [panRcognize cancelsTouchesInView]; 55 56 [self addGestureRecognizer:panRcognize]; 57 58 //单击的手势 59 UITapGestureRecognizer *tapRecognize = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)]; 60 tapRecognize.numberOfTapsRequired = 1; 61 tapRecognize.delegate = self; 62 [tapRecognize setEnabled :YES]; 63 [tapRecognize delaysTouchesBegan]; 64 [tapRecognize cancelsTouchesInView]; 65 66 [self addGestureRecognizer:tapRecognize]; 67 68 //设置两个位置的坐标 69 downPoint = CGPointMake(parentview.frame.size.width/2, parentview.frame.size.height+contentview.frame.size.height/2-40); 70 upPoint = CGPointMake(parentview.frame.size.width/2, parentview.frame.size.height-contentview.frame.size.height/2-40); 71 self.center = downPoint; 72 73 //设置起始状态 74 drawState = DrawerViewStateDown; 75 } 76 return self; 77 } 78 79 80 #pragma UIGestureRecognizer Handles 81 /* 82 * 移动图片处理的函数 83 * @recognizer 移动手势 84 */ 85 - (void)handlePan:(UIPanGestureRecognizer *)recognizer { 86 87 88 CGPoint translation = [recognizer translationInView:parentView]; 89 if (self.center.y + translation.y < upPoint.y) { 90 self.center = upPoint; 91 }else if(self.center.y + translation.y > downPoint.y) 92 { 93 self.center = downPoint; 94 }else{ 95 self.center = CGPointMake(self.center.x,self.center.y + translation.y); 96 } 97 [recognizer setTranslation:CGPointMake(0, 0) inView:parentView]; 98 99 if (recognizer.state == UIGestureRecognizerStateEnded) { 100 [UIView animateWithDuration:0.75 delay:0.15 options:UIViewAnimationOptionCurveEaseOut animations:^{ 101 if (self.center.y < downPoint.y*4/5) { 102 self.center = upPoint; 103 [self transformArrow:DrawerViewStateUp]; 104 }else 105 { 106 self.center = downPoint; 107 [self transformArrow:DrawerViewStateDown]; 108 } 109 110 } completion:nil]; 111 112 } 113 } 114 115 /* 116 * handleTap 触摸函数 117 * @recognizer UITapGestureRecognizer 触摸识别器 118 */ 119 -(void) handleTap:(UITapGestureRecognizer *)recognizer 120 { 121 [UIView animateWithDuration:0.75 delay:0.15 options:UIViewAnimationOptionTransitionCurlUp animations:^{ 122 if (drawState == DrawerViewStateDown) { 123 self.center = upPoint; 124 [self transformArrow:DrawerViewStateUp]; 125 }else 126 { 127 self.center = downPoint; 128 [self transformArrow:DrawerViewStateDown]; 129 } 130 } completion:nil]; 131 132 } 133 134 /* 135 * transformArrow 改变箭头方向 136 * state DrawerViewState 抽屉当前状态 137 */ 138 -(void)transformArrow:(DrawerViewState) state 139 { 140 //NSLog(@"DRAWERSTATE :%d STATE:%d",drawState,state); 141 [UIView animateWithDuration:0.3 delay:0.35 options:UIViewAnimationOptionCurveEaseOut animations:^{ 142 if (state == DrawerViewStateUp){ 143 arrow.transform = CGAffineTransformMakeRotation(M_PI); 144 }else 145 { 146 arrow.transform = CGAffineTransformMakeRotation(0); 147 } 148 } completion:^(BOOL finish){ 149 drawState = state; 150 }]; 151 152 153 } 154 155 @end
iOS代码下载网站：http://appcodes.org/
