victorbaro / vbfpopflatbutton

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 here you can see them animated:

##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 :)

vbfpopflatbutton's Issues

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 :)

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.

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];
}

Make Expecta work

@victorBaro assign to me

Is it compatible with swift?

Hello developer, your Popflatbutton works well with Objective C but I need it to make it work with swift. Can you please help ?

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!

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

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

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.

Please update podspec

Podspec references 0.0.5 tag. Latest changes are not tagged.

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?

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.

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.

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.

Use UIView animation instead of pop?

The POPSpringAnimation can be replaced by [UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options: animations:completion:], which allows you to create spring animations that are very similar to those of a POPSpringAnimations. The advantage of this though is that 1. there is no need for a big 3rd party library (pop), and 2. It isn't tied to CALayers but you can also animate a UIView this way. The fact that the button would no longer rely on pop is a big deal. Pop is a massive library compared to this tiny button library. I really hope that you consider removing pop in favor of the UIKit spring animation. I would be glad to help updating the code!