BubblePopup

气泡弹框，气泡提示框，可用于新手引导，功用提示。

在平常的开发中，通常新手引导页或功用提示页会呈现气泡弹窗来做提示。假如遇到了这类功用通常需求花费一定的精力来写这么一个东西的，这儿写了一个气泡弹窗东西，希望能帮你提升一些开发功率。

运用办法

  1. 从gitHub上下载代码到本地，代码地址：github.com/zhfei/Bubbl…
  2. 调用BubblePopupManager文件内的单例办法，在指定的页面上增加气泡提示。 普通文本气泡弹窗运用办法如下：
BubblePopupManager.shared.addPopup(toView: self.view, tips: "冒泡弹窗", popupType: .dotLine, positionType: .bottom, popupPoint: nil, linkPoint: CGPoint(x: sender.frame.midX, y: sender.frame.minY), maxWidth: 200.0)

自界说View气泡弹窗运用办法如下：

BubblePopupManager.shared.addPopup(toView: self.view, customContentView: MyContentView(), popupType: .triangle, positionType: .bottom, popupPoint: CGPoint(x: sender.frame.midX, y: sender.frame.minY), linkPoint: nil, maxWidth: 200.0)

留意：自界说内容View只能运用frame布局，不能运用约束。

规划形式

气泡弹窗View的结构规划选用的规划形式为组合形式

把气泡弹窗分为3个部分：气泡布景，气泡指示器，气泡提示内容。

在创立气泡弹窗时，依据子类的自界说完成，将这三部分分别创立并组装到一同。完成了功用的灵活插拔和自界说扩展。

气泡弹窗View类图

iOS气泡提示工具BubblePopup的使用
气泡弹窗生成算法选用的规划形式为模版办法形式 在气泡构建基类中设置好气泡的构建步骤，把必要的部分或许供给默许完成的部分在父类中供给默许的完成，对其他需求自界说完成的部分，只在父类中写了一个抽象办法，详细完成交给子类自己完成。

虚线气泡弹窗类图

iOS气泡提示工具BubblePopup的使用

三角形气泡弹窗类图

iOS气泡提示工具BubblePopup的使用

中心完成

  • BubblePopupManager： 运用气泡弹窗东西的进口，通过它创立并增加一个气泡弹窗到指定的View上。

  • BubblePopupBuilder： 气泡弹窗构建者基类，运用模版办法形式界说了气泡的构建流程，子类能够自界说各自的完成。

  • DotLineBubblePopupBuilder： 虚线气泡弹窗基类，它是基类BubblePopupBuilder的子类，内部包含了虚线气泡弹窗生成时所需求的东西办法和必要特点，便利创立top,bottom,left,right虚线气泡弹窗。

  • TriangleBubblePopupBuilder ： 三角形气泡弹窗基类，它是BubblePopupBuilder的子类，内部包含了三角形气泡弹窗生成时所需求的东西办法和必要特点，便利创立top,bottom,left,right三角形气泡弹窗

  • BubblePopup： 气泡弹窗View，它内部运用组合形式将子部件组合起来，组成了一个气泡弹窗。

  • BubbleViewFactory： 气泡弹窗子视图创立工程，用于创立气泡弹窗所需求的子视图,并将各个子视图组装成一个最终的气泡弹窗。

BubblePopupBuilder

BubblePopupBuilder是所有气泡弹窗的公共基类，关于里边界说的特点和办法的功用分别为

  • 特点：特点里保存的是气泡弹窗公共的，必要的数据。
  • 办法：在基类供给的办法中首要用于界说气泡的构建流程。 中心办法如下：
   func setupUI() {
        addBubbleContentView(to: bubblePopup)
        addBubbleBGView(to: bubblePopup)
        updateLayout(to: bubblePopup)
        addBubbleFlagView(to: bubblePopup)
    }

其中气泡内容展示视图和气泡布景视图有默许完成，子类能够直接运用默许样式。

而气泡标识View和气泡布局办法则需求子类自己完成，由于不同类型的气泡弹窗它们的气泡标识设布局办法是不一样的。

DotLineBubblePopupBuilder

虚线气泡基类DotLineBubblePopupBuilder，它承继自BubblePopupBuilder

  • 特点：增加了虚线弹窗必要的linkPoint特点，即：虚线与气泡弹窗的连接点。 增加了一个坐标系转化懒加载特点，用于将用户设置的屏幕坐标点转成气泡内部的视图坐标系中的点。

  • 重要办法阐明：

getDrawDotLineLayerRectParams

用于虚线图层制作：获取虚线制作时所需求的制作元素坐标，如：虚线的开始，完毕坐标，连接点圆的直径等。

getDotLineLayerContainerViewFrame

