美文网首页
iOS实现Popover弹窗(类似气泡弹窗)

iOS实现Popover弹窗(类似气泡弹窗)

作者: alpha_feng | 来源:发表于2020-03-14 19:47 被阅读0次

    前言

    最近项目有一个需求需要实现一个类似气泡的popover弹窗,就是点击一个按钮的时候在按钮的某一个方向弹出一个视图,这个视图需要带有一个箭头指向。就像下图是简书和微信的样式

    简书 系统样式 微信 自定义样式
    系统样式UIPopoverPresentationController

    系统样式就比较简单了,就是一个UIViewController然后设置modalPresentationStyle属性,要记住实现UIPopoverPresentationControllerDelegate代理的adaptivePresentationStyleForPresentationController方法
    具体看代码

    - (IBAction)clickpopoverBtn:(id)sender {
        PopViewController *testVC = [[PopViewController alloc] init];
        testVC.preferredContentSize = CGSizeMake(150, 150);
        testVC.modalPresentationStyle = UIModalPresentationPopover;
        testVC.popoverPresentationController.delegate = self;
        testVC.popoverPresentationController.sourceView = self.popoverBtn;
        testVC.popoverPresentationController.permittedArrowDirections = UIPopoverArrowDirectionUp;
        testVC.popoverPresentationController.backgroundColor = [UIColor redColor];
        testVC.popoverPresentationController.canOverlapSourceViewRect = NO;
        [self presentViewController:testVC animated:YES completion:nil];
    }
    
    #pragma mark - <UIPopoverPresentationControllerDelegate>
    - (UIModalPresentationStyle)adaptivePresentationStyleForPresentationController:(UIPresentationController *)controller {
        return UIModalPresentationNone;
    }
    

    popover主动消失,直接调用dismiss就可以了。

    - (void)clickBtn:(UIButton *)aBtn {
        [self dismissViewControllerAnimated:YES completion:nil];
    }
    

    但是\color{red}{UIPopoverPresentationController}有个的地方需要注意,滑动触摸显示区域以外的区域是不会消失,只有\color{red}{点击}才可以消失。这个点很僵硬,万恶的产品是很难接受的!\color{red}{redd}
    还有就是箭头的大小,间距,显示隐藏的动画时间点等都难修改,不过我个人觉得系统自带的控件本身就挺好看的。。。。。

    自定义样式

    系统自带的不合适就只能自己撸罗。。。


    自定义样式Up
    自定义样式Left

    1.使用了一个三角形的图片做箭头,支持上下左右;
    2.显示内容contentView暴露出来是可以添加其他的UIView
    3.contentView支持跳转大小等。。。
    4.支持显示区域范围的设施,超出范围会自动移动到显示范围内。
    5.上下会自动调整,左右会自动调整,不支持设置为Up自动调整为Right。
    代码传送门

    相关文章

      网友评论

          本文标题:iOS实现Popover弹窗(类似气泡弹窗)

          本文链接:https://www.haomeiwen.com/subject/vgiwshtx.html