抽屉效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了抽屉效果相关的知识,希望对你有一定的参考价值。

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,防止别人的修改

 

以上是关于抽屉效果的主要内容,如果未能解决你的问题,请参考以下文章

如何在导航抽屉活动模板中的片段之间传递字符串变量

如何从片段返回主要活动

在导航抽屉片段中保存视图页面片段的状态

从片段中禁用导航抽屉

想要使用片段从导航抽屉活动移动到另一个屏幕,以在所有屏幕上显示抽屉

Android:导航抽屉片段内的Viewpager