实现IOS版的抽屉效果

其实原理很简单就是 UIView 的移动，和一些手势的操作。

[cpp]  view plain copy

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  

[cpp]  view plain copy

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  

这样就是实现了，图片是从360里面抠出来，处理的不是很好，大家见谅。

Demo的下载地址：http://download.csdn.net/detail/toss156/4177553