从 QMUI 看如何设计一个完备的浮层控件

QMUI iOS 是一个开源的 iOS UI 框架,其中包含很多常用的控件,而浮层控件也是我们日常开发中使用率很高的控件之一,因此本文借着 QMUIModalPresentationViewController 的源码来讨论在设计一个通用且功能完善的浮层控件时都需要注意哪些问题。

浮层控件一般用于在 App 里展示一些临时性的信息,例如微信里转账输入支付密码的弹窗:


微信支付弹窗

这些浮层都有一些共同特点:

  1. 通常都盖在某个界面上方,而非自己独占一个界面(也即决定了浮层的显示不能影响背后界面的显示,并且浮层的很多特性也要由背后的界面来决定,例如对设备方向的支持)。
  2. 浮层只占屏幕里的一部分(这在布局上决定了浮层的宽度一般由屏幕宽度减去左右间距得到,而高度通常由内容决定而不是由屏幕高度算出)。
  3. 浮层带遮罩(遮罩可以盖住状态栏,根据点击遮罩是否隐藏浮层来分为模态浮层和非模态浮层)。
  4. 浮层具备与键盘交互的能力(浮层自己管理键盘的升起/降下,无需使用者监听相关事件)。
  5. 浮层的内容具备多样性(也即浮层控件一般都需要自定义内容,而无法直接拿来就能用)。
  6. 浮层的打开/关闭动画具备多样性(也即浮层控件需要支持方便地自定义动画)。
  7. 通常同一时间内只会显示一个浮层(也即要求有全局管理浮层的能力)。

这么一看,其实一个小小的浮层控件背后还是包含了很多设计细节在内,接下来我们就对着上述的 7 点分别展开来讲。

1. 通常都盖在某个界面上方,而非自己独占一个界面

iOS 上一个界面要显示出来通常有几种方式:

  1. UIView 的形式通过 addSubview: 添加到当前界面。
  2. UIViewController 的形式通过 pushViewControllerpresentViewController 显示出来。
  3. UIWindow 的形式直接显示出来。

从浮层的角度,对于第 1 种,由于 UIView 的层级关系,如果在一个 UIViewController 里将浮层添加到 self.view 上,则浮层会被导航栏盖住,而如果添加到 self.navigationController.view 上,则由于跨层级的管理,self.navigationController 本身无法感知到有一个自定义 view 存在于界面中,因此浮层容易被其他 view 覆盖。因此这种适合于一些较为简单的信息表达,本质上并不是“界面切换”,而是“界面内容变化”。

对于第 2 种,由于以 UIViewController 的形式存在,因此相比第 1 种多了很多能力,例如能被当前界面感知到浮层的显示/隐藏,也具备管理设备方向的能力,还能利用 UIViewController 的生命周期来管理浮层的生命周期。而如果使用 pushViewController,会导致上一个界面被移除,因此无法实现“盖在当前界面上方”的效果,因此浮层不能以 pushViewController 的方式来显示。而 presentViewController 则可通过修改 modalPresentationStyleUIModalPresentationOverCurrentContext 来达到盖在当前界面之上的效果,但 UIModalPresentationOverCurrentContext 是 iOS 8 新增的类型,对于 iOS 7 及以前的版本则无法实现。

第 3 种方法相比前两种更彻底,因为在 iOS 里 UIWindow 是整个 View 层级树的根节点,使用 UIWindow 相当于拥有最高的能力,像遮罩盖住状态栏这种效果只有以 UIWindow 的方式才能实现。但 UIWindow 也有一个致命的缺陷:它完全独立于原有界面的层级关系,因此如果在浮层里有一些操作需要在原有界面里进行界面跳转,就不得不隐藏浮层才能看到。

因此从 QMUIModalPresentationViewController.h 里可以看到,QMUIModalPresentationViewController 针对以上 3 种场景也提供了 3 种方式来显示浮层:

