广

IOS开发

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    IOS实现点击滑动抽屉效果

    2018-04-06 10:40:26 次阅读 稿源:互联网
    广告

    最近,看到好多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 

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

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告