轉自：
http://blog.sina.com.cn/s/blog_63fa2cac01018n97.html
1、介紹
用過網易新聞客戶端的同學都會發現，網易新聞向左滑動時，左側的導航欄會跟着拖動出來，新聞內容列表會拉到最右側。像一個抽屜拉出來一樣。很酷。除了網易新聞，現在好多應用都採用了這樣的交互。
這個交互效果主要用到兩個手勢，一個是pan拖拽，一個是tap點擊。拖拽可以把抽屜拉出來，再推回去。點擊可以把抽屜推回去。
效果如下：
那麼這個效果如何實現呢？
2、實現思路和步驟
思路：從實現的效果分析出來，可以這樣實現：
這個交互是由兩個View組成，左側導航的View在下面，顯示內容列表的View在上面，內容列表的View覆蓋住了導航View,拖動內容列表的View向右，這時候導航View就顯示出來了。
實現步驟：
- 自定義一個View，它做爲顯示內容的View。給這個View添加兩個手勢，pan拖拽，tap點擊。
- 當拖拽這個View時，讓view.center向右移動，這樣就能看到內容View向右移動了。
- 定義一個抽屜打開停止時的x值爲：OPENCENTERX，這個是內容View最終停止的位置
- 當內容View越過中間靠右的一個x值時，view自動向右動畫移動到右邊位置停下。
- 當內容View在打開的狀態下，點擊內容View，利用UIView動畫把內容View.center移動回到中間。
- 設置內容View的陰影效果
3、代碼實現
新建CustomView繼承UIView
#import
@interface CustomView : UIView
{
CGPoint openPointCenter;
CGPoint closePointCenter;
}
-(id)initWithView:(UIView*)contentview parentView:(UIView*) parentview;
@property (nonatomic, strong) UIView *parentView; //抽屜視圖的父視圖
@property (nonatomic, strong) UIView *contenView; //抽屜顯示內容的視圖
@end
兩個手勢在Custom裏實現，並在初始化的時候傳入內容View和父視圖。
#import "CustomView.h"
#define OPENCENTERX 220.0
#define DIVIDWIDTH 70.0 //OPENCENTERX 對應確認是否打開或關閉的分界線。
@implementation CustomView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
- (id)initWithView:(UIView *)contentview parentView:(UIView *)parentview
{
self = [super initWithFrame:CGRectMake(0,0,contentview.frame.size.width, contentview.frame.size.height)];
if (self) {
self.contenView = contentview;
self.parentView = parentview;
[self addSubview:contentview];
UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]
initWithTarget:self
action:@selector(handlePan:)];
[self addGestureRecognizer:panGestureRecognizer];
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc]
initWithTarget:self
action:@selector(handleTap:)];
[self addGestureRecognizer:tapGestureRecognizer];
openPointCenter = CGPointMake(self.parentView.center.x + OPENCENTERX,
self.parentView.center.y);
NSLog(@"openPointCenter x:%f, openPointCenter y:%f",
openPointCenter.x,
openPointCenter.y);
}
return self;
}
-(void) handlePan:(UIPanGestureRecognizer*) recognizer
{
CGPoint translation = [recognizer translationInView:self.parentView];
float x = self.center.x + translation.x;
NSLog(@"translation x:%f", translation.x);
if (x < self.parentView.center.x) {
x = self.parentView.center.x;
}
self.center = CGPointMake(x, openPointCenter.y);
if(recognizer.state == UIGestureRecognizerStateEnded)
{
[UIView animateWithDuration:0.75
delay:0.01
options:UIViewAnimationCurveEaseInOut
animations:^(void)
{
if (x > openPointCenter.x - DIVIDWIDTH) {
self.center = openPointCenter;
}else{
self.center = CGPointMake(openPointCenter.x - OPENCENTERX,
openPointCenter.y);
}
}completion:^(BOOL isFinish){
}];
}
[recognizer setTranslation:CGPointZero inView:self.parentView];
}
-(void) handleTap:(UITapGestureRecognizer*) recognizer
{
[UIView animateWithDuration:0.75
delay:0.01
options:UIViewAnimationTransitionCurlUp animations:^(void){
self.center = CGPointMake(openPointCenter.x
- OPENCENTERX,
openPointCenter.y);
}completion:nil];
}
@end
4、viewController的調用
爲了實現自定義視圖的陰影，添加需要使用QuartzCore框架。在項目裏添加QuartzCore框架後引入頭文件。
- (void)viewDidLoad
{
[super viewDidLoad];
CGRect rect = CGRectMake(0, 0,
self.view.frame.size.width,
self.view.frame.size.height);
NSLog(@"w:%f, h:%f", rect.size.width, rect.size.height);
UIImageView *imageleft = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"left.png"]];
imageleft.frame = rect;
[self.view addSubview:imageleft];
UIView *contentView = [[UIView alloc] initWithFrame:rect];
UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"index.png"]];
imageView.frame = rect;
[contentView addSubview:imageView];
CustomView *customView = [[CustomView alloc] initWithView:contentView
parentView:self.view];
[[customView layer] setShadowOffset:CGSizeMake(10, 10)];
[[customView layer] setShadowRadius:20];
[[customView layer] setShadowOpacity:1];
[[customView layer] setShadowColor:[UIColor blackColor].CGColor];
[self.view addSubview:customView];
}