iOS弹出框-YJPopoverController的介绍和使用

Simulator Screen Shot 2017年1月2日 下午4.48.48.png

前言

在iPad开发中，有一个控件叫做UIPopoverController（只能在iPad上用，不能在iPhone中用），它的作用是在点击按钮上显示一个弹出框。下面我们来一起看看如何在iPhone上实现UIPopoverController的效果。

1、iPad上UIPopoverController的用法

  • iPad上使用UIPopoverController
- (void)btnTapAction:(UIButton *)btn
{
    YJViewController *yjViewController = [[YJViewController alloc] init];
    YJViewController.title = @"关于我们";
    UINavigationController *navigation = [[UINavigationController alloc] initWithRootViewController:YJViewController];
    UIPopoverController* abourtPopoverController = [[UIPopoverController alloc] initWithContentViewController:navigation];
    //弹出窗口大小
    abourtPopoverController.popoverContentSize = CGSizeMake(320,480);

    //弹出关于界面
    [abourtPopoverController presentPopoverFromRect:btn.frame //中心点是用来画箭头的，如果中心点如果出了屏幕，系统会优化到窗口边缘
                                             inView:btn.superview
                           permittedArrowDirections:UIPopoverArrowDirectionDown //箭头方向
                                           animated:YES];
}

2、实现iPhone上的弹出框-----YJPopoverController

  • 先看初始化接口
/**
 *
 *  @param contentViewController 内容视图
 *  @param popoverContentSize    内容视图大小
 *
 */
- (instancetype)initWithContentViewController:(UIViewController *)contentViewController popoverContentSize:(CGSize)popoverContentSize;
  • 初始化之后就来调用该类，箭头支持四个方向
/**
 *
 *  @param fromRect                以此rect来决定弹出框位置
 *  @param inView                  fromRect参数是以此view为参考
 *  @param permitterArrowDirection 箭头方向
 *  @param animated                是否有动画
 */
- (void)presentPopoverFromRect:(CGRect)fromRect inView:(UIView *)inView permitterArrowDirections:(YJPopoverArrowDirection)permitterArrowDirection animated:(BOOL)animated;

//箭头类型
typedef NS_ENUM(NSUInteger, YJPopoverArrowDirection) {
    YJPopoverArrowDirection_up,         //箭头向上
    YJPopoverArrowDirection_left,       //箭头向左
    YJPopoverArrowDirection_down,       //箭头向下
    YJPopoverArrowDirection_right       //箭头向右
};
  • 完整的调用代码
- (IBAction)btnPopDownTapAction:(UIButton *)btn
{
    YJPopoverContentController *contentController= [[YJPopoverContentController alloc] init];
    
    YJPopoverController *popController = [[YJPopoverController alloc] initWithContentViewController:contentController popoverContentSize:CGSizeMake(150, 35 * 3 + 10)];
    [popController presentPopoverFromRect:btn.frame inView:btn.superview permitterArrowDirections:YJPopoverArrowDirection_down animated:YES];
}

3、YJPopoverController实现原理

  • 本框架由两个类组成，YJPopoverController和YJPopoverView。YJPopoverView用来画背景框（包括箭头），YJPopoverController用来显示和管理YJPopoverView和内容视图。

  • YJPopoverView继承自UIView，根据箭头方向画背景框

