1.设置项目

Step 1
打开Xcode,选择File > New > Project,创建一个新项目,选择iOS Single View Application,再点击Next。
01 custom popovers create new project
Step 2
填写一些列表格,项目名称、组织/公司名称以及公司标识符。在设备那个下拉菜单中选择iPad,在这一栏下边仅选择Automatic Reference Counting,点击Next。选择一个地点存放你的文件,点击创建。
02 custom popover naming project

2. 添加Navigation Controller

Step 1
添加Navigation Controller,这样就能添加一个按钮来展示popover。点击AppDelegate.m,找到application:didFinishLaunchingWithOptions:方法。添加下述代码来创建一个navigation controller,设置为root view controller。
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:self.viewController];
self.window.rootViewController = navController;

Step 2
在导航栏上添加一个“+”的按钮,然后打开ViewController.m文件,在[super viewDidLoad]下边把如下代码添加至viewDidLoad方法中。
UIBarButtonItem *popoverButton = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAdd
target:self
action:@selector(showPopover:)];
self.navigationItem.rightBarButtonItem = popoverButton;

UIBarButtonSystemItemAdd创建了一个“+”的按钮,我们将要把它添加至导航栏的右边,接下来我们会使用选择器执行showPopover:方法。

3.展示Popover

Step 1
在执行showPopover:方法前先为popover controller添加一个属性,打开ViewController.h文件,添加如下属性:
@property (nonatomic, strong) UIPopoverController *popController;
Step 2
回到ViewController.m文件,在类扩展中声明showPopover:方法,如下:
@interface ViewController ()
- (void)showPopover:(id)sender;
@end

Step 3
在@implementation下添加如下代码来定义这个方法:
- (void)showPopover:(id)sender
{
if (self.popController.popoverVisible) {
[self.popController dismissPopoverAnimated:YES];
return;
}
UIViewController *contentViewController = [[UIViewController alloc] init];
contentViewController.view.backgroundColor = [UIColor yellowColor];
UIPopoverController *popController = [[UIPopoverController alloc] initWithContentViewController:contentViewController];
popController.popoverContentSize = CGSizeMake(300.0f, 600.0f);
self.popController = popController;
[self.popController presentPopoverFromBarButtonItem:sender
permittedArrowDirections:UIPopoverArrowDirectionUp
animated:YES];
}

首先检查下popover能否展示在屏幕上。如果popover是可见的,那么会将popover隐藏起来,然后从该方法中直接return。如果popover不可见,那么我们可以创建一个view controller,让它展示在popover中。然后创建popover controller,并设置大小。

4. 测试标准的Popover

我们已经创建一个标准的Popover,创建运行你的项目,点击“+”按钮来展现一个基本的Popover。

5. 子类化UIPopoverBackgroundView

Step 1
为了自定义popover,我们需要子类化UIPopoverBackgroundView。点击 File > New > File, 选择iOS Cocoa Touch Objective-C Class, 点击Next.
03 custom popover create new file
Step 2
给class这一栏填上PopoverBackgroundView,从Subclass of下拉菜单中选择UIPopoverBackgroundView。
Step 3
这里有两个UIPopoverBackgroundView属性需要被覆盖,添加如下代码来定义arrow的方向和位移。
@synthesize arrowDirection = _arrowDirection;
@synthesize arrowOffset = _arrowOffset;

Step 4
这里有3个类方法需要覆盖,我们使用这个方法来定义一些值。
#define kArrowBase 30.0f
#define kArrowHeight 20.0f
#define kBorderInset 8.0f

Step 5
添加如下代码覆盖arrowBase, arrowHeight和contentViewInsets方法。
+ (CGFloat)arrowBase
{
return kArrowBase;
}
+ (CGFloat)arrowHeight
{
return kArrowHeight;
}
+ (UIEdgeInsets)contentViewInsets
{
return UIEdgeInsetsMake(kBorderInset, kBorderInset, kBorderInset, kBorderInset);
}

arrowBase方法确定arrow底部的宽度,arrowHeight方法确定arrow的高度。
Step 6
添加背景色,在initWithFrame:方法的条件语句中添加如下代码:
self.backgroundColor = [UIColor grayColor];

6.设置Popover Background View属性

测试popover之前,我们需要输入和设置popover controller的popover Background View Class Property。打开ViewController.m文件,输入popover background view头文件:
#import "PopoverBackgroundView.h"
还是在ViewController.m文件中,位于我们在showPopover:方法中创建UIPopoverController的下边,添加下边一行代码,
popController.popoverBackgroundViewClass = [PopoverBackgroundView class];

7.测试Popover Background View

创建、运行项目,点击“+”的按钮来看下popover,可以看到标准的popover已经被取代。

8. 设置阴影和圆角

wantsDefaultContentAppearance方法决定是否在popover中展示默认的内置阴影和圆角,如果返回的是“NO”,Popover Background View将不再展示默认的阴影和圆角,允许执行你自己的。添加如下代码来覆盖之前的方法:
+ (BOOL)wantsDefaultContentAppearance
{
return NO;
}

9.添加Arrow

Step 1
我们需要创建和管理arrow,我们可以为image view声明一个属性,在类扩展中添加如下代码:
@property (nonatomic, strong) UIImageView *arrowImageView;
现在可以对image view进行实例化,使用如下代码替代initWithFrame:方法条件语句中的代码:
self.backgroundColor = [UIColor clearColor];
UIImageView *arrowImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
self.arrowImageView = arrowImageView;

Step 2
通过使用以下代码来更新在PopoverBackgroundView.m定义的kBorderInset来改变border inset:
#define kBorderInset 0.0f
Step 3
为了画这个arrow,我们需要声明一个方法来展现,可以在PopoverBackgroundView.m类扩展中添加下边这个方法声明:
- (UIImage *)drawArrowImage:(CGSize)size;
Step 4
在@implementation下添加方法定义:
- (UIImage *)drawArrowImage:(CGSize)size
{
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[[UIColor clearColor] setFill];
CGContextFillRect(ctx, CGRectMake(0.0f, 0.0f, size.width, size.height));
CGMutablePathRef arrowPath = CGPathCreateMutable();
CGPathMoveToPoint(arrowPath, NULL, (size.width/2.0f), 0.0f);
CGPathAddLineToPoint(arrowPath, NULL, size.width, size.height);
CGPathAddLineToPoint(arrowPath, NULL, 0.0f, size.height);
CGPathCloseSubpath(arrowPath);
CGContextAddPath(ctx, arrowPath);
CGPathRelease(arrowPath);
UIColor *fillColor = [UIColor yellowColor];
CGContextSetFillColorWithColor(ctx, fillColor.CGColor);
CGContextDrawPath(ctx, kCGPathFill);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;

不用输入图片,上述代码可以自动生成一个arrow。
Step 5
每次popover的background view的子类的bounds 改变时,这个arrow的frame需要重新计算。我们可以通过覆盖layoutSubviews来达到目的,为layoutSubviews添加如下代码:
- (void)layoutSubviews
{
[super layoutSubviews];
CGSize arrowSize = CGSizeMake([[self class] arrowBase], [[self class] arrowHeight]);
self.arrowImageView.image = [self drawArrowImage:arrowSize];
self.arrowImageView.frame = CGRectMake(((self.bounds.size.width - arrowSize.width) kBorderInset), 0.0f, arrowSize.width, arrowSize.height);
}

源文件:http://vdisk.weibo.com/s/E9blj