抽屜效果

效果圖：

抽屜效果.gif

第一步:搭建界面

#define maxY 100
#define ZZScreenW [UIScreen mainScreen].bounds.size.width
#define ZZScreenH [UIScreen mainScreen].bounds.size.height
// MainV定位到右側(cè)的X值
#define ZZTargetR 225
// MainV定位到右側(cè)的X值
#define ZZTargetL -275

#import "ViewController.h"

@interface ViewController ()<UIGestureRecognizerDelegate>
// 左邊的view
@property (nonatomic, weak) UIView *leftV;

// 右邊的view
@property (nonatomic, weak) UIView *rightV;

// 中間的view
@property (nonatomic, weak) UIView *mainV;

@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // 搭建界面
    [self setUpView];
}

- (void)setUpView{
    // 添加左邊的View
    UIView *leftV = [[UIView alloc] initWithFrame:self.view.bounds];
    // 設(shè)置左邊view的背景色為藍(lán)色
    leftV.backgroundColor = [UIColor blueColor];
    [self.view addSubview:leftV];
    // 添加右邊的View
    UIView *rightV = [[UIView alloc] initWithFrame:self.view.bounds];
    // 設(shè)置右邊view的背景色為綠色
    rightV.backgroundColor = [UIColor greenColor];
    self.rightV = rightV;
    [self.view addSubview:rightV];
    // 添加中間的View(中間一個(gè)最后添加,顯示到最外面.)
    UIView *mainV = [[UIView alloc] initWithFrame:self.view.bounds];
    // 設(shè)置中間view的背景色為紅色
    mainV.backgroundColor = [UIColor redColor];
    self.mainV = mainV;
    [self.view addSubview:mainV];
}
@end

第二步.添加手勢(shì)：

- (void)viewDidLoad {
    [super viewDidLoad];
    // 搭建界面
    [self setUpView];
    // 創(chuàng)建拖動(dòng)手勢(shì)
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    // 添加手勢(shì)
    [self.mainV addGestureRecognizer:pan];
}

 // 實(shí)現(xiàn)手勢(shì)方法:
// 當(dāng)手指拖動(dòng)時(shí)調(diào)用.
-(void)pan:(UIPanGestureRecognizer *)pan{
    // 獲取手指在屏幕上面的偏移量
    CGPoint transP = [pan translationInView:self.mainV];
    // 在這里為什么不用Transform,是因?yàn)槲覀円苿?dòng)時(shí),要改變的尺寸大小.用Transform只能改變它的位置.
    // self.mainV.transform  = CGAffineTransformTranslate(self.mainV.transform, transP.x, 0);

    // 計(jì)算mainV的Frame
    self.mainV.frame = [self frameWithOffsetX:transP.x];
    // 每次移動(dòng)時(shí)判斷當(dāng)前MainV的x值是大于0還是小于0.如果是大于0 , 顯示左邊,小于0 顯示右邊
    if (self.mainV.frame.origin.x > 0) {
        self.rightV.hidden = YES;
    }else if(self.mainV.frame.origin.x < 0){
        self.rightV.hidden = NO;
    }
    // 注意要做復(fù)位
    [pan setTranslation:CGPointZero inView:self.mainV];
}

// 根據(jù)偏移量計(jì)算mainV的frame.
- (CGRect)frameWithOffsetX:(CGFloat)offsetX{
    // 取出最原始的Frame
    CGRect frame = self.mainV.frame;
    frame.origin.x += offsetX;
    // 獲取屏幕的寬度

    // (計(jì)算Y值如果下圖:找最大值.當(dāng)Main.x拖動(dòng)最大的時(shí)候,Main.y值也最大.main.x最大為屏幕的寬度)
    // 設(shè)定一個(gè)最大Y值MaxY為100,正好.當(dāng)max.x為屏幕的寬度時(shí),最大Y等于100
    // 所以Y值等于 main.y = main.x * maxY / ScreenW;
    // 有可能frame.origin.x有可能是小于0,小于0的話, 得出的Y值就會(huì)小于0,小于0就會(huì)出現(xiàn), 紅色的View向上走.
    // 對(duì)結(jié)果取絕對(duì)值.
    frame.origin.y =  fabs(frame.origin.x * maxY / screenW);
    // 計(jì)算frame的高度(當(dāng)前Main的高度等于屏幕的高度減去兩倍的Y值.)
    frame.size.height = screenH - 2 * frame.origin.y;
    // 返回計(jì)算好的frame.
    return frame;
}

計(jì)算Y值.png

計(jì)算高度.png

第三步:當(dāng)手指松開時(shí)做到自動(dòng)定位.

// 當(dāng)手指拖動(dòng)時(shí)調(diào)用.
-(void)pan:(UIPanGestureRecognizer *)pan{
    // 獲取手指在屏幕上面的偏移量
    CGPoint transP = [pan translationInView:self.mainV];

    // 計(jì)算mainV的Frame
    self.mainV.frame = [self frameWithOffsetX:transP.x];
    // 每次移動(dòng)時(shí)判斷當(dāng)前MainV的x值是大于0還是小于0.如果是大于0 , 顯示左邊,小于0 顯示右邊
    if (self.mainV.frame.origin.x > 0) {
        self.rightV.hidden = YES;
    }else if(self.mainV.frame.origin.x < 0){
        self.rightV.hidden = NO;
    }
    // 判斷手指的狀態(tài)
    if(pan.state == UIGestureRecognizerStateEnded){
        // 當(dāng)手指松開時(shí)進(jìn)入執(zhí)行
        // 記錄最終判斷結(jié)果后.定位的值.
        CGFloat target = 0;
        // 當(dāng)手指松開,要判斷MainV的x值是否大于屏幕的一半.如果大于屏幕一半時(shí), 自動(dòng)定位到右邊一個(gè)位置.
        if (self.mainV.frame.origin.x > screenW * 0.5) {
            target = targetR;
        }else if(CGRectGetMaxX(self.mainV.frame) < screenW * 0.5){
            // 當(dāng)手指松開,要判斷MainV的最大的X值是否小于屏幕的一半.如果小于屏幕的一半時(shí), 自動(dòng)定位到左邊的位置.
            target = targetL;
        }
        // 最終定位的x值 - 當(dāng)前的main.x的值.求出偏移量.使其定位
        CGFloat offsetX = target - self.mainV.frame.origin.x;
        // 根據(jù)偏移量設(shè)置mainV的frame值
        CGRect frame = [self frameWithOffsetX:offsetX];
        [UIView animateWithDuration:0.25 animations:^{
             // 伴隨動(dòng)畫設(shè)置frame
            self.mainV.frame = frame;
        }];
    }
    // 注意要做復(fù)位
    [pan setTranslation:CGPointZero inView:self.mainV];
}

求出偏移量.png