// 1、以 addSubview: 的方式使用
self.modalPresentationViewController.view.frame = CGRectMake(50, 50, 100, 100);
[self.view addSubview:self.modalPresentationViewController.view];

// 2、以 present 的方式使用
[self presentViewController:modalPresentationViewController animated:NO completion:nil];

// 3、以 UIWindow 的方式使用(官方推荐)
[modalPresentationViewController showWithAnimated:YES completion:nil];

** 2. 浮层只占屏幕里的一部分 **

这本质上就是指浮层控件的布局,一个浮层的布局由宽高(size)和原点位置(origin)决定。

如上文所说,宽高一般由屏幕宽度减去左右间距得到,但为了保证在横屏或者 iPad 下浮层宽度不大得夸张,也会在间距的基础上使用最大宽度来限制。所以 QMUIModalPresentationViewController 也提供了对应的属性来控制:

/**
 *  设置`contentView`布局时与外容器的间距,默认为(20, 20, 20, 20)
 *  @warning 当设置了`layoutBlock`属性时,此属性不生效
 */
@property(nonatomic, assign) UIEdgeInsets contentViewMargins UI_APPEARANCE_SELECTOR;

/**
 *  限制`contentView`布局时的最大宽度,默认为iPhone 6竖屏下的屏幕宽度减去`contentViewMargins`在水平方向的值,也即浮层在iPhone 6 Plus或iPad上的宽度以iPhone 6上的宽度为准。
 *  @warning 当设置了`layoutBlock`属性时,此属性不生效
 */
@property(nonatomic, assign) CGFloat maximumContentViewWidth UI_APPEARANCE_SELECTOR;

至于浮层的高度,一般由内容决定,设备屏幕宽高只是一个辅助参考。所以作为通用的浮层控件,需要有一个方式能够让内部的自定义内容告诉外部的控件“我的内容希望以多大的尺寸来展示”。在 QMUIModalPresentationViewController 里,这个方式按照自定义内容的存在形式分两种:
1、如果自定义内容以 contentViewController 的形式存在,则通过接口 QMUIModalPresentationContentViewControllerProtocol 来告知控件。

@protocol QMUIModalPresentationContentViewControllerProtocol <NSObject>

@optional

/**
 *  当浮层以 UIViewController 的形式展示(而非 UIView),并且使用 modalController 提供的默认布局时,则可通过这个方法告诉 modalController 当前浮层期望的大小
 *  @param  controller  当前的modalController
 *  @param  limitSize   浮层最大的宽高,由当前 modalController 的大小及 `contentViewMargins`、`maximumContentViewWidth` 决定
 *  @return 返回浮层在 `limitSize` 限定内的大小,如果业务自身不需要限制宽度/高度,则为 width/height 返回 `CGFLOAT_MAX` 即可
 */
- (CGSize)preferredContentSizeInModalPresentationViewController:(QMUIModalPresentationViewController *)controller limitSize:(CGSize)limitSize;

@end

2、如果自定义内容以 contentView 的形式存在,则会询问 contentViewsizeThatFits: 方法来得到期望的大小。

如果默认的布局规则无法满足你的需求,QMUIModalPresentationViewController 也提供了自定义布局的接口:

/**
 *  管理自定义的浮层布局,将会在浮层显示前、控件的容器大小发生变化时(例如横竖屏、来电状态栏)被调用
 *  @arg  containerBounds         浮层所在的父容器的大小,也即`self.view.bounds`
 *  @arg  keyboardHeight          键盘在当前界面里的高度,若无键盘,则为0
 *  @arg  contentViewDefaultFrame 不使用自定义布局的情况下的默认布局,会受`contentViewMargins`、`maximumContentViewWidth`、`contentView sizeThatFits:`的影响
 *
 *  @see contentViewMargins
 *  @see maximumContentViewWidth
 */
