BRPickerView自定义弹框控制方案解析

2025-06-29 14:33:04作者：吴年前Myrtle

背景介绍

BRPickerView作为iOS平台上常用的选择器组件，在表单选择、日期选择等场景中被广泛使用。在实际开发中，我们经常会遇到这样的需求：在选择完成后需要先对数据进行校验或处理，只有通过验证后才允许关闭选择器界面。然而，BRPickerView默认行为是点击"完成"按钮后立即关闭界面，这给需要前置处理的场景带来了不便。

问题分析

开发者在使用BRPickerView时，通常会遇到以下典型场景：

用户选择数据后，需要先验证数据有效性
根据选择结果调用接口，等待接口返回成功后再关闭界面
在选择完成后需要执行一些耗时操作，完成后才允许关闭

这些场景下，选择器自动关闭的行为会导致用户体验不连贯或业务逻辑无法完整执行。

解决方案

BRPickerView提供了addPickerToView方法，允许开发者自定义弹框的背景视图，通过这种方式可以间接控制选择器的关闭行为。具体实现思路如下：

1. 自定义容器视图

通过addPickerToView方法，我们可以将选择器添加到自定义的容器视图中，而不是直接显示在窗口上。这样我们就获得了对选择器显示/隐藏的完全控制权。

// 创建自定义容器视图
UIView *customContainer = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
customContainer.backgroundColor = [UIColor colorWithWhite:0 alpha:0.3];

// 添加选择器到自定义视图
[pickerView addPickerToView:customContainer];

// 显示自定义容器
[self.view addSubview:customContainer];

2. 拦截完成事件

在选择器的完成回调中，我们可以先执行必要的业务逻辑，然后手动控制选择器的关闭：

pickerView.resultBlock = ^(id selectValue) {
    // 1. 处理选择的数据
    if (![self validateData:selectValue]) {
        // 验证失败，保持选择器打开
        return;
    }
    
    // 2. 调用接口等异步操作
    [self submitData:selectValue completion:^(BOOL success) {
        if (success) {
            // 3. 操作成功后再关闭选择器
            [customContainer removeFromSuperview];
        }
    }];
};

3. 完整实现示例

下面是一个完整的实现示例，展示了如何控制选择器的关闭时机：

- (void)showCustomPicker {
    // 1. 创建选择器
    BRStringPickerView *pickerView = [[BRStringPickerView alloc] initWithPickerMode:BRStringPickerComponentSingle];
    pickerView.dataSourceArr = @[@"选项1", @"选项2", @"选项3"];
    
    // 2. 创建自定义容器
    UIView *containerView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    containerView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.3];
    containerView.alpha = 0;
    
    // 3. 添加选择器到容器
    [pickerView addPickerToView:containerView];
    
    // 4. 设置完成回调
    __weak typeof(self) weakSelf = self;
    pickerView.resultBlock = ^(id selectValue) {
        [weakSelf handlePickerResult:selectValue container:containerView];
    };
    
    // 5. 显示容器（带动画）
    [self.view addSubview:containerView];
    [UIView animateWithDuration:0.3 animations:^{
        containerView.alpha = 1;
    }];
}

- (void)handlePickerResult:(id)result container:(UIView *)container {
    // 数据验证
    if (!result) {
        [self showAlert:@"请选择有效选项"];
        return;
    }
    
    // 模拟异步操作
    [self showLoading];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self hideLoading];
        // 操作完成后关闭选择器
        [UIView animateWithDuration:0.3 animations:^{
            container.alpha = 0;
        } completion:^(BOOL finished) {
            [container removeFromSuperview];
        }];
    });
}

进阶技巧

1. 添加取消按钮

在自定义容器中，我们可以添加额外的控制元素，比如取消按钮：

UIButton *cancelBtn = [UIButton buttonWithType:UIButtonTypeSystem];
[cancelBtn setTitle:@"取消" forState:UIControlStateNormal];
[cancelBtn addTarget:self action:@selector(dismissPicker:) forControlEvents:UIControlEventTouchUpInside];
[containerView addSubview:cancelBtn];

2. 自定义动画效果

通过修改容器视图的alpha或transform属性，可以实现各种入场/出场动画：

// 入场动画
containerView.transform = CGAffineTransformMakeScale(0.9, 0.9);
[UIView animateWithDuration:0.3 animations:^{
    containerView.transform = CGAffineTransformIdentity;
    containerView.alpha = 1;
}];

// 出场动画
[UIView animateWithDuration:0.3 animations:^{
    containerView.transform = CGAffineTransformMakeScale(0.9, 0.9);
    containerView.alpha = 0;
} completion:^(BOOL finished) {
    [containerView removeFromSuperview];
}];

3. 处理背景点击

可以通过添加手势识别器来实现点击背景关闭选择器：

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleBackgroundTap:)];
[containerView addGestureRecognizer:tap];

// 确保点击事件不会传递给选择器
tap.delegate = self;

#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
    // 如果点击的是选择器区域，则不响应
    if (CGRectContainsPoint(pickerView.frame, [touch locationInView:containerView])) {
        return NO;
    }
    return YES;
}