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！希望对你有一丢丢帮助。
网友评论