(iOS)從0到Double系列 如何刻出一個可拖動的導航浮動按鈕

jamesdouble發表於2019-01-27
iOS

本篇教程使用Swift 原始碼:https://github.com/jamesdouble/JDJellyButton ，以下稱JDJellyButton

0)何謂導航浮動按鈕

當你的應用開發到一定程度的規模時，必須要有個十分清晰明瞭的導航功能，才不會讓使用者卡在某一頁，不知道如何前往他們想去的頁面。 常見的導航方式，不外乎最常用UITabBarController、UINavigationBar，另外有一種雖然常見，但是因為不是IOS原生就有的UIControl，所以還是比較少人使用，那就是 "floating navigation button"。 之所以會有**'Floating'**這個字眼，是大多這樣的導航按鈕會凌駕在所有檢視控制器(UI...ViewController)上，不管底下的檢視控制器如何切頁他都會保持在同樣的位置。

浮動導航按鈕

0.1)JDJellyButton特色：按鈕群組

原始碼其中一個特色就是浮動按鈕附有群組的功能，能讓一個浮動按鈕能包含更多的子按鈕以處理更多不同的事件。

jellybutton_delegate.gif

0.2)UIView or UIButton?

大部分的按鈕控制元件雖然都是‘按鈕’，但是比起繼承實作UIButton,還不如繼承實作他的父類別UIView, 可做的事比較多，限制也比較少，本文的JDJellyButton繼承自UIView。

0.3)Gesturer or UIResponder

因為我們是自己實作繼承UIView的類別，比起每個按鈕都要加上手勢，我比較偏好在類別下實作幾個常見的UIResponder方法 - touchesBegan, touchesMoved。一來省去還要宣告selector這樣拐個彎的做法。

1)程式碼架構＆解析

以下是JDJelllyButton的元件，我將由底層的子元件往上講解。

var MainButton:JDJellyMainButton!
var Container:JelllyContainer!
var RootView:UIView?
var delegate:JellyButtonDelegate?
var _datasource:JDJellyButtonDataSource?
var jellybutton:JDJellyButtonView?
複製程式碼

架構圖

1.1)ButtonGroups

紀錄了多個JDJellyButtonView跟它們個別的位置，此為“一組”Button

struct ButtonGroups {
    var buttongroup:[JDJellyButtonView]!
    var groupPositionDiff:[CGPoint]?
}
複製程式碼
1.2)JDJellyButtonView:UIView

此一類別是實作每個按鈕的基礎樣式與點選，一個圓配一張圖片。 別忘了要處理點選的事件。我做的方法是通知委任（上層介面JDJellyButton）被點選的是第幾的Group的第幾個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

本控制元件最主要的類別，也是整個導航浮動按鈕的主體。樣式跟其他的按鈕一樣，差別是在點選後的事件以及它可以拖動，所以就直接繼承 JDJellyButtonView並且覆寫touchesBegan, touchesMoved，並且也由它來管理ButtonGroups。

JDJellyButtonDemo.gif

    func appendButtonGroup(bgs:ButtonGroups)
    {
        var temp_bgs:ButtonGroups = bgs
        for jelly in temp_bgs.buttongroup
        {
            //讓每個按鈕知道自己依附的是誰
            //因為只有MainButton知道子Button位在第幾個Group
            jelly.dependingMainButton = self
        }
        temp_bgs.groupPositionDiff = [CGPoint]()
        
        for i in 0..<bgs.buttongroup.count
        {
            //計算位置
            let cgpoint:CGPoint = CGPoint(x: x[i] , y: y[i])
            temp_bgs.groupPositionDiff?.append(cgpoint)
        }
        buttongroups.append(temp_bgs)
    }
複製程式碼

需要注意的是因為JDJellyButton有分群組，而觸發的條件是“長按”，因此我們不再touchesBegan做立即展開，而是在touchesEnded處理。

 override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
    {
        /*
          略
        */
        if(Expanding)
        {
            expandignMove = true
            closingButtonGroup(expandagain: false)
        }
        //紀錄點下去的時間
        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    //長按
        {
            if(!Moving)
            {
                switchButtonGroup()
            }
            if(expandignMove && Moving)
            {
                expandButtonGroup()
            }
        }
        Moving = false
        expandignMove = false
        /*
          略
        */
    }
複製程式碼
1.4)JelllyContainer:UIView

本來並沒有打算製作這個類別，後來遇到了一個非常嚴重的問題：雖然按鈕以外透明的地方看似可點選後方的其他View，但是其實會點到浮動導航按鈕的整個背景，進而無法觸發後方使用者原本的東西。上網爬了之後，發現需覆寫point這個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
    }
複製程式碼

相關文章