1. 程式人生 > >Swift右下角懸浮按鈕簡單實現

Swift右下角懸浮按鈕簡單實現

最近想在自己的專案中新增一個右下角的懸浮按鈕,這種按鈕最初是在安卓中興起來的,但是再很多iOS App中都能看到它身影,
下面就推薦一個比較適合新手使用的懸浮按鈕例子ActionButton。(在GitHub上翻出來的)

這裡寫圖片描述

GitHub:https://github.com/lourenco-marinho/ActionButton

這裡寫圖片描述

使用方法:除了官網提供的使用CocoaPods安裝外,就是直接下載下來,手動新增它的有用檔案。找到這兩個檔案拉到自己的工程目錄下即可。
這裡寫圖片描述

這個ActionButton.swift檔案中就是gif中的橙色+號按鈕的各種屬性。這是這個按鈕樣式的相關屬性

public init(attachedToView view: UIView, items: [ActionButtonItem]?) {
        super.init()

        self.parentView = view
        self.items = items
        let bounds = self.parentView.bounds

        self.floatButton = UIButton(type: .Custom)
        self.floatButton.layer.cornerRadius = CGFloat(floatButtonRadius / 2
) self.floatButton.layer.shadowOpacity = 1 self.floatButton.layer.shadowRadius = 2 self.floatButton.layer.shadowOffset = CGSize(width: 1, height: 1) self.floatButton.layer.shadowColor = UIColor.grayColor().CGColor self.floatButton.setTitle("+", forState: .Normal
) self.floatButton.setImage(nil, forState: .Normal) self.floatButton.backgroundColor = self.backgroundColor self.floatButton.titleLabel!.font = UIFont(name: "HelveticaNeue-Light", size: 35) self.floatButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 8, right: 0) self.floatButton.userInteractionEnabled = true self.floatButton.translatesAutoresizingMaskIntoConstraints = false self.floatButton.addTarget(self, action: #selector(ActionButton.buttonTapped(_:)), forControlEvents: .TouchUpInside) self.floatButton.addTarget(self, action: #selector(ActionButton.buttonTouchDown(_:)), forControlEvents: .TouchDown) self.parentView.addSubview(self.floatButton) self.contentView = UIView(frame: bounds) // 下面3行是設定點選按鈕後背景View的視覺效果(類似毛玻璃),這裡註釋掉讓背景無視覺效果 // self.blurVisualEffect = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) // self.blurVisualEffect.frame = self.contentView.frame // self.contentView.addSubview(self.blurVisualEffect) let tap = UITapGestureRecognizer(target: self, action: #selector(ActionButton.backgroundTapped(_:))) self.contentView.addGestureRecognizer(tap) self.installConstraints() }

ActionButtonItem.swift中就是彈出按鈕的相關屬性,跟上面類似。

匯入這兩個檔案到自己的工程後,就可以在ViewController.swift中使用了。

var actionButton: ActionButton! // 首先右下角懸浮按鈕宣告

// 檢視建立
override func viewDidLoad() {
    super.viewDidLoad()
    setContentView() // 配置介面
    addActionButton() // 新增右下角懸浮按鈕
}

func addActionButton() -> Void {
        let twitterImage = UIImage(named: "icon_1.png")!
        let plusImage = UIImage(named: "icon_2.png")!

        let google = ActionButtonItem(title: "密碼設定", image: plusImage)
        google.action = { item in print("Google Plus...") }

        let twitter = ActionButtonItem(title: "退 出", image: twitterImage)
        twitter.action = { item in print("Twitter...") }

        actionButton = ActionButton(attachedToView: self.view, items: [twitter, google])
        actionButton.action = { button in button.toggleMenu() }
        // 在這裡設定按鈕的相關屬性,其實就是把剛剛那兩個檔案中的原始屬性給覆蓋了一遍,這裡僅覆蓋了2箇舊屬性
        actionButton.setTitle("=", forState: .Normal)

        actionButton.backgroundColor = UIColor(red: 238.0/255.0, green: 130.0/255.0, blue: 34.0/255.0, alpha:1.0)
    }

這樣執行一下就能得到自己想要的懸浮按鈕了。總的來說這個例子就是簡單實用,效果可能相對其他的例子簡單些,但是功能是一樣的。喜歡的話就嘗試下吧 :)大家加油!