- (void)drawRect:(CGRect)rect
{
    [[UIColor blackColor] setFill];
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    switch (self.arrowDirection) {
        case YJPopoverArrowDirection_up:
        {
            CGContextMoveToPoint(context, self.arrowLocation, CGRectGetMinY(rect));
            CGContextAddLineToPoint(context, self.arrowLocation - kPopoverViewArrowHeight, CGRectGetMinY(rect) + kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, CGRectGetMinX(rect), CGRectGetMinY(rect) + kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, CGRectGetMinX(rect), CGRectGetMaxY(rect));
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMaxY(rect));
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMinY(rect) + kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, self.arrowLocation + kPopoverViewArrowHeight, CGRectGetMinY(rect) + kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, self.arrowLocation, CGRectGetMinY(rect));
        }
            break;
        case YJPopoverArrowDirection_left:
        {
            CGContextMoveToPoint(context, CGRectGetMinX(rect), CGRectGetMinY(rect));
            CGContextAddLineToPoint(context, CGRectGetMinX(rect), CGRectGetMaxY(rect));
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect) - kPopoverViewArrowHeight, CGRectGetMaxY(rect));
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect) - kPopoverViewArrowHeight, self.arrowLocation + kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect), self.arrowLocation);
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect) - kPopoverViewArrowHeight, self.arrowLocation - kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect) - kPopoverViewArrowHeight, CGRectGetMinY(rect));
            CGContextAddLineToPoint(context, CGRectGetMinX(rect), CGRectGetMinY(rect));
        }
            break;
        case YJPopoverArrowDirection_down:
        {
            CGContextMoveToPoint(context, CGRectGetMinX(rect), CGRectGetMinY(rect));
            CGContextAddLineToPoint(context, CGRectGetMinX(rect), CGRectGetMaxY(rect) - kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, self.arrowLocation - kPopoverViewArrowHeight, CGRectGetMaxY(rect) - kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, self.arrowLocation, CGRectGetMaxY(rect));
            CGContextAddLineToPoint(context, self.arrowLocation + kPopoverViewArrowHeight, CGRectGetMaxY(rect) - kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMaxY(rect) - kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMinY(rect));
            CGContextAddLineToPoint(context, CGRectGetMinX(rect), CGRectGetMinY(rect));
        }
            break;
        case YJPopoverArrowDirection_right:
        {
            CGContextMoveToPoint(context, CGRectGetMinX(rect) + kPopoverViewArrowHeight, CGRectGetMinY(rect));
            CGContextAddLineToPoint(context, CGRectGetMinX(rect) + kPopoverViewArrowHeight, self.arrowLocation - kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, CGRectGetMinX(rect), self.arrowLocation);
            CGContextAddLineToPoint(context, CGRectGetMinX(rect) + kPopoverViewArrowHeight, self.arrowLocation + kPopoverViewArrowHeight);
            CGContextAddLineToPoint(context, CGRectGetMinX(rect) + kPopoverViewArrowHeight, CGRectGetMaxY(rect));
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMaxY(rect));
            CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMinY(rect));
            CGContextAddLineToPoint(context, CGRectGetMinX(rect) + kPopoverViewArrowHeight, CGRectGetMinY(rect));
        }
            break;
        default:
            break;
    }
    
    CGContextDrawPath(context, kCGPathFillStroke);
}
  • YJPopoverController用来显示YJPopoverView和内容视图，同时对弹出框超过屏幕边缘的时候做一些纠正处理。
