本篇教程使用Swift 源碼:https://github.com/jamesdouble/JDJellyButton
，以下稱JDJellyButton
0)何謂導(dǎo)航浮動(dòng)按鈕
當(dāng)你的應(yīng)用開發(fā)到一定程度的規(guī)模時(shí)，必須要有個(gè)十分清晰明了的導(dǎo)航功能，才不會(huì)讓使用者卡在某一頁(yè)，不知道如何前往他們想去的頁(yè)面。
常見(jiàn)的導(dǎo)航方式，不外乎最常用UITabBarController、UINavigationBar，另外有一種雖然常見(jiàn)，但是因?yàn)椴皇荌OS原生就有的UIControl，所以還是比較少人使用，那就是 "floating navigation button"。
之所以會(huì)有'Floating'這個(gè)字眼，是大多這樣的導(dǎo)航按鈕會(huì)凌駕在所有視圖控制器(UI...ViewController)上，不管底下的視圖控制器如何切頁(yè)他都會(huì)保持在同樣的位置。
0.1)JDJellyButton特色：按鈕群組
源碼其中一個(gè)特色就是浮動(dòng)按鈕附有群組的功能，能讓一個(gè)浮動(dòng)按鈕能包含更多的子按鈕以處理更多不同的事件。
0.2)UIView or UIButton?
大部分的按鈕控件雖然都是‘按鈕’，但是比起繼承實(shí)作UIButton,還不如繼承實(shí)作他的父類別UIView, 可做的事比較多，限制也比較少，本文的JDJellyButton繼承自UIView。
0.3)Gesturer or UIResponder
因?yàn)槲覀兪亲约簩?shí)作繼承UIView的類別，比起每個(gè)按鈕都要加上手勢(shì)，我比較偏好在類別下實(shí)作幾個(gè)常見(jiàn)的UIResponder方法 - touchesBegan, touchesMoved。一來(lái)省去還要宣告selector這樣拐個(gè)彎的做法。
1)代碼架構(gòu)＆解析
以下是JDJelllyButton的元件，我將由底層的子元件往上講解。
var MainButton:JDJellyMainButton!
var Container:JelllyContainer!
var RootView:UIView?
var delegate:JellyButtonDelegate?
var _datasource:JDJellyButtonDataSource?
var jellybutton:JDJellyButtonView?
1.1)ButtonGroups
紀(jì)錄了多個(gè)JDJellyButtonView跟它們個(gè)別的位置，此為“一組”Button
struct ButtonGroups {
var buttongroup:[JDJellyButtonView]!
var groupPositionDiff:[CGPoint]?
}
1.2)JDJellyButtonView:UIView
此一類別是實(shí)作每個(gè)按鈕的基礎(chǔ)樣式與點(diǎn)擊，一個(gè)圓配一張圖片。
別忘了要處理點(diǎn)擊的事件。我做的方法是通知委任（上層接口JDJellyButton）被點(diǎn)擊的是第幾的Group的第幾個(gè)Button。
protocol JellyButtonDelegate {
func JellyButtonHasBeenTap(touch:UITouch,image:UIImage,groupindex:Int,arrindex:Int)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
{
let image = self.imgView?.image
let groupindex = dependingMainButton?.getGroupIndex()
let arrindex = dependingMainButton?.getJellyButtonIndex(jelly: self)
print("\(groupindex),\(arrindex)")
tapdelegate?.JellyButtonHasBeenTap(touch: touches.first!,image: image!,groupindex: groupindex!,arrindex: arrindex!)
}
1.3)JDJellyMainButton:JDJellyButtonView
本控件最主要的類別，也是整個(gè)導(dǎo)航浮動(dòng)按鈕的主體。樣式跟其他的按鈕一樣，差別是在點(diǎn)擊后的事件以及它可以拖動(dòng)，所以就直接繼承
JDJellyButtonView并且覆寫touchesBegan, touchesMoved，并且也由它來(lái)管理ButtonGroups。
func appendButtonGroup(bgs:ButtonGroups)
{
var temp_bgs:ButtonGroups = bgs
for jelly in temp_bgs.buttongroup
{
//讓每個(gè)按鈕知道自己依附的是誰(shuí)
//因?yàn)橹挥蠱ainButton知道子Button位在第幾個(gè)Group
jelly.dependingMainButton = self
}
temp_bgs.groupPositionDiff = [CGPoint]()
for i in 0..<bgs.buttongroup.count
{
//計(jì)算位置
let cgpoint:CGPoint = CGPoint(x: x[i] , y: y[i])
temp_bgs.groupPositionDiff?.append(cgpoint)
}
buttongroups.append(temp_bgs)
}
需要注意的是因?yàn)镴DJellyButton有分群組，而觸發(fā)的條件是“長(zhǎng)按”，因此我們不再touchesBegan做立即展開，而是在touchesEnded處理。
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
{
/*
略
*/
if(Expanding)
{
expandignMove = true
closingButtonGroup(expandagain: false)
}
//紀(jì)錄點(diǎn)下去的時(shí)間
LastTime = touches.first!.timestamp
/*
略
*/
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
/*
略
*/
//短按
if(touches.first!.timestamp - LastTime! < 0.15){
if(!Expanding) {
expandButtonGroup()
}
else {
closingButtonGroup(expandagain: false)
}
}
else //長(zhǎng)按
{
if(!Moving)
{
switchButtonGroup()
}
if(expandignMove && Moving)
{
expandButtonGroup()
}
}
Moving = false
expandignMove = false
/*
略
*/
}
1.4)JelllyContainer:UIView
本來(lái)并沒(méi)有打算制作這個(gè)類別，后來(lái)遇到了一個(gè)非常嚴(yán)重的問(wèn)題：雖然按鈕以外透明的地方看似可點(diǎn)擊后方的其他View，但是其實(shí)會(huì)點(diǎn)到浮動(dòng)導(dǎo)航按鈕的整個(gè)背景，進(jìn)而無(wú)法觸發(fā)后方使用者原本的東西。上網(wǎng)爬了之后，發(fā)現(xiàn)需覆寫point這個(gè)Function。
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
for subview in subviews {
if !subview.isHidden && subview.alpha > 0 && subview.isUserInteractionEnabled && subview.point(inside: convert(point, to: subview), with: event) {
return true
}
}
return false
}