@property(nonatomic, copy) void (^layoutBlock)(CGRect containerBounds, CGFloat keyboardHeight, CGRect contentViewDefaultFrame);

layoutBlock 中会通过参数告知你当前显示浮层的容器的大小,以及键盘的高度(如果有出现键盘的话),还有如果使用默认布局的情况下浮层的 frame,方便你基于默认布局的基础上微调。

3. 浮层带遮罩

这个没什么好说的,常见且容易理解。QMUIModalPresentationViewController 提供一个 modal 的属性允许你切换浮层是否模态,而如果你对遮罩的样式有自定义的需求,也可将自己的遮罩赋值给 dimmingView 属性,不过注意你自己的 dimmingView 无需处理点击事件,QMUIModalPresentationViewController 会自动帮你加上,你只要负责好样式就行了,这一点还是比较省心的,可以保证对外的接口一致。

4. 浮层具备与键盘交互的能力

浮层响应键盘事件时一般都是为了调整布局,避免关键内容被键盘盖住,所以当你在做一个浮层控件时,键盘的监听是必不可少的。但 iOS 里键盘的 API 不是很友好,例如当你需要获取键盘的高度时需要做坐标系转换、第三方键盘可能多次触发相同的键盘事件并且有时候键盘高度为0、外接硬件键盘时(例如 iPad Pro 官方的保护壳带键盘)交互也不太一样,所以这些东西如果每次都交给业务处理,业务必然也要自己抽取一套代码,于是 QMUIModalPresentationViewController 里也是简单整合了与键盘交互的能力,主要体现在布局及动画上。

@property(nonatomic, copy) void (^layoutBlock)(CGRect containerBounds, CGFloat keyboardHeight, CGRect contentViewDefaultFrame);
@property(nonatomic, copy) void (^showingAnimation)(UIView *dimmingView, CGRect containerBounds, CGFloat keyboardHeight, CGRect contentViewFrame, void(^completion)(BOOL finished));
@property(nonatomic, copy) void (^hidingAnimation)(UIView *dimmingView, CGRect containerBounds, CGFloat keyboardHeight, void(^completion)(BOOL finished));

在以上 3 个 block 里,都通过参数传递了当前键盘的高度,你就可以在 block 体内直接使用了。

5. 浮层的内容具备多样性

作为通用的浮层控件,QMUIModalPresentationViewController 单纯的只负责浮层的展示,至于浮层内容均需业务自定义。所以 QMUIModalPresentationViewController 提供了两种形式来展示内容:

  • UIView 的形式:contentView 属性。
  • UIViewController 的形式:contentViewController 属性。

通常前者适合简单的场景,后者适合复杂的场景,业务自行选择。

6. 浮层的打开/关闭动画具备多样性

对于浮层的显隐动画,不同业务必定会有自己的特定需求,所以支持自定义动画是一个必要的功能。QMUIModalPresentationViewController 通过两个属性来实现自定义动画:

/**
 *  管理自定义的显示动画,需要管理的对象包括`contentView`和`dimmingView`,在`showingAnimation`被调用前,`contentView`已被添加到界面上。若使用了`layoutBlock`,则会先调用`layoutBlock`,再调用`showingAnimation`。在动画结束后,必须调用参数里的`completion` block。
 *  @arg  dimmingView         背景遮罩的View,请自行设置显示遮罩的动画
 *  @arg  containerBounds     浮层所在的父容器的大小,也即`self.view.bounds`
 *  @arg  keyboardHeight      键盘在当前界面里的高度,若无键盘,则为0
 *  @arg  contentViewFrame    动画执行完后`contentView`的最终frame,若使用了`layoutBlock`,则也即`layoutBlock`计算完后的frame
 *  @arg  completion          动画结束后给到modalController的回调,modalController会在这个回调里做一些状态设置,务必调用。
 */
@property(nonatomic, copy) void (^showingAnimation)(UIView *dimmingView, CGRect containerBounds, CGFloat keyboardHeight, CGRect contentViewFrame, void(^completion)(BOOL finished));

