✋Manually

If you prefer not to use either of the aforementioned dependency managers, you can integrate JBButton into your project manually by downloading the JBButton.framework and adding it into your projet.

Usage

Creating a simple JBButton

1. Add a UIView

Drag and drop a UIView in the ViewController you want to add a JBButton. In the Identity inspector, set it as a JBButton custom class and press Enter. It’ll automagically set the right module for you.
Then, just customise it in the Attributes inspector! As the button is an IBDesignable component, most of the layouting can be done throughout the storyboard. Check out the simple example below.

Interface builder

Result

2. Declare it in your View Controller

Don’t forget to import the JBButton first 🙃

Depending on the language you are working on:

@IBOutlet weak var tweet: JBButton!

or

@property(nonatomic, weak) IBOutlet JBButton *tweet;

If you want to interact with the button, you class may extends the JBButtonDelegate protocol, in order to handle the didTapOnButton(:) method, and the delegate can be set either in code or in the interface builder.

3. 👀Inspectables explained

There’s plenty of IBInspectables in the interface builder. You can take a look at the code documentation for more details, or refer to this table.

Inspectable

Type

Documentation

Default value

title

String?

Text to be displayed

"Hit me!"

titleColor

UIColor

Color of the text

UIColor.blackColor()

titleAlignment

Int

Alignment of the text. Treat as NSTextAlignment.<alignment>.rawValue

1 (i.e. NSTextAlignmentCenter)

image

UIImage?

Image to be displayed

No default value

imageColor

UIColor

Color of the image, if rendered as template

UIColor.blackColor()

imageRenderingMode

Int

Rendering mode of the image.0 for .Original1 for .Template

0

imagePosition

Int

Position of the image in the button.0 for .Top1 for .Bottom2 for .Left3 for .Right4 for .Centered

0

cornerRadius

CGFloat

Corner radius of the button

0

borderWidth

CGFloat

Border width of the button

1

borderColor

UIColor

Border color of the button

UIColor.blackColor()

padding

CGFloat

Padding of the button

0

highlight

Bool

Determines whether the button should highlight on tap

true

In the example below, imageRenderingMode is set as template, imagePosition is set to top, highlight to true, …

Quick tap

Longer tap

4. 👀Accessible properties and methods

Property or method

Documentation

delegate: JBButtonDelegate?

The delegate of the button. Can be set either in code or in IB.

customTouchesBeganAnimations: CAAnimationGroup?

The custom touches began animation group. Set it in code.

customTouchesEndedAnimations: CAAnimationGroup?

The custom touches ended animation group. Set it in code.

customLoadingAnimations: CAAnimationGroup?

The custom loading animation group. Set it in code.

hideTitleOnLoad: Bool

Tells the button whether to hide the title on load or not.

isLoading: Bool

Tells you if the button is in a loading state or not.

setTitleFont(font: UIFont)

To set a custom font for the title.

setTitleText(title: String)

To set a new title.

Animations

Animating the button has been made simply. You can set properties such as customTouchesBeganAnimations or customTouchesEndedAnimations to pass CAAnimationGroup.

⚠️🎵Note #1: When the custom indicator is created, the frame is set to CGRect.zero. It’ll let the button calculate the frame automatically.⚠️

⚠️🎵Note #2: When the custom indicator is created, the start and stop methods must be defined in the startAnimationBlock and the stopAnimationBlock for the button to be able to properly start and stop animating. Here, I used the wonderful pod from @ninjaprox NVActivityIndicatorView. These indicators responds to custom start and stop methods startAnimation() and stopAnimations().⚠️

4. Black & shadowed button – Go! button

4.1. What do we want?

A black button titled "Go!". We want it to have a shadow. We want the "loading" state to be discrete, with a custom nice loader. We want the shadow to disappear when we tap the button, and to reappear when we stop tapping the button – animated, of course.

4.4. ⚠️Troubleshooting

To add a shadow that way to a UIView, it may not have a rounded corner. In order to add a shadow to a rounded UIView, please refer to the next example.

5. Gradiant layered-rounded-shadowed-animated button – Log in button

5.1. What do we want?

Basically, a button. But… We want it to have a gradiant layer, to be rounded, to have a shadow, to be animated while loading, animated while tapping, and to contain a custom login button. That’s quite simple right? 👯💃

5.2. Result

5.3. Sample code

As I want to have a rounded and shadowed button, I needed to embbed the JBButton in a UIView of the same size in the IB.