当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS自定义导航条实现侧滑功能(含Native和Flutter)

iOS自定义导航条实现侧滑功能(含Native和Flutter)

2020年07月08日  | 移动技术网移动技术  | 我要评论

1、基本页面

iOS7之后是有侧滑返回手势功能的，因此直接触发系统的处理方法就行。当前控制器是根控制器时，不可以侧滑返回，所以不能使其触发手势。在项目的baseVC中，添加以下代码：


@interface BaseViewController ()<UIGestureRecognizerDelegate>
@end

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    if (self.navigationController.viewControllers.count > 1) {
        self.navigationController.interactivePopGestureRecognizer.enabled = YES;
        self.navigationController.interactivePopGestureRecognizer.delegate = self;
    }
}

#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
    return self.navigationController.childViewControllers.count > 1;
}

2、手势冲突:UIScrollView页面

scrollView会拦截baseVC的手势，实现自己的滑动效果，因此我们添加UIScrollView的手势的分类来处理手势冲突。网上也有很多处理方式，最终选择了分类的方式的原因是当前已经很成型的项目，分类的优势在于不需要修改每个类，也不需要重新自定义一个scrollView的基类，然后修改scrollView继承基类。这时候就体现了基类在项目中的优势~

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer
    shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    if ([self panBack:gestureRecognizer]) {
        return YES;
    }
    return NO;
}

- (BOOL)panBack:(UIGestureRecognizer *)gestureRecognizer {
    CGFloat target = 50.0;//自定义一个触发范围
    if (gestureRecognizer == self.panGestureRecognizer) {
        UIPanGestureRecognizer *pan = (UIPanGestureRecognizer *)gestureRecognizer;
        CGPoint point = [pan translationInView:self];
        UIGestureRecognizerState state = gestureRecognizer.state;
        if (UIGestureRecognizerStateBegan == state || UIGestureRecognizerStatePossible == state) {
            //获取手势在屏幕上的位置
            CGPoint windowLocation = [gestureRecognizer locationInView:self.window];
            CGFloat windowLocationX = windowLocation.x;
            if (point.x > 0 && windowLocationX < target) {
                return YES;
            }
        }
    }
    return NO;
}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
    if ([self panBack:gestureRecognizer]) {
        return NO;
    }
    return YES;
}

3、Flutter页面，继承了baseViewController

由于是混合开发，且Flutter的基类页面继承了baseVC，因此Flutter的页面都承载在Flutter的页面中，侧滑的时候会导致Flutter二级页面会直接回到Native页面。

通过继承NavigatorObserver的来监测didPop和didPush，通过invokeMethod定义的方式通知原生，设置当前页面是否允许系统的侧滑。

Flutter代码：

class CustomNavigatorObserver extends NavigatorObserver {
  @override
  void didPop(Route<dynamic> route, Route<dynamic> previousRoute) {
    MessageChannel().canPopFlutterPage(route.navigator.canPop());
  }

  @override
  void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {
    MessageChannel().canPopFlutterPage(!route.isFirst);
  }
}

Native代码：

   [self.baseChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        @strongify(self)
        NSString *method = call.method;
        if ([method isEqualToString:@"canPopFlutterPage"]) {
     self.viewController.navigationController.interactivePopGestureRecognizer.enabled = !canPop;
            result(nil);
        }

Flutter中didPop返回上一页时route.navigator.canPop为YES的时候，原生就禁止侧滑。反之，didPush如果是route.isFirst是Flutter的第一个页面，原生就开启侧滑。

本文地址：https://blog.csdn.net/pearl0922/article/details/107191891

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网