- (void)presentPopoverFromRect:(CGRect)fromRect inView:(UIView *)inView permitterArrowDirections:(YJPopoverArrowDirection)permitterArrowDirection animated:(BOOL)animated
{
    self.popoverView.arrowDirection = permitterArrowDirection;
    
    CGRect contentRect = [inView convertRect:fromRect toView:kYJCurrentWindow];
    
    switch (permitterArrowDirection) {
        case YJPopoverArrowDirection_up:
        {
            self.contentViewRect = CGRectMake(0, kPopoverViewArrowHeight, self.popoverContentSize.width, self.popoverContentSize.height);
            
            CGFloat viewLeft;
            CGFloat viewRight;
            
            //点击视图位于屏幕左边时， 判断弹出视图是否超出屏幕左边缘，如果超出就将弹出视图整个右移；
            //点击视图位于屏幕右边时， 判断弹出视图是否超出屏幕右边缘，如果超出就将弹出视图整个左移;
            if (CGRectGetMidX(contentRect) <= CGRectGetMidX(kYJCurrentWindow.bounds)) {
                viewLeft = CGRectGetMidX(contentRect) - self.popoverContentSize.width / 2;
                if (viewLeft < 0) {
                    viewLeft = kPopoverViewMaginToScreen;
                }
                self.popoverView.arrowLocation = CGRectGetMidX(contentRect) - viewLeft;
                self.view.frame = CGRectMake(viewLeft, CGRectGetMaxY(contentRect) + kPopoverViewMaginToBtn, self.popoverContentSize.width, self.popoverContentSize.height);
            }
            else {
                viewRight = CGRectGetMidX(contentRect) + self.popoverContentSize.width / 2;
                if (viewRight > kYJScreenWidth) {
                    viewRight = kYJScreenWidth - kPopoverViewMaginToScreen;
                }
                self.popoverView.arrowLocation = CGRectGetWidth(self.popoverView.bounds) - (viewRight - CGRectGetMidX(contentRect));
                self.view.frame = CGRectMake(viewRight - self.popoverContentSize.width, CGRectGetMaxY(contentRect) + kPopoverViewMaginToBtn, self.popoverContentSize.width, self.popoverContentSize.height);
            }
        }
            break;
        case YJPopoverArrowDirection_left:
        {
            self.contentViewRect = CGRectMake(0, 0, self.popoverContentSize.width - kPopoverViewArrowHeight, self.popoverContentSize.height);
            
            CGFloat viewTop;
            CGFloat viewBottom;
            
            //点击视图位于屏幕上方时， 判断弹出视图是否超出屏幕上边缘，如果超出就将弹出视图整个下移；
            //点击视图位于屏幕下方时， 判断弹出视图是否超出屏幕下边缘，如果超出就将弹出视图整个上移;
            if (CGRectGetMidY(contentRect) <= CGRectGetMidY(kYJCurrentWindow.bounds)) {
                viewTop = CGRectGetMidY(contentRect) - self.popoverContentSize.height / 2;
                if (viewTop < 0) {
                    viewTop = kPopoverViewMaginToScreen;
                }
                self.popoverView.arrowLocation = CGRectGetMidY(contentRect) - viewTop;
                self.view.frame = CGRectMake(CGRectGetMinX(contentRect) - kPopoverViewMaginToBtn - self.popoverContentSize.width, viewTop, self.popoverContentSize.width, self.popoverContentSize.height);
            }
            else {
                viewBottom = CGRectGetMidY(contentRect) + self.popoverContentSize.height / 2;
                if (viewBottom > kYJScreenHeight) {
                    viewBottom = kYJScreenHeight - kPopoverViewMaginToScreen;
                }
                self.popoverView.arrowLocation = CGRectGetHeight(self.popoverView.bounds) - (viewBottom - CGRectGetMidY(contentRect));
                self.view.frame = CGRectMake(CGRectGetMinX(contentRect) - kPopoverViewMaginToBtn - self.popoverContentSize.width, viewBottom - self.popoverContentSize.height, self.popoverContentSize.width, self.popoverContentSize.height);
            }
        }
            break;
        case YJPopoverArrowDirection_down:
        {
            self.contentViewRect = CGRectMake(0, 0, self.popoverContentSize.width, self.popoverContentSize.height - kPopoverViewArrowHeight);
            
            CGFloat viewLeft, viewRight;
            
            //点击视图位于屏幕左边时， 判断弹出视图是否超出屏幕左边缘，如果超出就将弹出视图整个右移；
            //点击视图位于屏幕右边时， 判断弹出视图是否超出屏幕右边缘，如果超出就将弹出视图整个左移;
            if (CGRectGetMidX(contentRect) <= CGRectGetMidX(kYJCurrentWindow.bounds)) {
                viewLeft = CGRectGetMidX(contentRect) - self.popoverContentSize.width / 2;
                if (viewLeft < 0) {
                    viewLeft = kPopoverViewMaginToScreen;
                }
                self.popoverView.arrowLocation = CGRectGetMidX(contentRect) - viewLeft;
                self.view.frame = CGRectMake(viewLeft, CGRectGetMinY(contentRect) - kPopoverViewMaginToBtn - self.popoverContentSize.height, self.popoverContentSize.width, self.popoverContentSize.height);
            }
            else {
                viewRight = CGRectGetMidX(contentRect) + self.popoverContentSize.width / 2;
                if (viewRight > kYJScreenWidth) {
                    viewRight = kYJScreenWidth - kPopoverViewMaginToScreen;
                }
                self.popoverView.arrowLocation = CGRectGetWidth(self.popoverView.bounds) - (viewRight - CGRectGetMidX(contentRect));
                self.view.frame = CGRectMake(viewRight - self.popoverContentSize.width, CGRectGetMinY(contentRect) - kPopoverViewMaginToBtn - self.popoverContentSize.height, self.popoverContentSize.width, self.popoverContentSize.height);
            }
        }
            break;
        case YJPopoverArrowDirection_right:
        {
            self.contentViewRect = CGRectMake(kPopoverViewArrowHeight, 0, self.popoverContentSize.width - kPopoverViewArrowHeight, self.popoverContentSize.height);
            
            CGFloat viewTop, viewBottom;
            
            //点击视图位于屏幕上方时， 判断弹出视图是否超出屏幕上边缘，如果超出就将弹出视图整个下移；
            //点击视图位于屏幕下方时， 判断弹出视图是否超出屏幕下边缘，如果超出就将弹出视图整个上移;
            if (CGRectGetMidY(contentRect) <= CGRectGetMidY(kYJCurrentWindow.bounds)) {
                viewTop = CGRectGetMidY(contentRect) - self.popoverContentSize.height / 2;
                if (viewTop < 0) {
                    viewTop = kPopoverViewMaginToScreen;
                }
                self.popoverView.arrowLocation = CGRectGetMidY(contentRect) - viewTop;
                self.view.frame = CGRectMake(CGRectGetMaxX(contentRect) + kPopoverViewMaginToBtn, viewTop, self.popoverContentSize.width, self.popoverContentSize.height);
            }
            else {
                viewBottom = CGRectGetMidY(contentRect) + self.popoverContentSize.height / 2;
                if (viewBottom > kYJScreenHeight) {
                    viewBottom = kYJScreenHeight - kPopoverViewMaginToScreen;
                }
                self.popoverView.arrowLocation = CGRectGetHeight(self.popoverView.bounds) - (viewBottom - CGRectGetMidY(contentRect));
                self.view.frame = CGRectMake(CGRectGetMaxX(contentRect) + kPopoverViewMaginToBtn, viewBottom - self.popoverContentSize.height, self.popoverContentSize.width, self.popoverContentSize.height);
            }
        }
            break;
        default:
            break;
    }

    [kYJPopViewManager showPopView:self.view disMissBlock:^{
        [self.contentViewController willMoveToParentViewController:nil];
        [self.contentViewController.view removeFromSuperview];
        [self.contentViewController removeFromParentViewController];
    }];
}

以上就是YJPopoverController的用法和实现。苹果在iOS8加入了UIPresentationController来实现此功能，使用起来很简单，这里我就不介绍它了，有兴趣的同学可以去查查相关资料。

代码下载https://github.com/luomoyj/YJPopoverDemo

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,527评论 5赞 470
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,314评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,535评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,006评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,961评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,220评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,664评论 3赞 392
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,351评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,481评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,123评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,713评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2赞 341

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,983评论 4赞 60
  • 别回头，我没有特别想念你
    这一刻思绪还站在一六年的路口迷茫，一回头便被一七年二月份的尾巴甩了一耳光。 我扶了扶被打偏的眼镜，脸上火辣辣地想...
    晴空咖啡latte阅读 240评论 0赞 0