?
在平時的開發(fā)中，通常新手引導(dǎo)頁或功能提示頁會出現(xiàn)氣泡彈窗來做提示。如果遇到了這類功能通常需要花費一定的精力來寫這么一個工具的，這里寫了一個氣泡彈窗工具，希望能幫你提升一些開發(fā)效率。
?
使用方法
1.從gitHub上下載代碼到本地，代碼地址：https://github.com/zhfei/BubblePopup
2.調(diào)用BubblePopupManager文件內(nèi)的單例方法，在指定的頁面上添加氣泡提示。
普通文本氣泡彈窗使用方式如下：
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)
?注意：自定義內(nèi)容View只能使用frame布局，不能使用約束。
?
設(shè)計模式
氣泡彈窗View的結(jié)構(gòu)設(shè)計采用的設(shè)計模式為組合模式
把氣泡彈窗分為3個部分：氣泡背景，氣泡指示器，氣泡提示內(nèi)容。
在創(chuàng)建氣泡彈窗時，根據(jù)子類的自定義實現(xiàn)，將這三部分分別創(chuàng)建并組裝到一起。實現(xiàn)了功能的靈活插拔和自定義擴展。
氣泡彈窗生成算法采用的設(shè)計模式為模版方法模式
在氣泡構(gòu)建基類中設(shè)置好氣泡的構(gòu)建步驟，把必要的部分或者提供默認(rèn)實現(xiàn)的部分在父類中提供默認(rèn)的實現(xiàn)，對其他需要自定義實現(xiàn)的部分，只在父類中寫了一個抽象方法，具體實現(xiàn)交給子類自己實現(xiàn)。
虛線氣泡彈窗類圖
三角形氣泡彈窗類圖
?
核心實現(xiàn)
BubblePopupManager：?使用氣泡彈窗工具的入口，通過它創(chuàng)建并添加一個氣泡彈窗到指定的View上。
BubblePopupBuilder：?氣泡彈窗構(gòu)建者基類，使用模版方法模式定義了氣泡的構(gòu)建流程，子類可以自定義各自的實現(xiàn)。
DotLineBubblePopupBuilder：虛線氣泡彈窗基類，它是基類BubblePopupBuilder的子類，內(nèi)部包含了虛線氣泡彈窗生成時所需要的工具方法和必要屬性，方便創(chuàng)建top,bottom,left,right虛線氣泡彈窗。
TriangleBubblePopupBuilder ：三角形氣泡彈窗基類，它是BubblePopupBuilder的子類，內(nèi)部包含了三角形氣泡彈窗生成時所需要的工具方法和必要屬性，方便創(chuàng)建top,bottom,left,right三角形氣泡彈窗
BubblePopup：氣泡彈窗View，它內(nèi)部使用組合模式將子部件組合起來，組成了一個氣泡彈窗。
BubbleViewFactory：?氣泡彈窗子視圖創(chuàng)建工程，用于創(chuàng)建氣泡彈窗所需要的子視圖,并將各個子視圖組裝成一個最終的氣泡彈窗。
BubblePopupBuilder
BubblePopupBuilder是所有氣泡彈窗的公共基類，對于里面定義的屬性和方法的功能分別為
屬性：屬性里保存的是氣泡彈窗公共的，必要的數(shù)據(jù)。
方法：在基類提供的方法中主要用于定義氣泡的構(gòu)建流程。
核心方法如下：
func setupUI() {
addBubbleContentView(to: bubblePopup)
addBubbleBGView(to: bubblePopup)
updateLayout(to: bubblePopup)
addBubbleFlagView(to: bubblePopup)
}
其中氣泡內(nèi)容展示視圖和氣泡背景視圖有默認(rèn)實現(xiàn)，子類可以直接使用默認(rèn)樣式。
而氣泡標(biāo)識View和氣泡布局方法則需要子類自己實現(xiàn)，因為不同類型的氣泡彈窗它們的氣泡標(biāo)識設(shè)布局方式是不一樣的。
DotLineBubblePopupBuilder
虛線氣泡基類DotLineBubblePopupBuilder，它繼承自BubblePopupBuilder
屬性：增加了虛線彈窗必要的linkPoint屬性，即：虛線與氣泡彈窗的連接點。
增加了一個坐標(biāo)系轉(zhuǎn)換懶加載屬性，用于將用戶設(shè)置的屏幕坐標(biāo)點轉(zhuǎn)成氣泡內(nèi)部的視圖坐標(biāo)系中的點。
重要方法說明：
getDrawDotLineLayerRectParams
用于虛線圖層繪制：獲取虛線繪制時所需要的繪制元素坐標(biāo)，如：虛線的開始，結(jié)束坐標(biāo)，連接點圓的直徑等。
getDotLineLayerContainerViewFrame
更新虛線容器View的位置大小信息：獲取不同情況下的虛線容器Frame。
layoutDotLineBubblePopupView
更新虛線氣泡彈窗的frame。
updateBGBubbleViewFrame
更新氣泡背景的frame。
這里提供的方法屬于工具方法，子類可以通過傳遞自己的類型來得到對應(yīng)的結(jié)果。這里按道理可以使用設(shè)計模式中策略模式來對算法進行封裝，如：在基類定義一個抽象方法，將上面則4個工具方法分拆到各自的子類中，讓子類在對應(yīng)的自己的類中實現(xiàn)這個方法。
這里沒有這樣做原因是：這些方法在子類中的實現(xiàn)代碼并不復(fù)雜，用一個方法根據(jù)條件集中返回是比較方便的，而分拆到不同類中反而很麻煩。所以選擇在基類中以方法工具的形式統(tǒng)一放置了。
DotLineTopBubblePopupBuilder
top型虛線氣泡彈窗DotLineTopBubblePopupBuilder，它繼承自DotLineBubblePopupBuilder，屬于一直具體的彈窗類型。
它里面只對下面兩個方法進行了重寫，根據(jù)自己的類型進行子類個性化實現(xiàn)。
override func updateLayout override func addBubbleFlagView
具體實現(xiàn)如下：
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屬性，它是三角形頂點指向的坐標(biāo)點
增加了一個坐標(biāo)系轉(zhuǎn)換懶加載屬性，用于將用戶設(shè)置的屏幕坐標(biāo)點轉(zhuǎn)成氣泡內(nèi)部的視圖坐標(biāo)系中的點。
重要方法說明：
getDrawTriangleLayeyRectParams
為三角形圖層繪制提供不同氣泡類型所需要的繪制元素坐標(biāo)，如：三角形的三個頂點。
getTriangleLayerContainerViewFrame
獲取不同情況下三角形圖層容器的Frame，用于更新三角形圖層容器View的位置大小。
layoutTriangleBubblePopupView
更新三角形氣泡彈窗的frame。
updateTriangleBGBubbleView
更新氣泡背景的frame。
三角形彈窗基類TriangleBubblePopupBuilder的設(shè)計方式和虛線彈窗基類是一樣的。
這里的方法屬于工具方法，子類可以通過傳遞自己的類型來得到對應(yīng)的結(jié)果，通過犧牲一點開發(fā)模式的規(guī)范化來換取開發(fā)效率的提升。
在三角形氣泡基類的下面同樣有4個子類top,bottom,left ,right進行各種的自定義實現(xiàn)。
TriangleTopBubblePopupBuilder
top型三角形氣泡彈窗DotLineTopBubblePopupBuilder，它繼承自DotLineBubblePopupBuilder，屬于一直具體的彈窗類型。
它里面只對下面這兩個方法做了重寫，根據(jù)自己的類型進行子類個性化實現(xiàn)。
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類型相似。
?
彈窗效果展示
三角形氣泡彈窗
?
虛線氣泡彈窗
自定義氣泡彈窗
?文章來源地址http://www.zghlxwxcb.cn/news/detail-476796.html文章來源：http://www.zghlxwxcb.cn/news/detail-476796.html
?
?
到了這里，關(guān)于iOS氣泡提示工具BubblePopup的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
