好像最近，看到好多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. #import <UIKit/UIKit.h>
9. typedefenum
10. {  
11.     DrawerViewStateUp = 0,  
12.     DrawerViewStateDown  
13. }DrawerViewState;  
14. @interface DrawerView : UIView<UIGestureRecognizerDelegate> 
15. {  
16.     UIImageView *arrow;         //向上拖拽時顯示的圖片    
17.     CGPoint upPoint;            //抽屜拉出時的中心點
18.     CGPoint downPoint;          //抽屜收縮時的中心點
19.     UIView *parentView;         //抽屜所在的view
20.     UIView *contentView;        //抽屜裡面顯示的內容
21.     DrawerViewState drawState;  //當前抽屜狀態
22. }  
23. - (id)initWithView:(UIView *) contentview parentView :(UIView *) parentview; 
24. - (void)handlePan:(UIPanGestureRecognizer *)recognizer; 
25. - (void)handleTap:(UITapGestureRecognizer *)recognizer; 
26. - (void)transformArrow:(DrawerViewState) state; 
27. @property (nonatomic,retain) UIView *parentView;  
28. @property (nonatomic,retain) UIView *contentView;  
29. @property (nonatomic,retain) UIImageView *arrow;    
30. @property (nonatomic) DrawerViewState drawState;   
31. @end  

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. #import <UIKit/UIKit.h>
9. typedefenum
10. {  
11.     DrawerViewStateUp = 0,  
12.     DrawerViewStateDown  
13. }DrawerViewState;  
14. @interface DrawerView : UIView<UIGestureRecognizerDelegate>  
15. {  
16.     UIImageView *arrow;         //向上拖拽時顯示的圖片    
17.     CGPoint upPoint;            //抽屜拉出時的中心點
18.     CGPoint downPoint;          //抽屜收縮時的中心點
19.     UIView *parentView;         //抽屜所在的view
20.     UIView *contentView;        //抽屜裡面顯示的內容
21.     DrawerViewState drawState;  //當前抽屜狀態
22. }  
23. - (id)initWithView:(UIView *) contentview parentView :(UIView *) parentview;  
24. - (void)handlePan:(UIPanGestureRecognizer *)recognizer;  
25. - (void)handleTap:(UITapGestureRecognizer *)recognizer;  
26. - (void)transformArrow:(DrawerViewState) state;  
27. @property (nonatomic,retain) UIView *parentView;  
28. @property (nonatomic,retain) UIView *contentView;  
29. @property (nonatomic,retain) UIImageView *arrow;    
30. @property (nonatomic) DrawerViewState drawState;   
31. @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. #import "DrawerView.h"
9. @implementation DrawerView  
10. @synthesize contentView,parentView,drawState;  
11. @synthesize arrow;  
12. - (id)initWithView:(UIView *) contentview parentView :(UIView *) parentview; 
13. {  
14.     self = [super initWithFrame:CGRectMake(0,0,contentview.frame.size.width, contentview.frame.size.height+40)]; 
15.     if (self) {  
16.         // Initialization code        
17.         contentView = contentview;  
18.         parentView = parentview;  
19.         //一定要開啟
20.         [parentView setUserInteractionEnabled:YES];  
21.         //嵌入內容區域的背景
22.         UIImage *drawer_bg = [UIImage imageNamed:@"drawer_content.png"]; 
23.         UIImageView *view_bg = [[UIImageView alloc]initWithImage:drawer_bg]; 
24.         [view_bg setFrame:CGRectMake(0,40,contentview.frame.size.width, contentview.bounds.size.height+40)]; 
25.         [self addSubview:view_bg];  
26.         //頭部拉拽的區域背景
27.         UIImage *drawer_handle = [UIImage imageNamed:@"drawer_handlepng.png"]; 
28.         UIImageView *view_handle = [[UIImageView alloc]initWithImage:drawer_handle]; 
29.         [view_handle setFrame:CGRectMake(0,0,contentview.frame.size.width,40)]; 
30.         [self addSubview:view_handle];  
31.         //箭頭的圖片
32.         UIImage *drawer_arrow = [UIImage imageNamed:@"drawer_arrow.png"]; 
33.         arrow = [[UIImageView alloc]initWithImage:drawer_arrow];  
34.         [arrow setFrame:CGRectMake(0,0,28,28)];  
35.         arrow.center = CGPointMake(contentview.frame.size.width/2, 20); 
36.         [self addSubview:arrow];  
37.         //嵌入內容的UIView
38.         [contentView setFrame:CGRectMake(0,40,contentview.frame.size.width, contentview.bounds.size.height+40)]; 
39.         [self addSubview:contentview];  
40.         //移動的手勢
41.         UIPanGestureRecognizer *panRcognize=[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];   
42.         panRcognize.delegate=self;    
43.         [panRcognize setEnabled:YES];    
44.         [panRcognize delaysTouchesEnded];    
45.         [panRcognize cancelsTouchesInView];   
46.         [self addGestureRecognizer:panRcognize];  
47.         //單擊的手勢
48.         UITapGestureRecognizer *tapRecognize = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];   
49.         tapRecognize.numberOfTapsRequired = 1;    
50.         tapRecognize.delegate = self;    
51.         [tapRecognize setEnabled :YES];    
52.         [tapRecognize delaysTouchesBegan];    
53.         [tapRecognize cancelsTouchesInView];    
54.         [self addGestureRecognizer:tapRecognize];  
55.         //設定兩個位置的座標
56.         downPoint = CGPointMake(parentview.frame.size.width/2, parentview.frame.size.height+contentview.frame.size.height/2-40); 
57.         upPoint = CGPointMake(parentview.frame.size.width/2, parentview.frame.size.height-contentview.frame.size.height/2-40); 
58.         self.center =  downPoint;  
59.         //設定起始狀態
60.         drawState = DrawerViewStateDown;  
61.     }  
62.     return self;  
63. }  
64. #pragma UIGestureRecognizer Handles  
65. /*    
66. *  移動圖片處理的函式 
67. *  @recognizer 移動手勢 
68. */
69. - (void)handlePan:(UIPanGestureRecognizer *)recognizer {   
70.     CGPoint translation = [recognizer translationInView:parentView];   
71.     if (self.center.y + translation.y < upPoint.y) { 
72.         self.center = upPoint;