QBIndicatorButton

Custom of UIButton in Swift.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Features

• Edit button style from storyboard or code
• Set a gradient background and gradient directions
• Customize the corner radius, border color, border width
• Customize the button animation: scale, scale duration
• Edit the button shadows: color, opacity, offset, radius
• Show, hide activity indicator inside the button

Requirements

• Swift 5.0
• iOS 11.0+

Getting started

Storyboard Setup

Drag and drop UIButton into your Storyboard and set its class and module to QBIndicatorButton.

Customize your button by setting properties from the Interface Builder.

Code Setup

var loadingButton: QBIndicatorButton!
loadingButton = QBIndicatorButton(text: "Tap me",
                              textColor: UIColor.white,
                              font: UIFont.systemFont(ofSize: 18, weight: .semibold),
                              backgroundColor: .systemBlue,
                              cornerRadius: 4.0)

Button touch closure.

loadingButton.touch({ btn in
    // do stuff here
    btn.start()
}, for: .touchUpInside)

Show loading indicator.

loadingButton.start()
// or
loadingButton.start {
    // do something when start
    print("starting...")
}

Hide loading indicator.

loadingButton.stop()
// or
loadingButton.stop {
    // do something when stop
    print("stopping...")
}

Appearance

Supported appearance properties are:

Property	Type	Description	Default value
animatedScale	CGFloat	Animated scale	1.0
animatedScaleDuration	Double	Animated scale duration	0.2
borderColor	UIColor	Border color	UIColor.clear
borderWidth	CGFloat	Border width	0.0
cornerRadius	CGFloat	Corner radius	4.0
shadowColor	UIColor	The color of the layer's shadow	UIColor.clear
shadowOffset	CGSize	The offset of the layer's shadow	.zero
shadowOpacity	Float	The opacity of the layer's shadow	0.0
shadowRadius	CGFloat	The blur radius of the layer's shadow	0.0
gradientEnabled	Bool	Enable gradient background color	false
gradientStartColor	UIColor	Start of color gradient	UIColor.clear
gradientEndColor	UIColor	End of color gradient	UIColor.clear
gradientDirection	Int	Direction of color gradient 0~7	1
activityIndicatorPosition	Int	Position of activity indicator 0~2	1
titleFadeDuration	Double	Button title fade animated duration	0.3
indicatorRotateDuration (v0.1.7)	CFTimeInterval	The activity indicator rotate duration	1.0
indicatorStrokeColor (v0.1.7)	UIColor	Custom color of activity indicator	.white
indicatorStrokeWidth (v0.1.7)	CGFloat	Stroke width of activity indicator	3.0

QBIndicatorButton also supported round every single corner of the button.

// round topLeft and topRight corner only
loadingButton.roundCorners(corners: [.topLeft, .topRight], radius: 20)
// or
// round all corner
loadingButton.roundCorners(corners: [.allCorners], radius: 20)

Predefined positions of activity indicator.

public enum IndicatorPosition: Int {
    case left   = 0
    case center = 1
    case right  = 2
}

Predefined directions for color gradient.

public enum GradientDirection: Int {
    case toTop         = 0
    case toRight       = 1
    case toBottom      = 2
    case toLeft        = 3
    case toTopRight    = 4
    case toTopLeft     = 5
    case toBottomRight = 6
    case toBottomLeft  = 7
}

Installation

QBIndicatorButton is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'QBIndicatorButton'

Contributing

• If you found a bug, open an issue.
• If you have a feature request, open an issue.
• If you need help, open an issue.
• If you want to contribute, submit a pull request.

MIT License

QBIndicatorButton is available under the MIT license. See the LICENSE file for more info.

Made with :heart: by sjc-bui.