2016-1-15 抽屉效果实现demo

//
//  ViewController.m
//  抽屉
//
//  Created by Mac on 16/1/15.
//  Copyright © 2016年 Mac. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, weak) UIView *mainView;
@property (nonatomic, weak) UIView *leftView;
@property (nonatomic, weak) UIView *rightView;
@property (nonatomic, assign) BOOL drag;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    CGFloat scH = [UIScreen mainScreen].bounds.size.height;
    CGFloat scW = [UIScreen mainScreen].bounds.size.width;

    UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, scW, scH)];
    leftView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:leftView];
    self.leftView = leftView;

    UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, scW, scH)];
    rightView.backgroundColor = [UIColor redColor];
    [self.view addSubview:rightView];
    self.rightView = rightView;

    UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, scW, scH)];
    mainView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:mainView];
    self.mainView = mainView;

    UIPanGestureRecognizer *pan =[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self.mainView addGestureRecognizer:pan];

    UITapGestureRecognizer *tap =[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)];
    [self.view addGestureRecognizer:tap];
//    [self.rightView addGestureRecognizer:tap];
//    [self.leftView addGestureRecognizer:tap];

    [self.rightView setHidden: YES];
    [self.leftView setHidden:YES];

}
#pragma mark - Event after view clicked
- (void)tap:(UITapGestureRecognizer *)tapGest {
//    UIView *view = tapGest.view;
    NSLog(@"%s",__func__);
    NSLog(@"%lf",self.mainView.frame.origin.x);
    CGFloat scH = [UIScreen mainScreen].bounds.size.height;
    CGFloat scW = [UIScreen mainScreen].bounds.size.width;
    if (self.mainView.frame.origin.x != 0) {
        [UIView animateWithDuration:0.35 animations:^{
            self.mainView.frame = CGRectMake(0, 0, scW, scH);
        } completion:^(BOOL finished) {
            [self.rightView setHidden:YES];
            [self.leftView setHidden:YES];
        }];
    }
}
- (void)pan:(UIPanGestureRecognizer *)panGest
{
    CGFloat scH = [UIScreen mainScreen].bounds.size.height;
    CGFloat scW = [UIScreen mainScreen].bounds.size.width;

    CGPoint transform = [panGest translationInView:panGest.view];

    if (transform.x > 0) {//向右滑动
        if (self.leftView.isHidden) {//判断起始滑动的状态
            [self.rightView setHidden:NO];
            self.drag = NO;
            [self setupFrameWith:self.drag and:panGest];
        }
        if(self.rightView.isHidden && self.mainView.frame.origin.x <=0 ){// 表明用户现在在左边的界面,但是需要往回拖,也需要注意self.mainView.origin.x的大小,以防用户拖过界
            self.drag = YES;
            [self setupFrameWith:self.drag and:panGest];
        }

    }else if (transform .x <  0 ){//向左滑动
        if (self.rightView.isHidden) {
            [self.leftView setHidden:NO];
            self.drag = YES;
            [self setupFrameWith:self.drag and:panGest];
        }else if (self.leftView.isHidden&&self.mainView.frame.origin.x >= 0){//现在背景是rightView,且需要判断self.mianView.frame.origin.x的值,以防用户拖过界
            self.drag = NO;
            [self setupFrameWith:self.drag and:panGest];

        }
    }
    if (panGest.state == UIGestureRecognizerStateEnded) {// 表示手势结束
            // 先判断现在主界面的位置,然后再决定是否隐藏界面和弹回界面

        // 找出最大最小的x
        CGFloat maxX = CGRectGetMaxX(self.mainView.frame);
        CGFloat minX = CGRectGetMinX(self.mainView.frame);
        NSLog(@"%lf",minX);

        // 用户拖过时弹回
        if ( minX > 0.8*scW) {
            NSLog(@"%s",__func__);
            [UIView animateWithDuration:0.2 animations:^{
                self.mainView.frame = CGRectMake(0.8*scW, 0.4*scW, scW, scH - 0.8*scW);
            } ];
        }
        if (maxX < 0.2*scW) {
//            NSLog(@"%s",__func__);
            [UIView animateWithDuration:0.2 animations:^{
                self.mainView.frame = CGRectMake(-0.8*scW, 0.4*scW, scW, scH - 0.8*scW);
            } ];
        }

        if ( minX < scW / 2 && minX > 0) {//此时在右界面且需要弹回

         [UIView animateWithDuration:0.35 animations:^{
             self.mainView.frame = CGRectMake(0, 0, scW, scH);
         } completion:^(BOOL finished) {
             [self.rightView setHidden:YES];// 再动画完成后在隐藏;
         }];

        }else if(maxX > scW /2 && minX < 0){
            [UIView animateWithDuration:0.35 animations:^{
                self.mainView.frame = CGRectMake(0, 0, scW, scH);
            } completion:^(BOOL finished) {
                [self.leftView setHidden:YES];// 再动画完成后在隐藏;
            }];
        }

   }

}
- (void)setupFrameWith:(BOOL)drag and:(UIPanGestureRecognizer *)panGest
{
    CGFloat scH = [UIScreen mainScreen].bounds.size.height;
    CGFloat scW = [UIScreen mainScreen].bounds.size.width;
    // 原始frame
    CGRect frame =  self.mainView.frame;

    CGPoint transform = [panGest translationInView:panGest.view];
    CGFloat x = frame.origin.x+ transform.x;
    CGFloat y = frame.origin.y + transform.x/2;
    if(drag == YES){
      x = frame.origin.x+ transform.x;
      y = frame.origin.y - transform.x/2;
    }

    CGRect nextFrame = CGRectMake(x, y, scW, scH - y*2);

    self.mainView.frame = nextFrame;

    [panGest setTranslation:CGPointZero inView:panGest.view];

}
@end

