实现IOS版的抽屉效果（点击，拖拽滑动）

最新推荐文章于 2019-08-13 01:25:24 发布
转载 最新推荐文章于 2019-08-13 01:25:24 发布 · 2.8k 阅读 · 2

本文详细介绍了如何在Android中实现滑动抽屉效果，包括使用SlidingDrawer的便捷方式，以及通过纯UIView操作实现的原理和步骤。文中提供了自定义组件DrawerView的源代码，涵盖手势识别、状态切换及动画效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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


[cpp] view plain copy print ?
  1. // 
  2. //  DrawerView.h 
  3. //  DrawerDemo 
  4. // 
  5. //  Created by Zhouhaifeng on 12-3-27. 
  6. //  Copyright (c) 2012年 CJLU. All rights reserved. 
  7. // 
  8.  
  9. #import <UIKit/UIKit.h> 
  10.  
  11. typedef enum 
  12. { 
  13.     DrawerViewStateUp = 0, 
  14.     DrawerViewStateDown 
  15. }DrawerViewState; 
  16.  
  17. @interface DrawerView : UIView<UIGestureRecognizerDelegate> 
  18. { 
  19.     UIImageView *arrow;         //向上拖拽时显示的图片     
  20.   
  21.     CGPoint upPoint;            //抽屉拉出时的中心点 
  22.     CGPoint downPoint;          //抽屉收缩时的中心点 
  23.      
  24.     UIView *parentView;         //抽屉所在的view 
  25.     UIView *contentView;        //抽屉里面显示的内容 
  26.      
  27.     DrawerViewState drawState;  //当前抽屉状态 
  28. } 
  29.  
  30. - (id)initWithView:(UIView *) contentview parentView :(UIView *) parentview; 
  31. - (void)handlePan:(UIPanGestureRecognizer *)recognizer; 
  32. - (void)handleTap:(UITapGestureRecognizer *)recognizer; 
  33. - (void)transformArrow:(DrawerViewState) state; 
  34.  
  35. @property (nonatomic,retain) UIView *parentView; 
  36. @property (nonatomic,retain) UIView *contentView; 
  37. @property (nonatomic,retain) UIImageView *arrow;   
  38. @property (nonatomic) DrawerViewState drawState;  
  39.  
  40. @end  
