抽屉效果

思路

1 自定义一个View，它做为显示内容的View。给这个View添加两个手势，pan拖拽，tap点击。
2 当拖拽这个View时，让view.center向右移动，这样就能看到内容View向右移动了。
3 定义一个抽屉打开停止时的x值为：OPENCENTERX，这个是内容View最终停止的位置
4 当内容View越过中间靠右的一个x值时，view自动向右动画移动到右边位置停下。
5 当内容View在打开的状态下，点击内容View，利用UIView动画把内容View.center移动回到中间。
6 设置内容View的阴影效果

新建CustomView继承UIView

[cpp]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. @interface CustomView : UIView  
4. {  
5.     CGPoint openPointCenter;  
6.     CGPoint closePointCenter;  
7. }  
8. -(id)initWithView:(UIView*)contentview parentView:(UIView*) parentview;  
9.   
10. @property (nonatomic, strong) UIView *parentView; //抽屉视图的父视图  
11. @property (nonatomic, strong) UIView *contenView; //抽屉显示内容的视图  
12. @end  

两个手势在Custom里实现，并在初始化的时候传入内容View和父视图。

[cpp]  view plain copy

1. #import "CustomView.h"  
2.   
3. #define OPENCENTERX 220.0  
4. #define DIVIDWIDTH 70.0 //OPENCENTERX 对应确认是否打开或关闭的分界线。  
5.   
6. @implementation CustomView  
7.   
8. - (id)initWithFrame:(CGRect)frame  
9. {  
10.     self = [super initWithFrame:frame];  
11.     if (self) {  
12.         // Initialization code  
13.     }  
14.     return self;  
15. }  
16.   
17. - (id)initWithView:(UIView *)contentview parentView:(UIView *)parentview  
18. {  
19.     self = [super initWithFrame:CGRectMake(0,0,contentview.frame.size.width, contentview.frame.size.height)];  
20.       
21.     if (self) {  
22.         self.contenView = contentview;  
23.         self.parentView = parentview;  
24.           
25.         [self addSubview:contentview];  
26.         UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]  
27.                                                         initWithTarget:self  
28.                                                         action:@selector(handlePan:)];  
29.         [self addGestureRecognizer:panGestureRecognizer];  
30.           
31.         UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc]  
32.                                                         initWithTarget:self  
33.                                                         action:@selector(handleTap:)];  
34.           
35.         [self addGestureRecognizer:tapGestureRecognizer];  
36.         openPointCenter = CGPointMake(self.parentView.center.x + OPENCENTERX,  
37.                                       self.parentView.center.y);  
38.           
39.         NSLog(@"openPointCenter x:%f, openPointCenter y:%f",  
40.               openPointCenter.x,  
41.               openPointCenter.y);  
42.   
43.           
44.     }  
45.       
46.       
47.       
48.     return self;  
49. }  
50.   
51. -(void) handlePan:(UIPanGestureRecognizer*) recognizer  
52. {  
53.     CGPoint translation = [recognizer translationInView:self.parentView];  
54.       
55.     float x = self.center.x + translation.x;  
56.     NSLog(@"translation x:%f", translation.x);  
57.    
58.     if (x < self.parentView.center.x) {  
59.         x = self.parentView.center.x;  
60.     }  
61.     self.center = CGPointMake(x, openPointCenter.y);  
62.       
63.     if(recognizer.state == UIGestureRecognizerStateEnded)  
64.     {  
65.             [UIView animateWithDuration:0.75  
66.                                   delay:0.01  
67.                                 options:UIViewAnimationCurveEaseInOut  
68.                              animations:^(void)  
69.             {  
70.                 if (x > openPointCenter.x -  DIVIDWIDTH) {  
71.                     self.center = openPointCenter;  
72.                 }else{  
73.                     self.center = CGPointMake(openPointCenter.x - OPENCENTERX,  
74.                                               openPointCenter.y);  
75.                       
76.                 }  
77.                   
78.             }completion:^(BOOL isFinish){  
79.                   
80.             }];  
81.         }  
82.       
83.     [recognizer setTranslation:CGPointZero inView:self.parentView];  
84. }  
85.   
86. -(void) handleTap:(UITapGestureRecognizer*) recognizer  
87. {  
88.     [UIView animateWithDuration:0.75  
89.                           delay:0.01  
90.                         options:UIViewAnimationTransitionCurlUp animations:^(void){  
91.                             self.center = CGPointMake(openPointCenter.x - OPENCENTERX,  
92.                                                       openPointCenter.y);  
93.     }completion:nil];  
94.       
95. }  
96. @end  

4、viewController的调用

为了实现自定义视图的阴影，添加需要使用QuartzCore框架。在项目里添加QuartzCore框架后引入头文件。

[cpp]  view plain copy

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.       
5.     CGRect rect = CGRectMake(0, 0,  
6.                              self.view.frame.size.width,  
7.                              self.view.frame.size.height);  
8.     NSLog(@"w:%f, h:%f", rect.size.width, rect.size.height);  
9.     UIImageView *imageleft = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"left.png"]];  
10.     imageleft.frame = rect;  
11.     [self.view addSubview:imageleft];  
12.       
13.     UIView *contentView = [[UIView alloc] initWithFrame:rect];  
14.       
15.     UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"index.png"]];  
16.     imageView.frame = rect;  
17.     [contentView addSubview:imageView];  
18.   
19.     CustomView *customView = [[CustomView alloc] initWithView:contentView  
20.                                                    parentView:self.view];  
21.     [[customView layer] setShadowOffset:CGSizeMake(10, 10)];  
22.     [[customView layer] setShadowRadius:20];  
23.     [[customView layer] setShadowOpacity:1];  
24.     [[customView layer] setShadowColor:[UIColor blackColor].CGColor];  
25.       
26.     [self.view addSubview:customView];