Skip to content

✔️ Simple way to display activity indicator inside the button.

License

Notifications You must be signed in to change notification settings

sjc-bui/QBIndicatorButton

Repository files navigation

QBIndicatorButton

Build Status Version License Platform

Custom of UIButton in Swift.

Screenshot

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.

custom class

Customize your button by setting properties from the Interface Builder.

custom properties

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 ❤️ by sjc-bui.