//
//  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 plain copy print ?
  1. // 
  2. //  DrawerView.m 
  3. //  DrawerDemo 
  4. // 
  5. //  Created by Zhouhaifeng on 12-3-27. 
  6. //  Copyright (c) 2012年 CJLU. All rights reserved. 
  7. // 
  8.  
  9. #import "DrawerView.h" 
  10.  
  11. @implementation DrawerView 
  12. @synthesize contentView,parentView,drawState; 
  13. @synthesize arrow; 
  14.  
  15. - (id)initWithView:(UIView *) contentview parentView :(UIView *) parentview; 
  16. { 
  17.     self = [super initWithFrame:CGRectMake(0,0,contentview.frame.size.width, contentview.frame.size.height+40)]; 
  18.     if (self) { 
  19.         // Initialization code         
  20.         contentView = contentview; 
  21.         parentView = parentview; 
  22.          
  23.         //一定要开启 
  24.         [parentView setUserInteractionEnabled:YES]; 
  25.          
  26.         //嵌入内容区域的背景 
  27.         UIImage *drawer_bg = [UIImage imageNamed:@"drawer_content.png"]; 
  28.         UIImageView *view_bg = [[UIImageView alloc]initWithImage:drawer_bg]; 
  29.         [view_bg setFrame:CGRectMake(0,40,contentview.frame.size.width, contentview.bounds.size.height+40)]; 
  30.         [self addSubview:view_bg]; 
  31.      
  32.         //头部拉拽的区域背景 
  33.         UIImage *drawer_handle = [UIImage imageNamed:@"drawer_handlepng.png"]; 
  34.         UIImageView *view_handle = [[UIImageView alloc]initWithImage:drawer_handle]; 
  35.         [view_handle setFrame:CGRectMake(0,0,contentview.frame.size.width,40)]; 
  36.         [self addSubview:view_handle]; 
  37.          
  38.         //箭头的图片 
  39.         UIImage *drawer_arrow = [UIImage imageNamed:@"drawer_arrow.png"]; 
  40.         arrow = [[UIImageView alloc]initWithImage:drawer_arrow]; 
  41.         [arrow setFrame:CGRectMake(0,0,28,28)]; 
  42.         arrow.center = CGPointMake(contentview.frame.size.width/2, 20); 
  43.         [self addSubview:arrow]; 
  44.          
  45.         //嵌入内容的UIView 
  46.         [contentView setFrame:CGRectMake(0,40,contentview.frame.size.width, contentview.bounds.size.height+40)]; 
  47.         [self addSubview:contentview]; 
  48.          
  49.         //移动的手势 
  50.         UIPanGestureRecognizer *panRcognize=[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];   
  51.         panRcognize.delegate=self;   
  52.         [panRcognize setEnabled:YES];   
  53.         [panRcognize delaysTouchesEnded];   
  54.         [panRcognize cancelsTouchesInView];  
  55.          
  56.         [self addGestureRecognizer:panRcognize]; 
  57.          
  58.         //单击的手势 
  59.         UITapGestureRecognizer *tapRecognize = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];   
  60.         tapRecognize.numberOfTapsRequired = 1;   
  61.         tapRecognize.delegate = self;   
  62.         [tapRecognize setEnabled :YES];   
  63.         [tapRecognize delaysTouchesBegan];   
  64.         [tapRecognize cancelsTouchesInView];   
  65.          
  66.         [self addGestureRecognizer:tapRecognize]; 
  67.          
  68.         //设置两个位置的坐标 
  69.         downPoint = CGPointMake(parentview.frame.size.width/2, parentview.frame.size.height+contentview.frame.size.height/2-40); 
  70.         upPoint = CGPointMake(parentview.frame.size.width/2, parentview.frame.size.height-contentview.frame.size.height/2-40); 
  71.         self.center =  downPoint; 
  72.          
  73.         //设置起始状态 
  74.         drawState = DrawerViewStateDown; 
  75.     } 
  76.     return self; 
  77. } 
  78.  
  79.  
  80. #pragma UIGestureRecognizer Handles   
  81. /*   
  82. *  移动图片处理的函数
  83. *  @recognizer 移动手势
  84. */   
  85. - (void)handlePan:(UIPanGestureRecognizer *)recognizer {   
  86.      
  87.     
  88.     CGPoint translation = [recognizer translationInView:parentView];  
  89.     if (self.center.y + translation.y < upPoint.y) { 
  90.         self.center = upPoint; 
  91.     }else if(self.center.y + translation.y > downPoint.y) 
  92.     { 
  93.         self.center = downPoint; 
  94.     }else{ 
  95.         self.center = CGPointMake(self.center.x,self.center.y + translation.y);   
  96.     } 
  97.     [recognizer setTranslation:CGPointMake(0, 0) inView:parentView];   
  98.      
  99.     if (recognizer.state == UIGestureRecognizerStateEnded) {   
  100.         [UIView animateWithDuration:0.75 delay:0.15 options:UIViewAnimationOptionCurveEaseOut animations:^{   
  101.                 if (self.center.y < downPoint.y*4/5) { 
  102.                     self.center = upPoint; 
  103.                     [self transformArrow:DrawerViewStateUp]; 
  104.                 }else 
  105.                 { 
  106.                     self.center = downPoint; 
  107.                     [self transformArrow:DrawerViewStateDown]; 
  108.                 } 
  109.  
  110.         } completion:nil];   
  111.   
  112.     }     
  113. }   
  114.  
  115. /*
  116. *  handleTap 触摸函数
  117. *  @recognizer  UITapGestureRecognizer 触摸识别器
  118. */   
  119. -(void) handleTap:(UITapGestureRecognizer *)recognizer   
  120. {   
  121.         [UIView animateWithDuration:0.75 delay:0.15 options:UIViewAnimationOptionTransitionCurlUp animations:^{   
  122.             if (drawState == DrawerViewStateDown) { 
  123.                 self.center = upPoint; 
  124.                 [self transformArrow:DrawerViewStateUp]; 
  125.             }else 
  126.             { 
  127.                 self.center = downPoint; 
  128.                 [self transformArrow:DrawerViewStateDown]; 
  129.             } 
  130.         } completion:nil];   
  131.   
  132. }  
  133.  
  134. /*
  135. *  transformArrow 改变箭头方向
  136. *  state  DrawerViewState 抽屉当前状态
  137. */  
  138. -(void)transformArrow:(DrawerViewState) state 
  139. { 
  140.         //NSLog(@"DRAWERSTATE :%d  STATE:%d",drawState,state); 
  141.         [UIView animateWithDuration:0.3 delay:0.35 options:UIViewAnimationOptionCurveEaseOut animations:^{   
  142.            if (state == DrawerViewStateUp){    
  143.                     arrow.transform = CGAffineTransformMakeRotation(M_PI); 
  144.                 }else 
  145.                 { 
  146.                      arrow.transform = CGAffineTransformMakeRotation(0); 
  147.                 } 
  148.         } completion:^(BOOL finish){ 
  149.                drawState = state; 
  150.         }];   
  151.          
  152.     
  153. } 
  154.  
  155. @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

