Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/exyte/FloatingButton

Easily customizable floating button menu created with SwiftUI
https://github.com/exyte/FloatingButton

swiftui swiftui-animations swiftui-components

Last synced: 3 months ago
JSON representation

Easily customizable floating button menu created with SwiftUI

Awesome Lists containing this project

README 

        



     

 






FloatingButton



Easily customizable floating button menu created with SwiftUI



[![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fexyte%2FFloatingButton%2Fbadge%3Ftype%3Dswift-versions)](https://swiftpackageindex.com/exyte/FloatingButton)

[![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fexyte%2FFloatingButton%2Fbadge%3Ftype%3Dplatforms)](https://swiftpackageindex.com/exyte/FloatingButton)

[![SPM Compatible](https://img.shields.io/badge/SwiftPM-Compatible-brightgreen.svg)](https://swiftpackageindex.com/exyte/FloatingButton)

[![Cocoapods Compatible](https://img.shields.io/badge/cocoapods-Compatible-brightgreen.svg)](https://cocoapods.org/pods/FloatingButton)

[![Carthage Compatible](https://img.shields.io/badge/Carthage-compatible-brightgreen.svg?style=flat)](https://github.com/Carthage/Carthage)

[![License: MIT](https://img.shields.io/badge/License-MIT-black.svg)](https://opensource.org/licenses/MIT)



# Usage



1. Create main button view and a number of submenu buttons — both should be cast to `AnyView` type.

2. Pass both to `FloatingButton` constructor:



   ```swift

   FloatingButton(mainButtonView: mainButton, buttons: buttons)

   ```

3. You may also pass a binding which will determine if the menu is currently open. You may use this to close the menu on any submenu button tap for example. 

```swift

FloatingButton(mainButtonView: mainButton, buttons: buttons, isOpen: $isOpen)

```

4. Chain `.straight()` or `.circle()` to specify desired menu type.

5. Chain whatever you like afterwards. For example:

    ```swift

    FloatingButton(mainButtonView: mainButton, buttons: textButtons)

        .straight()

        .direction(.top)

        .alignment(.left)

        .spacing(10)

        .initialOffset(x: -1000)

        .animation(.spring())



    FloatingButton(mainButtonView: mainButton2, buttons: buttonsImage.dropLast())

        .circle()

        .startAngle(3/2 * .pi)

        .endAngle(2 * .pi)

        .radius(70)

        .layoutDirection(.counterClockwise)

    ```



### Universal options

`spacing` - space between submenu buttons  

`initialScaling` - size multiplyer for submenu buttons when the menu is closed  

`initialOffset` - offset for submenu buttons when the menu is closed  

`initialOpacity` - opacity for submenu buttons when the menu is closed  

`animation` - custom SwiftUI animation like `Animation.easeInOut()` or `Animation.spring()`  

`delays` - delay for each submenu button's animation start

    - you can pass array of delays - one for each element

    - or you can pass `delayDelta` - then this same delay will be used for each element

`mainZStackAlignment` - main button and submenu buttons are contained in one ZStack (not an overlay so the menu has a correct size), you can change this ZStack's alignment with this parameter

`inverseZIndex` - inverse zIndex of mainButton and the children. Use, for example, if you have a negative spacing and want to change the order

`wholeMenuSize` - pass CGSize binding to get updates of menu's size. Menu's size includes main button frame and all of elements' frames

`menuButtonsSize` - pass CGSize binding to get updates of combined menu elements' size



### Straight menu only options



`direction` - position of submenu buttons relative to main menu button  

`alignment` - alignment of submenu buttons relative to main menu button 



### Circle only options



`startAngle`  

`endAngle`  

`radius` - distance between center of main button and centers of submenu buttons  

`layoutDirection` - changes the button layout direction from the startAngle to the endAngle



## Examples



To try out the FloatingButton examples:

1. Clone the repo `git clone [email protected]:exyte/FloatingButton.git`.

2. Open `/Example`.

3. Run `Example.xcodeproj` - framework is imported as a local SPM package.

4. Try it!



## Installation



### Swift Package Manager



```swift

dependencies: [

    .package(url: "https://github.com/exyte/FloatingButton.git")

]

```



### CocoaPods



```ruby

pod 'FloatingButton'

```



### Carthage



```ogdl

github "Exyte/FloatingButton"

```



## Requirements



* iOS 14.0+ / macOS 11.0+ / watchOS 7.0+

* Xcode 12+



## Our other open source SwiftUI libraries

[PopupView](https://github.com/exyte/PopupView) - Toasts and popups library    

[Grid](https://github.com/exyte/Grid) - The most powerful Grid container    

[ScalingHeaderScrollView](https://github.com/exyte/ScalingHeaderScrollView) - A scroll view with a sticky header which shrinks as you scroll    

[AnimatedTabBar](https://github.com/exyte/AnimatedTabBar) - A tabbar with a number of preset animations   

[MediaPicker](https://github.com/exyte/mediapicker) - Customizable media picker     

[Chat](https://github.com/exyte/chat) - Chat UI framework with fully customizable message cells, input view, and a built-in media picker  

[OpenAI](https://github.com/exyte/OpenAI) Wrapper lib for [OpenAI REST API](https://platform.openai.com/docs/api-reference/introduction)    

[AnimatedGradient](https://github.com/exyte/AnimatedGradient) - Animated linear gradient     

[ConcentricOnboarding](https://github.com/exyte/ConcentricOnboarding) - Animated onboarding flow    

[ActivityIndicatorView](https://github.com/exyte/ActivityIndicatorView) - A number of animated loading indicators    

[ProgressIndicatorView](https://github.com/exyte/ProgressIndicatorView) - A number of animated progress indicators    

[FlagAndCountryCode](https://github.com/exyte/FlagAndCountryCode) - Phone codes and flags for every country    

[SVGView](https://github.com/exyte/SVGView) - SVG parser    

[LiquidSwipe](https://github.com/exyte/LiquidSwipe) - Liquid navigation animation