SpreadButton一個可以在任意位置展開的按鈕,你會喜歡

LouisaOlsen 8年前發布 | 9K 次閱讀 iOS開發 移動開發

來自: http://www.jianshu.com/p/e27fea5fd292


個人博客原文: http://zyden.vicp.cc/zyspreadbutton/
Demo github地址: https://github.com/liuzhiyi1992/SpreadButton
歡迎轉載,請注明出處謝謝

---0.1.5更新粘連邊緣模式(home鍵模式)---


Summary

顧名思義,一個會散開的按鈕,主體按鈕被點擊后觸發子按鈕的展出,選擇其中一個功能子按鈕,或者點擊任意地方,觸發子按鈕的收縮隱藏。
A Button spread its sub path buttons like the flower or sickle(two spread mode) if you click it, once again, close. And you can also change the SpreadPositionMode between FixedMode & TouchBorderMode, while one like the marbleBall fixed on the wall, another one like the AssistiveTouch is iphone。



兩種展開模式(SpreadMode):鐮刀模式 & 花朵模式



兩種位置模式(SpreadPositionMode):鎖定模式 & 粘連邊緣模式,在粘連邊緣模式下,根據主體按鈕的位置,會實時更新展開模式

粘連邊緣模式下 不同展開模式位置指示圖:


Custom-made

Property:

  • animationDuring: assign the ‘animationDuring’ can also change ‘animationDuringSpread’ & ‘animationDuringClose’,default is 0.2
  • coverAlpha
  • coverColor
  • mode: case SpreadModeSickleSpread case SpreadModeFlowerSpread
  • radius: spread Radius
  • direction: case SpreadDirectionTop case SpreadDirectionBottom case SpreadDirectionLeft case SpreadDirectionRight case SpreadDirectionLeftUp case SpreadDirectionLeftDown case SpreadDirectionRightUp case SpreadDirectionRightDown
  • touchBorderMargin: margin border in SpreadPositionModeTouchBorder
  • buttonWillSpreadBlock
  • buttonDidSpreadBlock
  • buttonWillCloseBlock
  • buttonDidCloseBlock
    private static:
    ---you can edit the default in the source---
  • private static let sickleSpreadAngleDefault: CGFloat = 90.0
  • private static let flowerSpreadAngleDefault: CGFloat = 120.0
  • private static let spredaDirectionDefault: SpreadDirection = .SpreadDirectionTop
  • private static let spreadRadiusDefault: CGFloat = 100.0
  • private static let coverAlphaDefault: CGFloat = 0.1
  • private static let touchBorderMarginDefault: CGFloat = 10.0
  • private static let touchBorderAnimationDuringDefault = 0.5
  • private static let animationDuringDefault = 0.2

Installation

Cocoapods

pod 'SpreadButton'

Fork form my github

let your project include SpreadButton.swift & SpreadSubButton.swift
oc項目需要在bridge頭文件里import他們

Usage

以swift為例子:
1.通過SpreadButton的構造方法來創建一個SpreadButton對象,傳入主體按鈕的背景圖片,高亮圖片(非必須),還有位置,如果傳入的UIImage為nil,放心,編譯時就會報錯

let spreadButton = SpreadButton(image: UIImage(named: "powerButton"),
                       highlightImage: UIImage(named: "powerButton_highlight"),
                             position: CGPointMake(40, UIScreen.mainScreen().bounds.height - 40))

2.創建子按鈕(SpreadSubButton),傳入背景圖片,高亮圖片(非必須),還有一個尾隨閉包,子按鈕被點擊后我們這個閉包會被調用,同樣的,如果傳入的UIImage為nil,編譯時會報錯

let btn1 = SpreadSubButton(backgroundImage: UIImage(named: "clock"), 
                            highlightImage: UIImage(named: "clock_highlight")) { (index, sender) -> Void in
     print("first button be clicked!!!")
}

let btn2 = SpreadSubButton(backgroundImage: UIImage(named: "pencil"), 
                            highlightImage: UIImage(named: "pencil_highlight")) { (index, sender) -> Void in
     print("second button be clicked!!!")
}
//像這樣你可以創建更多

3.通過-setSubButtons為SpreadButton設置子按鈕,這里你可以傳入nil或者SpreadButton?試試,沒關系,里面做了保險,會排除,哈哈扯遠了,用到的知識可以看看我的這篇文章

spreadButton?.setSubButtons([btn1, btn2, btn3, btn4, btn5])

4.根據你的需求,去定制這個SpreadButton,具體可以選什么參數,看看上面的Custom-made

spreadButton?.mode = SpreadMode.SpreadModeSickleSpread
spreadButton?.direction = SpreadDirection.SpreadDirectionRightUp
spreadButton?.positionMode = SpreadPositionMode.SpreadPositionModeFixed

/*  and you can assign a newValue to change the default
spreadButton?.animationDuring = 0.2
spreadButton?.animationDuringClose = 0.25
spreadButton?.radius = 180
spreadButton?.coverAlpha = 0.3
spreadButton?.coverColor = UIColor.yellowColor()  
spreadButton?.touchBorderMargin = 10.0
*/

5.每種動作的前后,都有對應的Block供使用,像這樣給他們賦值:

spreadButton?.buttonWillSpreadBlock = { print(CGRectGetMaxY($0.frame)) }
spreadButton?.buttonDidSpreadBlock = { _ in print("did spread") }
spreadButton?.buttonWillCloseBlock = { _ in print("will closed") }
spreadButton?.buttonDidCloseBlock = { _ in print("did closed") }

6.最后加到你的view里面,ok,可以開始玩耍

if spreadButton != nil {
    self.view.addSubview(spreadButton!)
}

License

SpreadButton is released under the MIT license. See LICENSE for details.

 本文由用戶 LouisaOlsen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!