这样就是实现了，图片是从360里面抠出来，处理的不是很好，大家见谅。

Demo的下载地址：http://download.youkuaiyun.com/detail/toss156/4177553

抽屉效果ios实现
06-04
抽屉效果ios实现
【IOS】实现IOS版的抽屉效果（点击，拖拽滑动）
mmdev
03-27 294
好像最近，看到好多Android上的抽屉效果，也忍不住想要自己写一个。在Android里面可以用SlidingDrawer，很方便的实现。IOS上面就只有自己写了。其实原理很简单就是 UIView 的移动，和一些手势的操作。 // // DrawerView.h // DrawerDemo // // Created by Zhouhaifeng on 12-3-27. // C...
iOS侧拉栏抽屉效果Demo
yjf123546的专栏
10-31 4661
项目研发过程中...常用的效果---侧拉栏抽屉效果...方便开发者使用
iOS实现左右拖动抽屉效果
09-02
} else if (newFrame.origin.x >= self.view.bounds.size.width) { //手指滑动到最右边，隐藏左边视图，显示右边视图 self.mainView.frame = CGRectMake(self.view.bounds.size.width, 0, self.view.bounds.size....
iOS如何用100行代码实现简单的抽屉效果
09-01
以上就是使用约100行代码实现iOS抽屉效果的基本步骤。在实际项目中，可能还需要考虑动画的平滑性、手势冲突的处理以及不同设备尺寸的适配等问题。通过这个简单的实现，开发者可以进一步扩展功能，比如加入更多交互...
猫猫学ios UI抽屉效果
04-27
在iOS应用开发中，UI抽屉效果是一种常见的交互设计，它允许用户通过滑动手势从屏幕边缘拉出或隐藏一个视图，常用于导航菜单、设置面板等场景。"猫猫学ios UI抽屉效果"这个教程可能涵盖了如何在iOS应用中实现这种效果...
IOS 5.0抽屉效果实现的Demo展示
本篇介绍了iOS抽屉效果的Demo实现方法和相关的知识点，包括抽屉效果的概述、实现原理、具体实现步骤、优化与注意事项。对于想要在iOS应用中实现类似抽屉效果的开发者而言，通过上述步骤和知识点的学习，可以更好地...
iOS中的抽屉效果
一道
07-13 482
在如今的App中很多应用都会有抽屉效果的身影，如比较热门的网易新闻和腾讯QQ。实际开发中实现抽屉效果主要是靠控制器之间的不断切换，来展示不同的View，已达到不同效果的展示。不过在本文中，主要是通过几个简单的UIView来模拟一下抽屉效果。
iOS 开发中的抽屉效果<简单>
10-17
这是自己写的一个很简单的模板, 希望没坑到你
IOS抽屉效果，类似android状态栏，从上面拉下来
07-17
抽屉效果，类似android状态栏，从上面拉下来，以前传过一个从下面拖上来的
iOS SwipeKit，帮你轻松实现滑动展开抽屉效果.zip
09-25
iOS SwipeKit，帮你轻松实现滑动展开抽屉效果。.zip,swipableuitableviewcell/uicollectionviewcell基于stock mail.app，在swift中实现。
仿百度地图抽屉拖拽效果Demo
06-29
详情文章请参考：https://blog.youkuaiyun.com/liu_yunzhao/article/details/80387158
iOS 抽屉效果实现
azhang_coder的博客
12-02 626
1.添加需要实现抽屉效果的三个视图，这里需要注意主视图需要放在最后添加 // 左边视图 ... // 右边视图 ... // 主视图 UIView *mainView=[[UIView alloc]initWithFrame:self.view.bounds]; mainView.backgroundColor=[UIColor greenCol
iOS最简单的抽屉效果
李红灯的博客
10-16 1826
1.storyboard的布局: 2.ViewController里的实现: #import "ViewController.h" @interface ViewController () //拖滑动的UIView的三个约束 @property (weak, nonatomic) IBOutlet NSLayoutConstraint *topconstant; @property (wea
IOS-卡片抽屉效果
WQ_631288233的博客
08-13 776
IOS-卡片抽屉效果 git地址：模仿豆瓣的卡片抽屉 模仿豆瓣APP的抽屉弹出效果，采用Swift5 ####效果图如下 二. 实现步骤 1.主要通过UIPanGestureRecognizer和UIViewPropertyAnimator一起协作完成此效果。 2 通过UIPanGestureRecognizer的State进行相关的处理。 3.核心在于动画的暂停，根据释放手势时候，进行处理动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值