更新虚线容器View的方位大小信息：获取不同情况下的虚线容器Frame。

layoutDotLineBubblePopupView

更新虚线气泡弹窗的frame。

updateBGBubbleViewFrame

更新气泡布景的frame。

这儿供给的办法归于东西办法，子类能够通过传递自己的类型来得到对应的结果。这儿按道理能够运用规划形式中战略形式来对算法进行封装，如：在基类界说一个抽象办法，将上面则4个东西办法分拆到各自的子类中，让子类在对应的自己的类中完成这个办法。

这儿没有这样做原因是：这些办法在子类中的完成代码并不杂乱，用一个办法依据条件会集回来是比较便利的，而分拆到不同类中反而很麻烦。所以选择在基类中以办法东西的形式一致放置了。

DotLineTopBubblePopupBuilder

top型虚线气泡弹窗DotLineTopBubblePopupBuilder，它承继自DotLineBubblePopupBuilder，归于一向详细的弹窗类型。

它里边只对下面两个办法进行了重写，依据自己的类型进行子类个性化完成。

override func updateLayout
override func addBubbleFlagView

详细完成如下：

class DotLineTopBubblePopupBuilder: DotLineBubblePopupBuilder {
    override func updateLayout(to bubblePopup: BubblePopup) {
        layoutDotLineBubblePopupView(bubblePopup: bubblePopup, positionType: .top)
    }
    override func addBubbleFlagView(to bubblePopup: BubblePopup) {
        assert(!self.targetPoint.equalTo(.zero), "气泡提示点无效")
        let flagFrame = getDotLineLayerContainerViewFrame(position: .top, targetPoint: self.targetPoint)
        let params = getDrawDotLineLayerRectParams(position: .top)
        let flagBubbleView = BubbleViewFactory.generateDotLineBubbleFlagView(flagFrame: flagFrame, position: .top, params: params)
        bubblePopup.bubbleFlagView = flagBubbleView
        bubblePopup.addSubview(flagBubbleView)
    }
}

其他bottom, left, right类型类似。

TriangleBubblePopupBuilder

三角形气泡基类TriangleBubblePopupBuilder，它承继自BubblePopupBuilder

  • 特点：相关于基类增加了popupPoint特点，它是三角形极点指向的坐标点 增加了一个坐标系转化懒加载特点，用于将用户设置的屏幕坐标点转成气泡内部的视图坐标系中的点。

  • 重要办法阐明：

getDrawTriangleLayeyRectParams

为三角形图层制作供给不同气泡类型所需求的制作元素坐标，如：三角形的三个极点。

getTriangleLayerContainerViewFrame

获取不同情况下三角形图层容器的Frame，用于更新三角形图层容器View的方位大小。

layoutTriangleBubblePopupView

更新三角形气泡弹窗的frame。

updateTriangleBGBubbleView

更新气泡布景的frame。

三角形弹窗基类TriangleBubblePopupBuilder的规划办法和虚线弹窗基类是一样的。 这儿的办法归于东西办法，子类能够通过传递自己的类型来得到对应的结果，通过献身一点开发形式的规范化来交换开发功率的提升。

在三角形气泡基类的下面同样有4个子类top,bottom,left ,right进行各种的自界说完成。

TriangleTopBubblePopupBuilder

top型三角形气泡弹窗DotLineTopBubblePopupBuilder，它承继自DotLineBubblePopupBuilder，归于一向详细的弹窗类型。

它里边只对下面这两个办法做了重写，依据自己的类型进行子类个性化完成。

override func updateLayout
override func addBubbleFlagView

详细完成如下：

class TriangleTopBubblePopupBuilder: TriangleBubblePopupBuilder {
    override func updateLayout(to bubblePopup: BubblePopup) {
        layoutTriangleBubblePopupView(bubblePopup: bubblePopup, positionType: .top)
    }
    override func addBubbleFlagView(to bubblePopup: BubblePopup) {
        assert(!self.targetPoint.equalTo(.zero), "气泡提示点无效")
        let flagFrame = getTriangleLayerContainerViewFrame(position: .top, targetPoint: self.targetPoint)
        let params = getDrawTriangleLayeyRectParams(position: .top)
        let flagBubbleView = BubbleViewFactory.generateTriangleBubbleFlagView(flagFrame: flagFrame, position: .top, params: params)
        bubblePopup.bubbleFlagView = flagBubbleView
        bubblePopup.addSubview(flagBubbleView)
    }
}

其他bottom, left, right类型类似。

弹窗效果展示

三角形气泡弹窗

iOS气泡提示工具BubblePopup的使用

虚线气泡弹窗

iOS气泡提示工具BubblePopup的使用

自界说气泡弹窗

iOS气泡提示工具BubblePopup的使用