您的位置:首页 > 移动开发 > IOS开发

iOS抽屉效果、二级菜单(点击,拖拽滑动)

2016-01-05 17:55 525 查看
好像最近,看到好多Android上的抽屉效果,也忍不住想要自己写一个。在Android里面可以用SlidingDrawer,很方便的实现。IOS上面就只有自己写了。其实原理很简单就是 UIView 的移动,和一些手势的操作。

[cpp] view
plaincopy

//

// 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

[cpp] view
plaincopy

//

// 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

[cpp] view
plaincopy

//

// 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

[cpp] view
plaincopy

//

// 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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: