用UIPresentationController来写一个简洁的底部弹出控件

iOS App开发过程中,底部弹出框是一个非常常见的需求。实现这个需求的方式有很多,直接添加一个自定义的View让它动画展示和隐藏都是一种非常简单的操作或者直接使用presentViewController弹出一个控制器等等方法。本人在之前的项目中基本上使用presentViewController弹出一个控制器实现该功能,在代码的实现代码相对比较多,今天要讲的是使用UIPresentationController实现该功能,UIPresentationController是iOS8提出来的,可以方便快捷地创建一个高定制化的底部弹出框。

UIPresentationController

使用时需要新建一个类继承UIPresentationController并重写以下几个方法和属性:

//重写此方法可以在弹框即将显示时执行所需要的操作
- (void)presentationTransitionWillBegin;
//重写此方法可以在弹框显示完毕时执行所需要的操作
- (void)presentationTransitionDidEnd:(BOOL)completed;
//重写此方法可以在弹框即将消失时执行所需要的操作
- (void)dismissalTransitionWillBegin;
//重写此方法可以在弹框消失之后执行所需要的操作
- (void)dismissalTransitionDidEnd:(BOOL)completed;
//决定了弹出框的frame
- (CGRect)frameOfPresentedViewInContainerView;
//初始化方法
- (instancetype)initWithPresentedViewController:(UIViewController *)presentedViewController presentingViewController:(UIViewController *)presentingViewController;

在使用弹出窗口的时候大部分情况下都是背景颜色由无色透明逐渐变得黑色透明,可以在自定的UIPresentationController中添加一view的属性

@property (strong, nonatomic) UIView *blackView;

懒加载

- (UIView *)blackView {
    if (_blackView == nil) {
        _blackView = [[UIView alloc] initWithFrame:self.containerView.bounds];
        _blackView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
    }
    return _blackView;
}

添加controllerHeight属性,用于表示即将弹窗出现的控制器的高度,或者直接手动指定高度。

@property (assign, nonatomic) CGFloat controllerHeight;

在初始化方法中指定该值,presentedViewController表示即将弹出的控制器

- (instancetype)initWithPresentedViewController:(UIViewController *)presentedViewController presentingViewController:(UIViewController *)presentingViewController {
    if (self = [super initWithPresentedViewController:presentedViewController presentingViewController:presentingViewController]) {
        _controllerHeight = presentedViewController.controllerHeight == 0 ? [UIScreen mainScreen].bounds.size.height : presentedViewController.controllerHeight;
    }
    return self;
}

- (void)presentationTransitionWillBegin {
    [super presentationTransitionWillBegin];
    self.blackView.alpha = 0;
    [self.containerView addSubview:self.blackView];
    [UIView animateWithDuration:1.0 animations:^{
        self.blackView.alpha = 1;
    }];
}

- (void)dismissalTransitionWillBegin {
    [super dismissalTransitionWillBegin];
    [UIView animateWithDuration:1.0 animations:^{
        self.blackView.alpha = 0;
    }];
}

- (void)dismissalTransitionDidEnd:(BOOL)completed {
    [super dismissalTransitionDidEnd:completed];
    if (completed) {
        [self.blackView removeFromSuperview];
    }
}


- (CGRect)frameOfPresentedViewInContainerView {
    return CGRectMake(0, [UIScreen mainScreen].bounds.size.height-_controllerHeight, [UIScreen mainScreen].bounds.size.width, _controllerHeight);
}

一般弹出窗口点击透明部分都会收起窗口,可以在blackview中实现点击功能

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onClick:)];
        tap.numberOfTapsRequired = 1;
        tap.numberOfTouchesRequired = 1;
        [_blackView addGestureRecognizer:tap];
- (void)onClick:(UIGestureRecognizer *)gestureRecognizer {
    CGPoint point = [gestureRecognizer locationInView:self.blackView];
    if (!CGRectContainsPoint([self frameOfPresentedViewInContainerView], point)) {
        [self.presentedViewController dismissViewControllerAnimated:YES completion:nil];
    }
}

另外在初始化方法中presentedViewController有个属性controllerHeight需要我们自己动态添加该属性,创建UIViewController的Category,并定义弹窗的方法

@interface UIViewController (KKExtension)<UIViewControllerTransitioningDelegate>
/** 控制器高度 */
@property (assign, nonatomic) CGFloat controllerHeight;

- (void)modal:(UIViewController *)vc controllerHeight:(CGFloat)controllerHeight;
@end
- (void)setControllerHeight:(CGFloat)controllerHeight {
    objc_setAssociatedObject(self, @"height", @(controllerHeight), OBJC_ASSOCIATION_ASSIGN);
}

- (CGFloat)controllerHeight {
    return [objc_getAssociatedObject(self, @"height") floatValue];
}


- (UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source {
    return [[KKPresentBottom alloc] initWithPresentedViewController:presented presentingViewController:presenting];
}

- (void)modal:(UIViewController *)vc controllerHeight:(CGFloat)controllerHeight {
    vc.modalPresentationStyle = UIModalPresentationCustom;
    vc.controllerHeight = controllerHeight;
    vc.transitioningDelegate = self;
    [self presentViewController:vc animated:YES completion:nil];
}

至此已实现该弹窗功能,只需在要弹窗的地方实现

UIViewController *vc = [[UIViewController alloc] init];
    [self modal:vc controllerHeight:500];

demo

推荐阅读更多精彩内容