仿Uber的侧拉视图

最新推荐文章于 2019-06-11 16:16:24 发布

ZHZMAREN

最新推荐文章于 2019-06-11 16:16:24 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

分类专栏： iOS之开发

本文链接：https://blog.youkuaiyun.com/ZHZMAREN/article/details/51211083

iOS之开发专栏收录该内容

130 篇文章

订阅专栏

本文介绍了如何创建一个类似Uber应用的侧拉视图，包括添加蒙版、设置边缘手势以及处理滑动手势，特别是在底部包含地图时的边缘手势处理。通过使用UIScreenEdgePanGestureRecognizer实现滑动切换效果，并提供了关闭和打开侧视图的方法。此外，还分享了一个无需使用代理即可执行push操作的小技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看过看多的侧视图还是发现Uber的侧拉视图看着效果比较好一点而且体验还是比较好的

有蒙版有侧视图我只能说这是一个ScrollView！！！而且底部是一个地图的话滑动手势需要处理这里用的额就是一个边缘手势！！以前的文章介绍过这个手势……

//设置边缘手势
-(void)setLeftView{
     self.leftView = [[LeftMenuView alloc]initWithFrame:self.view.bounds];
//     self.leftView.menuDelegate = self;
     UIScreenEdgePanGestureRecognizer *edgeGesture = [[UIScreenEdgePanGestureRecognizer alloc]initWithTarget:self action:@selector(handleGesture:)];
    edgeGesture.edges = UIRectEdgeLeft;
    edgeGesture.delegate = self;
    [self.view addGestureRecognizer:edgeGesture];
}
- (void)handleGesture:(UIScreenEdgePanGestureRecognizer *)gesture
{
    if(UIGestureRecognizerStateBegan == gesture.state)
    {
        [self.navigationController.view addSubview:_leftView];
    }
    else if(UIGestureRecognizerStateChanged == gesture.state)
    {
        // 根据被触摸手势的view计算得出坐标值
        CGPoint translation = [gesture translationInView:gesture.view];

        if (translation.x<_leftView.sideOffset)
        {
            _leftView.contentOffset = CGPointMake(_leftView.sideOffset-translation.x, 0);
        }
    }
    else
    {
        CGPoint translation = [gesture translationInView:gesture.view];
        if (translation.x<_leftView.sideOffset/2)
        {
            [UIView animateWithDuration:0.3 animations:^{
                _leftView.contentOffset = CGPointMake(_leftView.sideOffset, 0);
            }completion:^(BOOL finished) {
                [_leftView removeFromSuperview];
            }];
        }
        else
        {
            [UIView animateWithDuration:0.3 animations:^{
                [_leftView openLeftView:NO];
            }];
        }
    }
}

#pragma mark - GestureRecognizer Delegate
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
    if ([gestureRecognizer isKindOfClass:[UIScreenEdgePanGestureRecognizer class]]) {
        return YES;
    }
    return NO;
}
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldBeRequiredToFailByGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    if ([gestureRecognizer isKindOfClass:[UIScreenEdgePanGestureRecognizer class]]) {
        return YES;
    }
    return NO;
}

这个视图一定是加在导航控制器的View上面的否则导航栏是遮不住的

侧视图需要实现的方法具体看自己需要：

#pragma mark - scrollView
- (void)closeSideView:(BOOL)animated
{
    [UIView animateWithDuration:0.3 animations:^{
        self.contentOffset = CGPointMake(self.sideOffset, 0);
    }completion:^(BOOL finished) {
        [self removeFromSuperview];
    }];
}

- (void)openLeftView:(BOOL)animated
{
    [self setContentOffset:CGPointMake(0, 0) animated:animated];
}

- (void)arrangeViews:(UIScrollView *)scrollView
{
    if (scrollView.contentOffset.x<self.sideOffset/2)
    {
        [self openLeftView:YES];
    }
    else
    {
        [self closeSideView:YES];
    }
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (!decelerate){
        [self arrangeViews:scrollView];
    }
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self arrangeViews:scrollView];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    _alphaView.alpha = (1-self.defaultAlpha)*(self.sideOffset-scrollView.contentOffset.x)/self.sideOffset;
}
- (void)dismissLeftView:(UITapGestureRecognizer *)tap
{
    [self closeSideView:YES];
}