IOS实现点击滑动抽屉效果_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 

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索IOS滑动抽屉效果
IOS抽屉效果
ios抽屉效果实现原理、android实现抽屉效果、swift抽屉效果实现、抽屉效果ios实现、js实现菜单栏抽屉效果,以便于您获取更多的相关知识。

时间: 2024-09-21 12:13:18

IOS实现点击滑动抽屉效果_IOS的相关文章

iOS开发之路--仿网易抽屉效果_IOS

最终效果图: MainStoryBoard示意图: BeyondViewController.h // // BeyondViewController.h // 19_抽屉效果_仿网易 // // Created by beyond on 14-8-1. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> #import "LeftTableViewControllerD

iOS实现左右拖动抽屉效果_IOS

本文实例介绍了iOS实现左右拖动抽屉效果,具体内容如下 利用了触摸事件滑动 touchesMoved: 来触发左右视图的出现和消失 利用loadView方法中添加view 在self.view载入前就把 左右中View都设置好frame 每一个方法都由单独的功能. #import "DarwViewController.h" @interface DarwViewController () @property (nonatomic, weak) UIView *leftView; @p

iOS实现侧拉栏抽屉效果_IOS

本文实例介绍了iOS实现侧拉栏抽屉效果的相关代码,分享给大家供大家参考,具体内容如下 需要导入第三方的类库如下: 抽屉效果所需第三方类库下载 效果:既可以两侧都实现抽屉效果也可只实现左侧栏或者右侧栏的抽屉效果 关于抽屉效果主要是AppDelegate的代码 AppDelegate.h文件代码: <span style="font-size:18px;"><span style="font-size:18px;">#import <UIK

iOS实现简单的抽屉效果_IOS

说到抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,本文用CocoaPods引入PPRevealSideViewController,然后在我们的工程中以代码结合storyboard来做出抽屉效果. 一.在工程中用CocoaPods引入第三方插件PPRevealSideViewController. (1).在终端中搜索PPRevealSideViewController的版本 (2).在P

iOS实现简易抽屉效果、双边抽屉效果_IOS

本文实例为大家分享了iOS实现抽屉效果的全部代码,供大家参考,具体内容如下 iOS实现简易抽屉效果,代码: @interface ViewController () { UIView* _leftView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from

iOS如何用100行代码实现简单的抽屉效果_IOS

前言 iOS中抽屉效果的简单实现现在很多应用中都使用到了,网上也有很多了例子,本文主要是通过简单的一些代码来实现的,有需要的可以一起学习学习. 下面是效果图 示例代码如下 #import <UIKit/UIKit.h> @interface MainViewController : UIViewController + (instancetype)mainViewControllerWithLeftViewController:(UIViewController *)leftViewContr

iOS实现双向滑动条效果_IOS

最近做项目,碰到一种双向滑动条,自己实现了一下,随便写一下思路,方便以后开发,避免重复写代码,以后粘贴就行了.封装了一下,代码如下: #import <UIKit/UIKit.h> typedef NSString* (^HLDoubleSlideViewSwitchStrBock)(CGFloat count); @interface HLDoubleSlideView : UIView @property(nonatomic,assign)CGFloat maxValue; @proper

IOS代码笔记之文字走马灯效果_IOS

本文实例为大家分享了IOS文字走马灯效果具体实现代码,供大家参考,具体内容如下 一.效果图 二.工程图  三.代码RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController @end RootViewController.m #import "RootViewController.h" #import "UXLabel.h" @

详解IOS中如何实现瀑布流效果_IOS

首先是效果演示 特点:可以自由设置瀑布流的总列数(效果演示为2列) 虽然iphone手机的系统相册没有使用这种布局效果,瀑布流依然是一种很常见的布局方式!!!下面来详细介绍如何实现这种布局. 首先使用的类是UICollectionView 我们要做的是自定义UICollectionViewCell和UICollectionViewLayout      1.自定义UICollectionViewCell类,只需要一个UIImageView即可,frame占满整个cell.      2.重点是自