从这个demo里学习巩固了很多知识,感觉好爽~~

时间: 2024-10-13 14:32:23

2016-1-15 抽屉效果实现demo的相关文章

猫猫学IOS(二十六)UI之iOS抽屉效果小Demo

猫猫分享,必须精品 素材代码地址:http://blog.csdn.net/u013357243/article/details/45305785 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果 实现过程 第一步,把三个view设置好,还有颜色 #warning 第一步 - (void)addChildView { // left UIView *leftView = [[UIVie

(素材源码)猫猫学IOS(二十六)UI之iOS抽屉效果小Demo

猫猫分享,必须精品 素材代码地址:http://download.csdn.net/detail/u013357243/8635679 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果 源码 NYDrawViewController.h // // NYDrawViewController.h // 06-抽屉效果 // // Created by apple on 14-9-1. /

抽屉效果学习

1, Ios左右菜单PPRevealSideviewController使用的一些心得 代码编写 http://blog.csdn.net/qjlhlh/article/details/8204563 2 stoaryBoard编写 iOS抽屉效果的demo http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c42246071a27a2b820260d57938327

iOS侧拉栏抽屉效果Demo

源码下载 侧拉栏抽屉效果Demo 需要导入第三方的类库如下: 抽屉效果所需第三方类库下载 效果:既可以两侧都实现抽屉效果也可只实现左侧栏或者右侧栏的抽屉效果                            关于抽屉效果主要是AppDelegate的代码 AppDelegate.h文件代码: <span style="font-size:18px;"><span style="font-size:18px;">#import <UI

动画的抽屉效果

添加三个View // // ViewController.m // UISenior17_抽屉效果 // // Created by lanou3g on 16/5/27. // Copyright © 2016年 张明杰. All rights reserved. // #import "ViewController.h" //frame #define XMGkeyPath(objc, keyPath) @(((void)objc.keyPath, #keyPath)) //获取

iOS开发——实用技术OC篇&amp;简单抽屉效果的实现

简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一些功夫了,我们这里知识简单的介绍怎么去实现,不过一般我们开发都是找别人做好的,也没必要烂肺时间,除非你真的是大牛或者闲的蛋疼. 其实关于抽屉效果就是界面有三个View,其实一个主View其他两个分别是左边和右边的View,我们分别为他们添加手势,实现左右滑动显示对应的View. 一:所以,首先我们需

抽屉效果的实现

抽屉效果 添加子视图 *   简单的滑动效果 * 监听控制器处理事件方法 * 获取x轴偏移量 * 改变主视图的frame *   利用KVO做视图切换 往左移动,显示右边,隐藏左边 往右移动,显示左边,隐藏右边 *  复杂的滑动效果,PPT讲解(根据手指每移动一点,x轴的偏移量算出当前视图的frame) 假设x移到320时,y移动到60,算出没移动一点x,移动多少y offsetY = offsetX * 60 / 320  手指每移动一点,x轴偏移量多少,y偏移多少 为了好看,x移动到320,

ios开发中超简单抽屉效果(MMDrawerController)的实现

ios开发中,展示类应用通常要用到抽屉效果,由于项目需要,本人找到一个demo,缩减掉一些不常用的功能,整理出一个较短的实例. 首先需要给工程添加第三方类库 MMDrawerController: 这里讲的实例只加入了左滑抽屉.右滑和左滑只是初始化时多添加一个右视图控制器,其他方法基本相同. 下面是用手势实现抽屉的拉出和收回 1.初始化跟视图控制器时,在AppDelegate中导入头文件 #import "MMDrawerController.h" 2.初始化方法先初始化左视图和中心视

简单的抽屉效果

简单的抽屉效果是由3 个View 组成,顶层默认显示的mainV,左边的leftV以及右边的rightV ,当mainV 监听到滑动时,计算滑动的偏移量,控制显示leftV或者rightV. 废话不多说,上代码. 一:所以,首先我们需要在头文件中定义三个View的属性,来给外界调用,实现设置对应的属性和效果: 1 @property (nonatomic, weak, readonly) UIView *mainV; 2 3 @property (nonatomic, weak, readonl