/**
 *  管理自定义的隐藏动画,需要管理的对象包括`contentView`和`dimmingView`,在动画结束后,必须调用参数里的`completion` block。
 *  @arg  dimmingView         背景遮罩的View,请自行设置隐藏遮罩的动画
 *  @arg  containerBounds     浮层所在的父容器的大小,也即`self.view.bounds`
 *  @arg  keyboardHeight      键盘在当前界面里的高度,若无键盘,则为0
 *  @arg  completion          动画结束后给到modalController的回调,modalController会在这个回调里做一些清理工作,务必调用
 */
@property(nonatomic, copy) void (^hidingAnimation)(UIView *dimmingView, CGRect containerBounds, CGFloat keyboardHeight, void(^completion)(BOOL finished));

这两个属性浅显易懂,只要按照注释的说明来使用即可,没什么坑点。

7. 通常同一时间内只会显示一个浮层

这是一个比较容易被忽略的点,例如目前的 App 一般都支持在外部通过 url 跳转到 App 内的某个界面,假设你的 App 正在显示某个不重要的浮层,此时用户切到其他应用,通过其他应用里的 url 跳转到你 App 的某个界面,此时如果你不先降下浮层,用户要跳转到的界面就会一直被之前的浮层盖住。于是这要求我们需要感知到当前 App 里是否有浮层正在显示,而 QMUIModalPresentationViewController 针对这一点提供了两个类方法:

@interface QMUIModalPresentationViewController (Manager)

/**
 *  判断当前App里是否有modalViewController正在显示(存在modalViewController但不可见的时候,也视为不存在)
 *  @return 只要存在正在显示的浮层,则返回YES,否则返回NO
 */
+ (BOOL)isAnyModalPresentationViewControllerVisible;

/**
 *  把所有正在显示的并且允许被隐藏的modalViewController都隐藏掉
 *  @return 只要遇到一个正在显示的并且不能被隐藏的浮层,就会返回NO,否则都返回YES,表示成功隐藏掉所有可视浮层
 *  @see    shouldHideModalPresentationViewController:
 */
+ (BOOL)hideAllVisibleModalPresentationViewControllerIfCan;
@end

利用这两个方法,你就能很好地保护这种特殊情况。

好了,上文总结的 7 点已经全部讲完,可见如果要做一个好用且全面的浮层,要考虑的细节还是很多的。在 QMUI 框架里很多上层控件其实都是使用 QMUIModalPresentationViewController 来展示的,例如以下的代码片段取自 QMUIDialogViewController

// ...

- (void)showWithAnimated:(BOOL)animated completion:(void (^)(BOOL))completion {
    QMUIModalPresentationViewController *modalPresentationViewController = [[QMUIModalPresentationViewController alloc] init];
    modalPresentationViewController.contentViewMargins = self.contentViewMargins;
    modalPresentationViewController.contentViewController = self;
    modalPresentationViewController.modal = YES;
    [modalPresentationViewController showWithAnimated:YES completion:completion];
}

// ...

可以看到将浮层功能抽取出来后,每个业务控件只需要管理好自身内容即可,无需花精力在“如何把内容显示出来”上,也不用担心各种特殊情况下内容是否无法正常显示。

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

推荐阅读更多精彩内容

  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,700评论 22 664
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,391评论 25 707
  • Android UI相关开源项目库汇总OpenDigg 抽屉菜单MaterialDrawer ★7337 - 安卓...
    黄海佳阅读 8,688评论 3 77
  • 我们都是喜欢奔跑的孩子。每天的努力,是为了未来不为难自己,是为了在父母亲提起自己时可以笑容满面。但人生中有许多条路...
    木禾静书阅读 172评论 0 1
  • http://player.kuwo.cn/webmusic/play?f=arphone&t=platform&...
    LONER_Y阅读 722评论 3 4