Skip to content

A button that is triggered based on the 3D Touch pressure, similar to the iOS 11 control center.

License

Notifications You must be signed in to change notification settings

BalestraPatrick/HapticButton

Repository files navigation

buddybuild Carthage License Platform Twitter: @BalestraPatrick

HapticButton

📖 Description

HapticButton replicates the behavior of the buttons in the iOS 10 and 11 Control Center as well as in the Home app. A device with 3D Touch is required to fully experience the haptic feedback on supported devices. It is implemented as a subclass of UIControl, so feel free to further customize it to your needs.

The user is required to press the button and activate 3D Touch with a minimum pressure threshold (you can specify the minimum value to trigger the button via the feedbackThreshold property). This allows for a cool interaction that gives a haptic feedback to the user when the button is triggered. 👍

For the best experience, install the example on a device. 📱

The example project shows how to set up HapticButton in a few different ways.

  • Create a button with a UILabel. Use the HapticButtonDelegate to be notified when the button is triggered.
@IBOutlet weak var button: HapticButton!
button.mode = .label(text: "Hello! 👋")
// Use the delegate method to be notified when the button is pressed.
button.delegate = self
  • Create a button with a UIImageView and a blur background. Use the standard UIControl event to subscribe to the touch up inside event.
let blurButton = HapticButton(mode: .image(image: #imageLiteral(resourceName: "swift")))
blurButton.addBlurView(style: .light)
// Add custom target selector to the touch up inside event.
blurButton.addTarget(self, action: #selector(blurButtonPressed(_:)), for: .touchUpInside)
  • Create a button with a customized UILabel and dark blur background. Subcribe to the button events through a closure.
let blurButton = HapticButton(mode: .label(text: "Hello Blur!"))
darkBlurButton.textLabel.textColor = .white
darkBlurButton.addBlurView(style: .dark)
// Pass closure to be invoked when the button is pressed.
darkBlurButton.onPressed = {
	print("Dark blur button pressed.")
}

🎨 Customizations

These are the public properties that allow you to customize the control. In case you are thinking to modify HapticButton even further, consider creating a Pull Request! 👏🏻

public weak var delegate: HapticButtonDelegate?

/// The closure invoked when the button is pressed.
public var onPressed: Callback?

/// The minimum pressure that the button press has to receive in order to trigger the related haptic feedback. The value has to be between 0 and 1 and the default is 0.25.
public var feedbackThreshold = 0.25

/// If the button is in mode `label`, this `UILabel` is part of the button hierarchy. Modify this object directly for more customizations on the displayed text.
public lazy var textLabel: UILabel

/// If the button is in mode `image`, this `UIImageView` is part of the button hierarchy. Modify this object directly for more customizations on the displayed image.
public lazy var imageView: UIImageView

/// The current mode of the button.
public var mode = HapticButtonMode.label(text: "Title")

🔞 Requirements

iOS 10.0 and Swift 3.2 are required.

If you are using Swift 4, please use the swift4 branch.

🛠 Installation

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

pod "HapticButton"

You can also use Carthage if you prefer. Add this line to your Cartfile.

github "BalestraPatrick/HapticButton"

👨‍💻 Author

I'm Patrick Balestra.

Email: me@patrickbalestra.com

Twitter: @BalestraPatrick.

License

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

About

A button that is triggered based on the 3D Touch pressure, similar to the iOS 11 control center.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •