抽屉效果

Posted 2020-06-13

1、自己实现抽屉效果

思路：

给一个控制器的view添加三个大小和self.view frame一样的子控件（左中右），中间的最后添加，会显示在最上面；

// 添加子控件
- (void)setUpAllChildView
{
    // left
    UIView *leftV = [[UIView alloc] initWithFrame:self.view.bounds];
    _leftV = leftV;
    leftV.backgroundColor = [UIColor greenColor];
    [self.view addSubview:leftV];
    
    // right
    UIView *rightV = [[UIView alloc] initWithFrame:self.view.bounds];
    _rightV = rightV;
    rightV.backgroundColor = [UIColor blueColor];
    [self.view addSubview:rightV];
    
    // main
    UIView *mainV = [[UIView alloc] initWithFrame:self.view.bounds];
    _mainV = mainV;
    mainV.backgroundColor = [UIColor redColor];
    [self.view addSubview:mainV];
}

 

给中间的view 添加手势，根据手势的在控件上的位置，来决定是否隐藏后面两个控件中的哪个控件；

    // 添加手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [_mainV addGestureRecognizer:pan];

// 只要手指在mainV拖动的时候调用
- (void)pan:(UIPanGestureRecognizer *)pan
{
    // 让mainV随着手指移动而移动
    
    // 获取手指x轴偏移量
    CGFloat offsetX = [pan translationInView:_mainV].x;
    
    // 修改mainV的frame
    _mainV.frame = [self frameWithOffsetX:offsetX];
    
    //手指的偏移量（上面的offsetX）是变化后的值，而不是变化了的值

    [pan setTranslation:CGPointZero inView:_mainV];

　　// 判断下当前显示左边的view,还是右边的view
    [self isShowLeftView];
}

在拖动中间view的时候，给中间view添加缩放效果；

上面只是更改了x，缩放效果要把x,y,宽高都要进行改变；

#define maxY 100

// 计算当前mainV最新的frame
- (CGRect)frameWithOffsetX:(CGFloat)offsetX
{
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    CGFloat screenH = [UIScreen mainScreen].bounds.size.height;
    
    CGRect frame = _mainV.frame;
    
    // 最新的x
    CGFloat x = frame.origin.x += offsetX;
    
    CGFloat y = fabs(x / screenW * maxY);
    
    CGFloat h = screenH - 2 * y;
    
    CGFloat scale = h / screenH;
    
    CGFloat w = screenW * scale;
    
    
    return CGRectMake(x, y, w, h);
}

当拖动手势结束，根据位置进行定位

#define targetR 300

#define targetL -250

- (void)pan:(UIPanGestureRecognizer *)pan
{
    // 让mainV随着手指移动而移动
    
    // 获取x轴偏移量
    CGFloat offsetX = [pan translationInView:_mainV].x;
    
    // 修改mainV的frame
    _mainV.frame = [self frameWithOffsetX:offsetX];
    
    // 复位
    [pan setTranslation:CGPointZero inView:_mainV];
    
    // 判断下当前显示左边的view,还是右边的view
    [self isShowLeftView];
    
    if (pan.state == UIGestureRecognizerStateEnded) {
        // 手指抬起,拖动结束
        // 定位功能
        NSLog(@"手指抬起");
        CGFloat target = 0;
        if (_mainV.frame.origin.x > screenW * 0.5) {
             // main.x > screenW * 0.5,定位到右边某个点
            target = targetR;
        }else if (CGRectGetMaxX(_mainV.frame) < screenW * 0.5){
            // max(main.x) < screenW * 0.5,定位到左边某个点
            target = targetL;
        }
        
        // 计算偏移量
        CGFloat offsetX = target - _mainV.frame.origin.x;
        
        [UIView animateWithDuration:0.25 animations:^{
            
            _mainV.frame = [self frameWithOffsetX:offsetX];
        }];
        
    }
}

给中间的view添加点按手势，当拖拽之后，在进行点击的时候进行复位。

- (void)tap
{
    // 点击控制器的view调用

    if (_mainV.frame.origin.x != 0) {
        [UIView animateWithDuration:0.25 animations:^{
            
            // 复位
            _mainV.frame = self.view.bounds;
        }];
    }
}

 

2、抽屉效果第三方框架

http://www.bkjia.com/iosjc/993198.html

 

taps:封装自己的东西，控件暴漏出去，一定要readonly，防止别人的修改