自己动手写一个自定义弹出框-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!希望对你有一丢丢帮助。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容