Flat button with 9 different states using POP

Last update: Jul 29, 2022

VBFPopFlatButton

Flat button with 21 different states and 2 types animated using pop.

These are some examples of both types in different states:

Examples

And here you can see them animated:

ButtonDribbble

##How to use it Best way is using CocoaPods

pod 'VBFPopFlatButton'

You can also clone and open example project. The class you have to use is VBFPopFlatButton (subclass of UIButton). You will also find VBFDoubleSegment which is just a helping class.

Here there is some example code on how to use the button:

Flat Rounded Style

//Example
self.flatRoundedButton = [[VBFPopFlatButton alloc]initWithFrame:CGRectMake(100, 150, 30, 30)
                                              buttonType:buttonMenuType
                                             buttonStyle:buttonRoundedStyle
                                             animateToInitialState:YES];
self.flatRoundedButton.roundBackgroundColor = [UIColor whiteColor];
self.flatRoundedButton.lineThickness = 2;
self.flatRoundedButton.tintColor = [UIColor flatPeterRiverColor];
[self.flatRoundedButton addTarget:self
                           action:@selector(flatRoundedButtonPressed)
                 forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.flatRoundedButton];

Flat Plain Style

//Example
self.flatPlainButton = [[VBFPopFlatButton alloc]initWithFrame:CGRectMake(200, 150, 30, 30)
                                                   buttonType:buttonAddType
                                                  buttonStyle:buttonPlainStyle
                                                  animateToInitialState:NO];
self.flatPlainButton.lineThickness = 2;
self.flatPlainButton.tintColor = [UIColor whiteColor];
[self.flatPlainButton addTarget:self
                         action:@selector(flatPlainButtonPressed)
               forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.flatPlainButton];

Requested feature added on 0.0.5 The designated initializer has changed to:

    - (instancetype)initWithFrame:(CGRect)frame 
                    buttonType:(FlatButtonType)initType 
                   buttonStyle:(FlatButtonStyle)bStyle 
        animateToInitialState:(BOOL)animateToInitialState;  

Adding the last 'animateToInitialState' boolean. Sending YES, the button will perform as in older versions (will animate on viewWillAppear from original type, represented as vertical line, to your initial type). Sending NO, the button will be presented using initial type with no animation on presentation.

In both cases, you can use the following method to animate the button from one state to the next:

[flatRoundedButton animateToType:nextType];

This are the 20 types avaiable for the button:

typedef NS_ENUM(NSInteger, FlatButtonType) {
buttonDefaultType,             // Vertical line
buttonAddType,                 // +
buttonMinusType,               // -
buttonCloseType,               // x
buttonBackType,                // <
buttonForwardType,             // >
buttonMenuType,                 // 3horizontal lines
buttonDownloadType,
buttonShareType,
buttonDownBasicType,
buttonUpBasicType,
buttonDownArrowType,
buttonPausedType,
buttonRightTriangleType,
buttonLeftTriangleType,
buttonUpTriangleType,
buttonDownTriangleType,
buttonOKType,
buttonRewindType,
buttonFastForwardType,
buttonSquareType
};

More types are welcomed :D

For more info, visit my blog victorbaro.com

Apps using this control

I would love to know which apps in the App Store are using this control. Please, feel free to add your app :)

GitHub

