Easily customizable floating button menu created with SwiftUI

Related tags

Button swiftui swiftui-animations swiftui-components
Overview

FloatingButton

Easily customizable floating button menu created with SwiftUI

We are a development agency building phenomenal apps.




Travis CI Version Carthage Compatible License Platform Twitter

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:

    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.

FloatingButton(mainButtonView: mainButton, buttons: buttons, isOpen: $isOpen)
  1. Chain .straight() or .circle() to specify desired menu type.
  2. Chain whatever you like afterwards. For example: 
    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)

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

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

Examples

To try out the FloatingButton examples:

  1. Clone the repo git clone [email protected]:exyte/FloatingButton.git.
  2. Open terminal and run cd <FloatingButtonRepo>/Example.
  3. Run pod install to install all dependencies.
  4. Run xed . to open project in the Xcode.
  5. Try it!

Installation

CocoaPods

pod 'FloatingButton'

Carthage

github "Exyte/FloatingButton"

Manually

Drop FloatingButton.swift into your project.

Requirements

  • iOS 13+ / watchOS 13+ / tvOS 13+ / macOS 10.15+
  • Xcode 11+
Comments
  • Better example code in README

    Better example code in README

    Hey, FloatingButton looks awesome! As I understand you have an example project, it would be good to have a couple of lines in the README. You can follow cariocamenu as an example

    opened by lfarah 4
  • FREE YouTube video tutorial for Floating Button

    FREE YouTube video tutorial for Floating Button

    Hi, I love Floating Button so much that I have crated a 25 minutes long YouTube video about it. You can take a look at it here:

    https://www.youtube.com/watch?v=E3ks0l0Qbkc&list=PL_csAAO9PQ8Zia0zTZZjd0KZBEkcKb4yp&index=2

    If you do like it you may want to consider adding it to the README file with this image (people click on images more often than on links):

    FloatingButtons

    Thanks for the awesome repo again!

    opened by rebeloper 3
  • precondition failure: invalid input index: 2 run error

    precondition failure: invalid input index: 2 run error 

    var body: some View {
    GeometryReader { geometry in
        Rectangle()
            .fill(Color.clear)
            .preference(key: SubmenuButtonPreferenceKey.self,
                        value: [geometry.frame(in: .named("ExampleButtonSpace")).size])
    }
}
    opened by zhanggenlove 3
  • Thread 1: Fatal error: Index out of range

    Thread 1: Fatal error: Index out of range

    When using this I get the error Thread 1: Fatal error: Index out of range, screenshot below.

    Screenshot 2020-10-02 at 20 36 24

    I've followed the Example code but getting this issue...

    var body: some View {
    let mainButton2 = AnyView(MainButton(imageName: "ellipsis"))
    
    let textButtons = (0..<MockData.iconAndTextTitles.count).reversed().map { i in
      AnyView(
        IconAndTextButton(
          imageName: MockData.iconAndTextImageNames[i],
          buttonText: MockData.iconAndTextTitles[i]
        )
      )    }
    
    return VStack {
      Spacer().layoutPriority(10)
      
      HStack {
        Spacer().layoutPriority(10)
      
        FloatingButton(mainButtonView: mainButton2, buttons: textButtons)
          .straight()
          .direction(.top)
          .alignment(.right)
          .spacing(10)
          .initialOpacity(0)
      }
    }
  }

    ZStack {
  ....view code
  Button()
}
    opened by benstokoe 2
  • Labels on nested buttons skew circular layout

    Labels on nested buttons skew circular layout

    I really like this library, but I need to have labels attached to circular (nested) buttons. I want the circular layout to be based on the core (circle) part of the buttons, ignoring the attached labels. Could you add either an option for labels, or a way to specify the geometry/size of each button to use in calculating the circular layout.

    opened by dd-mf 1
Owner
Exyte
Exyte
GitHub
Customizable download button with progress and transition animations. It is based on Apple's App Store download button.

AHDownloadButton is a customizable download button similar to the download button in the latest version of Apple's App Store app (since iOS 11). It fe

Amer Hukić 465 Dec 24, 2022
Floaty is simple floating action button for iOS.

Floaty is simple floating action button for iOS. (formerly KCFloatingActionButton) Why change the name? Follow the swift naming convention. KCF

Lee Sun-Hyoup 1.5k Jan 7, 2023
Material Design Floating Action Button in liquid state

