VBPopFlateButton
  • November 8, 2023

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 😀

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


View Github

#animation #ios #swift #uibutton
YOU MIGHT ALSO LIKE...
Pager tab strip view

Introduction PagerTabStripView is the first pager view built in pure SwiftUI. It provides a component to create interactive pager views ...

PageView

SwiftUI view enabling page-based navigation, imitating the behaviour of UIPageViewController in iOS.

Pages

    

How to take action when a property changes

1. Taking Action When a Property Changes: Property Observers Swift lets you observe and respond to changes in a property’s ...

How to create your own structs? How to compute property values dynamically?

1. Creating Your Own Structs In Swift, a struct is a value type that you define with the struct keyword. ...