https://github.com/victorBaro/VBFPopFlatButton
Comments
  • 1. Feature request: Set initial state without animation

    Currently the animation shows up front when the button is created. It would be great to control if animation is required for the initial state or if the button should show the initial type with no animation.

    Thanks for this awesome animated button!

    Reviewed by rubyboy at 2014-09-21 00:49
  • 2. VBFPopFlatButton as UIBarButtonItem

    Hi, when I added VBFPopFlatButton as UIBarButtonItem, the all touches are not recognized from first time – it's very bad triggered. My try was in that way:

            self.addTaskButton = [[VBFPopFlatButton alloc] initWithFrame:CGRectMake(0, 0, 25, 25) buttonType:buttonAddType buttonStyle:buttonPlainStyle animateToInitialState:YES];
            self.addTaskButton.lineThickness = 2;
            self.addTaskButton.tintColor = [UIColor whiteColor];
            [self.addTaskButton addTarget:self
                                   action:@selector(addTask)
                         forControlEvents:UIControlEventTouchUpInside];
    
            UIView *containingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 25, 25)];
    //        UITapGestureRecognizer *singleFingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(addTask)];
    //        [containingView addGestureRecognizer:singleFingerTap];
            [containingView addSubview:self.addTaskButton];
            UIBarButtonItem *containingBarButton = [[UIBarButtonItem alloc] initWithCustomView:containingView];
            self.navigationItem.rightBarButtonItem = containingBarButton;
    

    Then I tried to make containing view tappable and increase its area but this didn't help. I know that UIButton and UIBarButtonItem are the different things but maybe someone could help me to make VBFPopFlatButton work as normal default UIBarButtonItem and make it excellent triggering? Thanks.

    Reviewed by sashakid at 2014-11-28 09:15
  • 3. Is this library still being developed?

    Hi @victorBaro ,

    First of all I would like to appreciate for creating such a cool animation buttons

    I want to know is this library still in active development? I am planning to write a ReactNative wrapper around the same

    Thanks Pranav

    Reviewed by prscX at 2017-11-12 13:17
  • 4. Handle line color differently

    The lineColor property should be removed in favor of the tintColor property. UIButtons on iOS 7+ set the color of their (background)images (if the images are template images) via the tintColor property and so should VBFPopFlatButton. The lineColor could be deprecated, and then removed in the future in favor of tintColor.

    Additionally, I would like to add a feature to set the tintColor based on the state of the button. A setTintColor:forState: method. This would allow to set different colors for different states (for example a darker color when the button is highlighted, etc), which is currently not possible.

    I would fork the repo, add these features and then send a pull request. But please let me know before I do that if you would pull these changes!

    Cheers :)

    Reviewed by JonasGessner at 2014-09-01 21:30
  • 5. Animation stops working

    Hi, here's my scenario:

    I have [self.button animateToType:buttonCloseType] fire when the button is tapped, coming from buttonMenuType, which opens up an RNFrostedSidebar.

    When the sidebar is dismissed, it fires it's own delegate method didDismissFromScreen, and in there, i have [self.button animateToType:buttonMenuType], which fires fine.

    After that, when I tap the button again, the RNFrostedSidebar opens up, but I no longer get any animations, but the self.button.currentButtonType shows the correct button type both before and after firing animateToType even though the animation doesn't fire. Any thoughts?

    Reviewed by evliu at 2014-09-05 17:25
  • 6. Broken link to animated image

    Hi there,

    In readme, the link https://camo.githubusercontent.com/b18993cbfe91de8abdc0019dc9a6cd44707eec21/68747470733a2f2f6431337961637572716a676172612e636c6f756466726f6e742e6e65742f75736572732f3338313133332f73637265656e73686f74732f313639363538302f766266706f70666c6174627574746f6e332e676966 is a broken link. It says it's supposed to give us the animated prview.

    Reviewed by Noitidart at 2018-05-12 18:09
  • 7. fix : project was not building

    Thanx for this great Control, its really awsome :+1: I ran into an issue here -> I cloned the repo and it was not building the first time , so I ran pod install and it builds now . it might be a problem with me only , am not sure ..

    the other two comments are refactoring ..

    from Apple statement "Don’t Use Accessor Methods in Initializer Methods and dealloc" "https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/MemoryMgmt/Articles/mmPractical.html" an thus I removed some checks on nil values since its no more needed .. e.g _topLine is not going to be nill . from my debugging observations.. Thnx again :) " I created the pull request before committing the latest 2 commits, am confused :/ "

    Reviewed by MoathOthman at 2015-04-01 23:49
  • 8. Update README.md

    The first letter of "pod" should be lowercase.

    pod update
    
    [!] Invalid `Podfile` file: undefined method `Pod' for Podfile:Pod::Podfile. Updating CocoaPods might fix the issue.
    
     #  from /xxxxx/myDemo/Podfile:20
     #  -------------------------------------------
     #  pod 'pop'
     >  Pod 'VBFPopFlatButton'
     #  
     #  -------------------------------------------
    
    Reviewed by VincentSit at 2014-08-26 17:18
  • 9. tag 0.0.2 has a bug that in method (void)animateToType:(FlatButtonType)finalType, forget to set self.currentButtonType

    tag 0.0.2 has a bug that in method (void)animateToType:(FlatButtonType)finalType, forget to set self.currentButtonType, but I can see this bug has been fixed on master.

    Reviewed by jianpx at 2014-08-26 10:49
  • 10. Correct the spelling of CocoaPods in README

    This pull requests corrects the spelling of CocoaPods 🤓 https://github.com/CocoaPods/shared_resources/tree/master/media

    Created with cocoapods-readme.

    Reviewed by ReadmeCritic at 2016-02-13 05:53
  • 11. VBFPopFlatButton as UIBarButtonItem

    Hi, when I added VBFPopFlatButton as UIBarButtonItem, the all touches are not recognized from first time – it's very bad triggered. My try was in that way:

            self.addTaskButton = [[VBFPopFlatButton alloc]initWithFrame:CGRectMake(0, 0, 25, 25) buttonType:buttonAddType buttonStyle:buttonPlainStyle animateToInitialState:YES];
            self.addTaskButton.lineThickness = 2;
            self.addTaskButton.tintColor = [UIColor whiteColor];
            [self.addTaskButton addTarget:self
                                   action:@selector(addTask)
                         forControlEvents:UIControlEventTouchUpInside];
            self.addTaskButton.contentMode = UIViewContentModeCenter;
    
            UIView *containingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 25, 25)];
    //        UITapGestureRecognizer *singleFingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(addTask)];
    //        [containingView addGestureRecognizer:singleFingerTap];
            [containingView addSubview:self.addTaskButton];
            UIBarButtonItem *containingBarButton = [[UIBarButtonItem alloc] initWithCustomView:containingView];
            self.navigationItem.rightBarButtonItem = containingBarButton;
    

    Then I tried to make containing view tappable and increase its area but this didn't help. I know that UIButton and UIBarButtonItem are the different things but maybe someone could help me to make VBFPopFlatButton work as normal default UIBarButtonItem and make it excellent triggering? Thanks.

    Reviewed by sashakid at 2014-11-28 09:13
  • 12. Added Support for React Native Projects

    Hi @victorBaro

    This is with reference to issue: 39

    I have created the React Native bridge plugin for using this library with React Native projects.

    I have added the same in README. Can you please merge this request so that if someone is looking to use this library for React Native projects can easily do the same.

    Please let me know in case any changes are required.

    react-native-iconic

    Thanks Pranav

    Reviewed by prscX at 2018-01-21 17:35
  • 13. Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    Reviewed by bryant1410 at 2017-04-16 19:49
  • 14. Allow to increase button touchable area (contentEdgeInsets)

    Hey there, thanks for sharing this awesome component Victor.

    I'd like to make a suggestion or maybe it's me not using the button as I should and you can give me a hand. I'm trying to create a small button but increase it's touchable area so as it's not difficult for the user to touch it, know what I mean? I usually do this with vanilla UIButtons by adding a contentEdgeInsets, but that's not working for me with the VBFPopFlatButton. I end up having to increase the frame size which in fact it ends increasing the "icon drawing" size.

    Let me know if that makes sense. Thanks!

    Agus Guerra.

    Reviewed by agusguerra10 at 2016-04-23 02:12
  • 15. Allow setting different colors for different button states

    ... so that "+" button can be green and "X" button can be red... ;-)

    • Add "setCircleColor:forButtonType:" method
    • Add "setLineColor:forButtonType:" method
    Reviewed by petrdvorak at 2016-02-27 08:51
  • 16. Rendering bug

    I have noticed a rendering Bug in my project and I could verify it in your example project using the following setup :

    -(void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        self.view.backgroundColor = [UIColor whiteColor];
    
    [...]
        self.flatPlainButton = [[VBFPopFlatButton alloc]initWithFrame:CGRectMake(200, 100, 22, 22)
                                                           buttonType:buttonMenuType
                                                          buttonStyle:buttonPlainStyle
                                                animateToInitialState:NO];
        self.flatPlainButton.lineThickness = 2.0;
        self.flatPlainButton.tintColor = [UIColor darkGrayColor];
        [self.flatPlainButton addTarget:self
                                 action:@selector(flatPlainButtonPressed)
                       forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:self.flatPlainButton];
    }
    

    renderingbugmenu

    Reviewed by fruitcoder at 2015-09-18 22:10
Yet another animated flat buttons in Swift
Yet another animated flat buttons in Swift

DynamicButton is a powerful flat design button written in Swift to display hamburger button like with animated transitions between style updates. It a

Jul 15, 2022
Customizable download button with progress and transition animations. It is based on Apple's App Store download button.
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

Aug 6, 2022
Revamped Download Button. It's kinda a reverse engineering of Netflix's app download button.
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

May 25, 2022
Animated Play and Pause Button written in Swift, using CALayer, CAKeyframeAnimation.
Animated Play and Pause Button written in Swift, using CALayer, CAKeyframeAnimation.

AnimatablePlayButton Animated Play and Pause Button written in Swift, using CALayer, CAKeyframeAnimation. features Only using CAShapeLayer, CAKeyframe

Jun 10, 2021
Cute Animated Button written in Swift.
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

Aug 8, 2022
Customizable and easy to use expandable button in Swift.
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.

May 9, 2022
Easily customizable floating button menu created with SwiftUI
Easily customizable floating button menu created with SwiftUI

FloatingButton Easily customizable floating button menu created with SwiftUI We are a development agency building phenomenal apps. Usage Create main b

Jul 28, 2022
Floaty is simple floating action button for iOS.
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

Aug 4, 2022
IGStoryButtonKit provides an easy-to-use button with rich animation and multiple way inspired by instagram story/stories.
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

Jul 20, 2022
LTHRadioButton - A radio button with a pretty animation
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

Jul 20, 2022
Multiple state tap-to-toggle UIButton (like old camera flash button)
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

Aug 8, 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

Dec 29, 2021
Craft that perfect SwiftUI button effect 👌🏼
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:/

Jul 30, 2022
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

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

Jun 6, 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

Oct 18, 2021
An open-source library to use with SwiftUI, It allows you to create Floating menu action button.
An open-source library to use with SwiftUI, It allows you to create Floating menu action button.

Floating Menu Action Button Example Overview This is an open-source library to use with SwiftUI. It allows you to create Floating menu action button. Ins

Feb 14, 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

Mar 19, 2022
Material Design Floating Action Button in liquid state
Material Design Floating Action Button in liquid state

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

Aug 2, 2022
Simple and customizable button in Swift
Simple and customizable button in Swift

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

Jul 31, 2022