IOS实现点击滑动抽屉效果
2016-02-27 10:09
656 查看
最近,看到好多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
以上就是本文的全部内容,希望对大家的学习有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- javascript 简单抽屉效果的实现代码
- 讲解iOS开发中基本的定位功能实现
- iOS中定位当前位置坐标及转换为火星坐标的方法
- js判断客户端是iOS还是Android等移动终端的方法
- iOS应用中UISearchDisplayController搜索效果的用法
- IOS开发环境windows化攻略
- 浅析iOS应用开发中线程间的通信与线程安全问题
- 检测iOS设备是否越狱的方法
- Android SlidingDrawer 抽屉效果的实现
- .net平台推送ios消息的实现方法
- 探讨Android与iOS,我们将何去何从?
- Android、iOS和Windows Phone中的推送技术详解
- iOS推送的那些事