TAOverlayView

概述

这个库是为了实现引人入胜的覆盖快速入门教程而创建的，这些教程通过在覆盖层上突出显示带有“孔”的部分屏幕来突出显示屏幕的特定部分。孔可以是矩形或圆形，用户可以通过孔进行点击。

单个叠加层中可以有多个孔，并且可以在实例化后添加到叠加层中。以下是我们应用程序中的一个使用此叠加层的教程示例

要求

嵌入式框架需要最低的部署目标为 iOS 8。

Objective-C 兼容性

如果您使用了 CocoaPods，您应该能够使用以下方式导入文件

@import TAOverlayView;

示例项目

要运行示例项目，首先克隆仓库，然后在 Example 目录中运行 pod install。另外，在 Xcode 中，请确保将目标更改为“TAOverlayView-Example”

类概述

值得快速概述一下可用的类。主要类是 TAOverlayView，它继承自 UIView，允许您轻松创建一个在指定框架上方的半透明覆盖层。

TAOverlayView 可以减去“孔”，允许用户看到并与覆盖层后面的视图进行交互。为了创建这些孔，我们使用 TARectangularSubtractionPath（用于矩形孔）或 TACircularSubtractionPath（用于圆形孔）。这两个类分别抽象了为各自形状实例化 UIBezierPath 的过程。

创建快速入门教程

此库是为了实现快速入门教程而创建的，因此让我们看看如何做到这一点的一个例子。

注意：示例项目展示了以下示例的全实现，因此我们建议您也查看一下。

实例化覆盖层

假设您有两个按钮，分别命名为 button1 和 button2。您希望有一个全屏覆盖层，其上覆盖有位于 button1 上的矩形孔。在 button1 上轻触将可通过圆形孔揭示 button2。在您的 UIViewController 中，添加以下代码：

@IBOutlet var button1: UIButton!   // Connected to your storyboard
@IBOutlet var button2: UIButton!   // Connected to your storyboard
var overlayView: TAOverlayView?    // A reference to the overlay so we can hide it, add holes, etc.

override func viewDidAppear(animated: Bool) {
  super.viewDidAppear(animated)

  // Note: the overlay was created in ``viewDidAppear`` so that the button frame is
  // already set. Instantiating before this might place the hole in the wrong location.

  // Create the initial overlay over the entire
  // screen, with a rectangular hole over ``button1``.

  let overlay = TAOverlayView(frame: CGRectMake(0, 0,
     UIScreen.mainScreen().bounds.width,
     UIScreen.mainScreen().bounds.height), subtractedPaths: [
  TARectangularSubtractionPath(frame: self.button1.frame,    // Use a rectangular hole.
  horizontalPadding: 10.0, verticalPadding: 5.0)             // More padding on the left/right than the top/bottom
  ])

  // Add as subview.
  self.view.addSubview(overlay)

  // Set a reference to the overlay (to hide, add more holes, etc.).
  self.overlayView = overlay
}

注意，TAOverlayView 初始化函数的 subtractedPaths 参数接受一个可选的 TABaseSubtractionPath 数组，因此您可以在需要的情况下实例化具有多个孔（或没有孔）的覆盖层。

实例化后添加孔

有时，您可能希望在实例化后向覆盖层添加更多孔。在我们的示例中，我们想在用户轻触 button1 之后突出显示 button2。将一个 IBAction 输出口连接到 button1 的“触摸内部”动作。在那个 IBAction 中，只需简单地使用覆盖层的 subtractFromView 添加另一个孔到现有的覆盖层。

@IBAction func createNewHole(sender: AnyObject) {
  // Add a circular hole above ``button2``.
  // There will now be two holes in the overlay.
  self.overlayView?.subtractFromView([
    TACircularSubtractionPath(frame: self.button2.frame, radius: 40.0)
    ])
}

这将创建一个位于 button2 上方的圆形孔。与覆盖层的初始化函数类似，subtractFromView 也接受一个 TABaseSubtractionPath 数组，因此您可以同时添加多个孔。

关闭覆盖层

为了关闭覆盖层，我们可以使用以下方法淡出并从父视图中移除它：

if let overlayView = self.overlayView {
  UIView.animateWithDuration(1.0, animations: {
    // Fade out the overlay.
    overlayView.alpha = 0.0
    }, completion: {(completed: Bool) -> Void in
      // Remove the overlay and its reference.
      overlayView.removeFromSuperview()
      self.overlayView = nil
    })
}

创建自定义孔

为了创建除了矩形或圆形以外的孔，您可以通过创建自定义形状的子类来扩展 TABaseSubtractionPath。只需重写私有函数 createPath 并返回您的自定义 UIBezierPath。查看 TARectangularSubtractionPath 或 TACircularSubtractionPath 的实现，以了解其工作原理。

作者

Nick Yap，[email protected]

许可证

版权 © 2016 Toboggan Apps LLC。保留所有权利。

根据 Apache 许可协议版本 2.0（“许可证”）；除非按照许可证的项目或书面同意，否则不得使用此文件。您可以在以下地址获得许可证副本：

https://apache.ac.cn/licenses/LICENSE-2.0

除非适用法律要求或书面同意，否则在许可证下分发的软件是以“按原样”为基础分发的，不提供任何明示或暗示的保证或条件。请参阅许可证获取具体管理许可和限制的语言。