IOS实现点击滑动抽屉效果

最近，看到好多android上的抽屉效果，也忍不住想要自己写一个。在android里面可以用slidingdrawer，很方便的实现。ios上面就只有自己写了。其实原理很简单就是 uiview 的移动，和一些手势的操作。

效果图：

// 
// drawerview.h 
// drawerdemo 
// 
// created by zhouhaifeng on 12-3-27. 
// copyright (c) 2012年 cjlu. all rights reserved. 
// 
 
#import <uikit/uikit.h> 
 
typedef enum 
{ 
  drawerviewstateup = 0, 
  drawerviewstatedown 
}drawerviewstate; 
 
@interface drawerview : uiview<uigesturerecognizerdelegate> 
{ 
  uiimageview *arrow;     //向上拖拽时显示的图片   
  
  cgpoint uppoint;      //抽屉拉出时的中心点 
  cgpoint downpoint;     //抽屉收缩时的中心点 
   
  uiview *parentview;     //抽屉所在的view 
  uiview *contentview;    //抽屉里面显示的内容 
   
  drawerviewstate drawstate; //当前抽屉状态 
} 
 
- (id)initwithview:(uiview *) contentview parentview :(uiview *) parentview; 
- (void)handlepan:(uipangesturerecognizer *)recognizer; 
- (void)handletap:(uitapgesturerecognizer *)recognizer; 
- (void)transformarrow:(drawerviewstate) state; 
 
@property (nonatomic,retain) uiview *parentview; 
@property (nonatomic,retain) uiview *contentview; 
@property (nonatomic,retain) uiimageview *arrow;  
@property (nonatomic) drawerviewstate drawstate;  
 
@end 

// 
// drawerview.m 
// drawerdemo 
// 
// created by zhouhaifeng on 12-3-27. 
// copyright (c) 2012年 cjlu. all rights reserved. 
// 
 
#import "drawerview.h" 
 
@implementation drawerview 
@synthesize contentview,parentview,drawstate; 
@synthesize arrow; 
 
- (id)initwithview:(uiview *) contentview parentview :(uiview *) parentview; 
{ 
  self = [super initwithframe:cgrectmake(0,0,contentview.frame.size.width, contentview.frame.size.height+40)]; 
  if (self) { 
    // initialization code     
    contentview = contentview; 
    parentview = parentview; 
     
    //一定要开启 
    [parentview setuserinteractionenabled:yes]; 
     
    //嵌入内容区域的背景 
    uiimage *drawer_bg = [uiimage imagenamed:@"drawer_content.png"]; 
    uiimageview *view_bg = [[uiimageview alloc]initwithimage:drawer_bg]; 
    [view_bg setframe:cgrectmake(0,40,contentview.frame.size.width, contentview.bounds.size.height+40)]; 
    [self addsubview:view_bg]; 
   
    //头部拉拽的区域背景 
    uiimage *drawer_handle = [uiimage imagenamed:@"drawer_handlepng.png"]; 
    uiimageview *view_handle = [[uiimageview alloc]initwithimage:drawer_handle]; 
    [view_handle setframe:cgrectmake(0,0,contentview.frame.size.width,40)]; 
    [self addsubview:view_handle]; 
     
    //箭头的图片 
    uiimage *drawer_arrow = [uiimage imagenamed:@"drawer_arrow.png"]; 
    arrow = [[uiimageview alloc]initwithimage:drawer_arrow]; 
    [arrow setframe:cgrectmake(0,0,28,28)]; 
    arrow.center = cgpointmake(contentview.frame.size.width/2, 20); 
    [self addsubview:arrow]; 
     
    //嵌入内容的uiview 
    [contentview setframe:cgrectmake(0,40,contentview.frame.size.width, contentview.bounds.size.height+40)]; 
    [self addsubview:contentview]; 
     
    //移动的手势 
    uipangesturerecognizer *panrcognize=[[uipangesturerecognizer alloc] initwithtarget:self action:@selector(handlepan:)];  
    panrcognize.delegate=self;  
    [panrcognize setenabled:yes];  
    [panrcognize delaystouchesended];  
    [panrcognize cancelstouchesinview];  
     
    [self addgesturerecognizer:panrcognize]; 
     
    //单击的手势 
    uitapgesturerecognizer *taprecognize = [[uitapgesturerecognizer alloc]initwithtarget:self action:@selector(handletap:)];  
    taprecognize.numberoftapsrequired = 1;  
    taprecognize.delegate = self;  
    [taprecognize setenabled :yes];  
    [taprecognize delaystouchesbegan];  
    [taprecognize cancelstouchesinview];  
     
    [self addgesturerecognizer:taprecognize]; 
     
    //设置两个位置的坐标 
    downpoint = cgpointmake(parentview.frame.size.width/2, parentview.frame.size.height+contentview.frame.size.height/2-40); 
    uppoint = cgpointmake(parentview.frame.size.width/2, parentview.frame.size.height-contentview.frame.size.height/2-40); 
    self.center = downpoint; 
     
    //设置起始状态 
    drawstate = drawerviewstatedown; 
  } 
  return self; 
} 
 
 
#pragma uigesturerecognizer handles  
/*   
 * 移动图片处理的函数 
 * @recognizer 移动手势 
 */  
- (void)handlepan:(uipangesturerecognizer *)recognizer {  
   
   
  cgpoint translation = [recognizer translationinview:parentview];  
  if (self.center.y + translation.y < uppoint.y) { 
    self.center = uppoint; 
  }else if(self.center.y + translation.y > downpoint.y) 
  { 
    self.center = downpoint; 
  }else{ 
    self.center = cgpointmake(self.center.x,self.center.y + translation.y);  
  } 
  [recognizer settranslation:cgpointmake(0, 0) inview:parentview];  
   
  if (recognizer.state == uigesturerecognizerstateended) {  
    [uiview animatewithduration:0.75 delay:0.15 options:uiviewanimationoptioncurveeaseout animations:^{  
        if (self.center.y < downpoint.y*4/5) { 
          self.center = uppoint; 
          [self transformarrow:drawerviewstateup]; 
        }else 
        { 
          self.center = downpoint; 
          [self transformarrow:drawerviewstatedown]; 
        } 
 
    } completion:nil];  
  
  }   
}  
 
/* 
 * handletap 触摸函数 
 * @recognizer uitapgesturerecognizer 触摸识别器 
 */  
-(void) handletap:(uitapgesturerecognizer *)recognizer  
{  
    [uiview animatewithduration:0.75 delay:0.15 options:uiviewanimationoptiontransitioncurlup animations:^{  
      if (drawstate == drawerviewstatedown) { 
        self.center = uppoint; 
        [self transformarrow:drawerviewstateup]; 
      }else 
      { 
        self.center = downpoint; 
        [self transformarrow:drawerviewstatedown]; 
      } 
    } completion:nil];  
  
}  
 
/* 
 * transformarrow 改变箭头方向 
 * state drawerviewstate 抽屉当前状态 
 */  
-(void)transformarrow:(drawerviewstate) state 
{ 
    //nslog(@"drawerstate :%d state:%d",drawstate,state); 
    [uiview animatewithduration:0.3 delay:0.35 options:uiviewanimationoptioncurveeaseout animations:^{  
      if (state == drawerviewstateup){   
          arrow.transform = cgaffinetransformmakerotation(m_pi); 
        }else 
        { 
           arrow.transform = cgaffinetransformmakerotation(0); 
        } 
    } completion:^(bool finish){ 
        drawstate = state; 
    }];  
     
   
} 
 
@end 

以上就是本文的全部内容，希望对大家的学习有所帮助。