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

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

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

微信支付弹窗

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

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

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

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

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

以 UIView 的形式通过 addSubview: 添加到当前界面。
以 UIViewController 的形式通过 pushViewController 或 presentViewController 显示出来。
以 UIWindow 的形式直接显示出来。

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

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

@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 的形式存在，则会询问 contentView 的 sizeThatFits: 方法来得到期望的大小。

如果默认的布局规则无法满足你的需求，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];
}

// ...

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

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

你可能感兴趣的:(从 QMUI 看如何设计一个完备的浮层控件)