https://github.com/victorBaro/VBFPopFlatButton

Flat button with 9 different states using POP
https://github.com/victorBaro/VBFPopFlatButton

Last synced: 3 months ago
JSON representation

Flat button with 9 different states using POP

• Host: GitHub
• URL: https://github.com/victorBaro/VBFPopFlatButton
• Owner: victorBaro
• License: mit
• Created: 2014-08-17T00:23:14.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-05-12T20:11:39.000Z (over 6 years ago)
• Last Synced: 2024-05-17T23:41:20.435Z (6 months ago)
• Language: Objective-C
• Size: 917 KB
• Stars: 3,093
• Watchers: 84
• Forks: 297
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ios - VBFPopFlatButton - Flat button with 9 different states animated using Facebook POP. (UI / Button)
• awesome-ios-star - VBFPopFlatButton - Flat button with 9 different states animated using Facebook POP. (UI / Button)
• Awesome-iOS - VBFPopFlatButton - Flat button with 9 different states using POP (UI Components)

README

        
VBFPopFlatButton

================

Flat button with 21 different states and 2 types animated using [pop](https://github.com/facebook/pop).

These are some examples of both types in different states:

![Examples](https://raw.githubusercontent.com/iBaro/VBFPopFlatButton/master/examples.jpg)

And here you can see them animated:

![ButtonDribbble](https://cdn.dribbble.com/users/381133/screenshots/1696580/vbfpopflatbutton3.gif)

##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](http://victorbaro.com/)

## Third Party Bindings

### React Native

You may now use this library with [React Native](https://github.com/facebook/react-native) via the module [here](https://github.com/prscX/react-native-iconic)

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