LiquidFloatingActionButton [] (https://github.com/Carthage/Carthage) LiquidFloatingActionButton is floating action button component of material design

Takuma Yoshida 3.8k Dec 29, 2022
Revamped Download Button. It's kinda a reverse engineering of Netflix's app download button.

NFDownloadButton Revamped Download Button Requirements Installation Usage License Requirements iOS 8.0+ Swift 4.2+ Xcode 10.0+ Installation CocoaPods

Leonardo Cardoso 433 Nov 15, 2022
Customizable and easy to use expandable button in Swift.

ExpandableButton Requirements iOS 9.0+ Installation CocoaPods: Add the following line to your Podfile: pod 'ExpandableButton' #for swift less than 4.

Dmytro Mishchenko 98 Dec 5, 2022
Simple and customizable button in Swift

SwiftyButton Maintainer(s): @nickm01 @pmacro @aryamansharda Simple and customizable button in Swift. Installation Cocoapods pod 'SwiftyButton' Cartha

Scoop 542 Dec 13, 2022
Simple customizable iOS bottom menu works like Tabbar, in Swift

SSCustomTabMenu Simple customizable iOS bottom menu works like Tabbar, in Swift. Features Simple and customizable iOS Tab Menu items, in Swift. Requir

Simform Solutions 81 Aug 3, 2022
Craft that perfect SwiftUI button effect 👌🏼

buttoncraft (SwiftUI 3.0 App) Experimenting with SwiftUI 3.0 whilst creating a practical app to craft that perfect button style. ✈️ Testflight https:/

An Trinh 188 Dec 28, 2022
Custom loading button with progress swiftui

CustomLoadingButton Simple Custom Loading Progress Button for SwiftUI Version 1.0.0 This version requires Xcode 11+ SwiftUI iOS 13+ macOS 10.15+ Insta

Tariqul 1 Dec 14, 2022
A SwiftUI button that expands to reveal more content.

CUIExpandableButton A SwiftUI button that expands to reveal more content. CUIExpandableButton is part of the Crystal UI framework (under developement)

Robert Cole 6 Dec 10, 2022
Cute Animated Button written in Swift.

DOFavoriteButton Cute Animated Button written in Swift. It could be just right for favorite buttons! Requirements iOS 7.0+ Swift 1.2 Installation Cart

Daiki Okumura 3.6k Dec 29, 2022
IGStoryButtonKit provides an easy-to-use button with rich animation and multiple way inspired by instagram story/stories.

Introduction Have you ever seen UI like instagram story, haven't you? Actually, features like instagram story have been implemented in many applicatio

mutation 34 Nov 8, 2022
LTHRadioButton - A radio button with a pretty animation

LTHRadioButton Slightly inspired by Google's material radio button. The clip below has 3 sections: full speed, 25% and 10%, but after converting it to

Roland Leth 368 Dec 16, 2022
Multiple state tap-to-toggle UIButton (like old camera flash button)

Multiple State Toggle UIButton A UIButton subclass that implements tap-to-toggle button text. (Like the camera flash and timer buttons) Usage Just cre

Yonat Sharon 83 Oct 11, 2022
Lickable-Button We made the buttons on the screen look so good you'll want to lick them

Lickable-Button We made the buttons on the screen look so good you'll want to lick them. - Steve Jobs A little SwiftUI button project at WWDC 2021 Lic

Nate Thompson 14 Dec 29, 2021
iOS Pod for a Soft UI (Neumorphic) Button for UIKit written in Swift

iOS Pod for a Soft UI (Neumorphic) Button for UIKit written in Swift

Pallav Agarwal 21 Oct 23, 2022
iOS 7-style bouncy button.

SSBouncyButton SSBouncyButton is simple button UI component with iOS 7-style bouncy animation. Take A Look Try It! pod 'SSBouncyButton', '~> 1.0' Use

StyleShare 310 Dec 15, 2022
Flat button with 9 different states using POP

VBFPopFlatButton Flat button with 21 different states and 2 types animated using pop. These are some examples of both types in different states: And h

Victor Baro 3.1k Nov 30, 2022
Flat design pressable button for iOS developers.

HTPressableButton HTPressableButton is designed for iOS developers to be able to spend time developing ideas, not building basic buttons. These stylis

Famolus 859 Dec 12, 2022