自己动手写一个自定义弹出框-MGPopController

images.png

一、为什么要写

项目中经常会用到一些弹出层来展示一些信息，可能还会需要提供一到两个操作按钮来执行某些操作，一般情况我们都可以用系统自带的控件UIAlertController（iOS8之后推荐使用）来实现，但是用过之后的人都会明白，系统控件有很多局限性，往往没法满足我们阅历丰富、思维广泛的产品经理和UI设计师的需求，咳咳，开个玩笑啦。个人感觉，一个优雅的弹出层确实是可以给自己的APP增加一些亮点，再附上一些简单的动效，那效果还是蛮不错的呢。

二、如何写

要想写一个弹出层，其实并不难，抛开具体的UI展示部分，其实就是一个View，把它Add到Controller上就行了，偶尔再给View后面加一个半透明的蒙层，差不多就完事了。
这里我用了另外一种方式，不算原创，也是看了别人的一个例子后觉得还不错，思路简单，就决定自己动手写一个试试。

看到标题你们也许就会明白，我实现的这个其实是一个Controller，我把自定义弹出框的部分add到Controller.view上了，有点类似UIAlertController，操作按钮的添加，也是使用addAction的形式实现的，所以用过UIAlertController的人会发现有一种似曾相识的感觉 :)

三、具体实现

先看一下效果吧：

screenshot1.gif

主要实现的功能：

操作按钮部分（ActionButton）

支持任意数量的操作按钮，0个或者多个（按钮一行显示，不会换行，因为正常情况下不会超过3个按钮，一行显示足够了）
支持自定义操作按钮的字体、颜色、是否可点击、不可点击状态按钮颜色
支持操作按钮点击后是否关闭弹出框（系统的UIAlertController点击后会自动关闭）
支持使用文字或者图片显示按钮
代码定义如下：

@interface MGPopAction : NSObject

@property (nonatomic, readonly, copy)   NSString            *title;
@property (nonatomic, readonly, strong) UIImage             *image;
@property (nonatomic, readonly, copy)   dispatch_block_t    action;

@property (nonatomic, assign) BOOL enable;

@property (nonatomic, strong) UIFont *titleFont;
@property (nonatomic, strong) UIColor *titleColor;
@property (nonatomic, strong) UIColor *disabledTitleColor;

//自动隐藏：默认YES
@property (nonatomic, assign) BOOL autoDismiss;

+ (instancetype)actionWithImage:(UIImage *)image action:(dispatch_block_t)action;

+ (instancetype)actionWithTitle:(NSString *)title action:(dispatch_block_t)action;

@end

弹出框部分（PopController）

支持设置图片、标题、副标题和操作按钮
支持显示右上角关闭按钮（也可不显示）
支持设置标题、副标题字体大小、字体颜色
支持设置背景色、圆角、左右边距和垂直位置（默认垂直居中，可设置垂直偏移量）
支持设置操作按钮（ActionButton）之间的一些距离
其他一些属性设置

PopController的属性较多，就不贴代码了，具体可以去看源码，最下面会给出源码地址。
因为开放了很多可自定义的属性，所以可以实现下面这种效果：

screenshot2.gif

同时也为了能适应一些对UIAlertController简单的改变，也特意实现了仿系统的UIAlertController效果，如下图：
操作按钮上是有分割线的，效果图因为分辨率的问题，没显示出来 :(

screenshot3.gif

四、使用方法

类似系统UIAlertController的用法：

1.实例化MGPopController

MGPopController *pop = [[MGPopController alloc] initWithTitle:@"恭喜您" message:@"获得一把拆宝箱钥匙" image:[UIImage imageNamed:@"image_key"]];

2.添加操作按钮

[pop addAction:[MGPopAction actionWithImage:[UIImage imageNamed:@"image_continue"] action:^{
                NSLog(@"继续拆宝箱...");
}]];

温馨提示：action里是block，如果你需要调用self（当前ViewController）的属性或者方法，需要先weak一下（系统的UIAlertController里也是如此）

__weak __typeof(&*self)weakSelf = self

3.Pop出来就行了

[pop show];

更多用法，请参见源码Demo，源码地址：MGPopController

五、说明

我在项目里用到了Masonry进行UI布局，UI不是重点，重点是思路，而且每家的APP UI布局都不一样，没法完全照搬照用，所以，领会了就可以了。
最后，enjoy yourself！希望对你有一丢丢帮助。